Saatnya Menguasai useContext React di Luar Kepala

Halo teman-teman Dev, di kesempatan ini kita akan sama-sama belajar menguasai useContext React di luar kepala.

Sedikit cerita, dari beberapa project React yang sudah saya kerjakan, saya sedikit menyesal karena jarang melibatkan salah satu hook penting ini di React, saya terlalu sering mengirim data via props, hal ini tentu menyulitkan jika saya ingin mengakses data diluar cakupan komponen tersebut.

Oke ayo kita belajar, yang pertama kita harus mengetahui definisi dari useContext tersebut, kenapa kita harus menggunakannya dan bagaimana contoh penggunaannya.

Apa itu useContext?

useContext adalah salah satu dari beberapa hook yang disediakan oleh React untuk mengelola state dan lifecycle dalam komponen fungsional. Penggunaan utamanya adalah untuk mengakses nilai dari context di dalam komponen fungsional tanpa perlu melalui prop drilling (meneruskan prop dari komponen ke komponen secara bertingkat).

Dengan menggunakan useContext, kita bisa mengakses nilai-nilai yang disimpan dalam context di mana pun di dalam pohon komponen kita tanpa perlu meneruskannya melalui props.

Nah, dari pengertian di atas terjawab sudah kenapa kita perlu menggunakan useContext, terutama untuk penggunaan data-data yang sering digunakan, seperti data user.

Cara Menggunakan useContext

Cara menggunakan hooks ini cukup mudah, namun karena tidak ada panduan secara khusus bagaimana struktur file untuk pembuatan context, disini saya buat satu folder khusus untuk menampung context dengan nama context.

Di dalam folder context, buat file baru sebagai contoh dengan nama UserContext.js, di dalam file ini kita mendeklarasikan fungsi userContext.

//context/UserContext.js
import React from 'react';

const UserContext = React.createContext();

export default UserContext;

Selanjutnya mengisi nilai pada context,

nilai UserContext hanya dapat diisi pada pohon DOM paling atas,

cara ini ditandai dengan pemanggilan fungsi .Provider. Provider adalah komponen dari React Context API yang digunakan untuk menyediakan nilai ke konteks di dalam pohon komponen. Provider harus ditempatkan di atas komponen-komponen yang akan mengakses nilai dari konteks tersebut.

Disini saya meletakkan Provider di folder main.js, ini merupakan pohon tertinggi dari struktur DOM project React saya.

//src/main.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.jsx';
import './index.css';
import UserContext from './context/UserContext.js';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <UserContext.Provider value="Nilai user context">
      <App />
    </UserContext.Provider>
  </React.StrictMode>
);

Ketika menggunakan Provider, kita memberikan nilai yang akan menjadi nilai konteks untuk komponen-komponen di bawahnya. Ini memungkinkan komponen-komponen tersebut untuk mengakses nilai konteks tanpa perlu prop drilling, yaitu meneruskan prop dari satu komponen ke komponen lainnya di seluruh pohon komponen.

Selanjutnya kita bisa memanggil atau menggunakan data-data yang disediakan dari Context. Berikut ini saya coba akses nilai UserContext.

import './App.css';
import UserContext from './context/UserContext';
import { useContext } from 'react';

function App() {
  const nilaiDariContext = useContext(UserContext);

  return (
    <>
      <p className="read-the-docs">Belajar useContext</p>
      <p>{nilaiDariContext}</p>
      <p>{nilaiDariContext}</p>
    </>
  );
}

export default App;

Preview Render

Kesimpulan

useContext adalah salah satu hook yang disediakan oleh React untuk mengakses nilai dari konteks di dalam komponen fungsional. Berfungsi untuk akses global, seperti tema, bahasa, atau autentikasi, di seluruh aplikasi React. Dengan menggunakan useContext, komponen dapat mengakses nilai konteks tanpa perlu prop drilling, yang memungkinkan kode menjadi lebih bersih dan terorganisir. Dengan menggunakan useContext dengan benar, kita dapat dengan mudah mengelola nilai-nilai global dan menghindari kerumitan prop drilling di dalam aplikasi React.

Demikian catatan singkat saya, semoga bermanfaat.