Memahami React Context

React adalah sebuah library yang digunakan untuk membangun antarmuka pengguna atau User Interface (UI). Salah satu konsep yang ada pada React adalah Component-Based, dengan konsep ini pengembang atau developer dapat mengembangkan tampilan antarmuka berdasarkan dari susunan komponen.

Pada sebuah aplikasi yang dibangun menggunakan React, umumnya data di-passing dari atas ke bawah (top-down) atau dari komponen induk ke komponen anak (parent to child) dengan menggunakan props. Namun pada beberapa kasus akan menjadi rumit ketika menggunakan props seperti ketika passing data yang bersifat global seperti preferensi bahasa, authenticated user data, dan UI theme (Dark or Light Mode).

Kemudian hadirlah Context, sebuah API di dalam React yang menyediakan cara untuk passing dan consuming data ke komponen apapun yang diperlukan pada aplikasi React yang sedang dibangun tanpa menggunakan props. Data yang akan di passing menggunakan Context adalah data yang tidak terlalu sering diupdate.

Jika ditanya kenapa, maka jawabannya adalah Context dibuat bukan untuk dijadikan sebagai state management untuk aplikasi melainkan untuk membuat consuming data menjadi lebih mudah lagi. Jika dipikir-pikir, konsepnya hampir sama dengan global variable.

How to Use?

Context adalah sebuah API yang dibangun di dalam React, ini berarti kita dapat langsung membuat dan menggunakan Context dengan meng-import React pada project.

Terdapat beberapa langkah untuk menggunakan Context, yaitu:

• Membuat context menggunakan metode createContext
• Buat sebuah provider dengan context yang sudah dibuat sebelumnya
• Letakkan value yang akan dipass ke komponen lain pada context provider dengan menggunakan value prop
• Panggil komponen yang akan meng-consume context di dalam provider yang sudah dibuat
• Consume value tersebut di dalam komponen lain menggunakan context consumer

Di bawah ini adalah contoh implementasi React Context.

Copycopy code to clipboard
1import React from 'react';
2
3export const ThemeContext = createContext();
4
5export default function App() {
6  return (
7    <ThemeContext.Provider value="dark-theme">
8      <HomePage />
9    </ThemeContext.Provider>
10  )
11}
12
13function User() {
14  return (
15    <ThemeContext.Consumer>
16      <div className={value}></div>
17    </ThemeContext.Consumer>
18  )
19}

Jadi disini casenya adalah untuk mengirimkan props tema yang digunakan yaitu light atau dark. Sesuai dengan langkah-langkah yang sudah ditulis diatas, pertama-tama adalah membuat contextnya dengan menggunakan createContext. Setelah itu membuat provider dengan context yang sudah dibuat yaitu ThemeContext.Provider dan membuat sebuah props untuk menampung nilai yang akan dipass ke komponen lain.

Selanjutnya adalah memanggil komponen yang akan menerima nilai dari context di dalam provider. Langkah terakhir adalah membuat consumer di dalam komponen target dan consume value yang berada di dalam context.

Itu tadi sedikit tentang React Context, jika memang masih ada yang mengganjal bisa langsung dm aja ke sini. Makasih udah baca sampe selesai, have a nice day!