Belajar React Dasar #13: Context API

• Apa Itu Context API?
• Langkah 1 - Membuat Context
• Langkah 2 - Membungkus Component dengan Provider
• Langkah 3 - Menggunakan Context dengan useContext
• Langkah 4 - Context dengan Beberapa Value
• Kesimpulan

Halo teman-teman semuanya, pada artikel sebelumnya kita sudah belajar tentang Memoization di React, yaitu optimasi performa menggunakan React.memo, useMemo, dan useCallback.

Pada artikel kali ini, kita akan membahas tentang Context API, yaitu cara berbagi data antar component tanpa harus mengoper props dari satu component ke component lainnya secara berlapis-lapis.

Apa Itu Context API?

Context API adalah fitur bawaan React yang memungkinkan kita untuk mengirim data ke banyak component tanpa harus melakukan props drilling.

Props drilling adalah kondisi ketika kita harus meneruskan props melalui banyak component yang sebenarnya tidak membutuhkannya, hanya agar component di level bawah bisa mengakses data.

Dengan Context API, kita bisa membuat sebuah context yang dapat diakses oleh component mana pun di dalam aplikasi.

Langkah 1 - Membuat Context

Untuk membuat context, kita gunakan createContext().

import { createContext } from "react";

export const UserContext = createContext();

Penjelasan:

• Kita membuat UserContext menggunakan createContext().
• Context ini nantinya akan digunakan untuk menyediakan dan mengonsumsi data.

Langkah 2 - Membungkus Component dengan Provider

Provider adalah component yang digunakan untuk membungkus bagian aplikasi yang ingin kita beri akses ke context.

import { useState } from "react";
import { UserContext } from "./UserContext";
import Profile from "./Profile";

function App() {
  const [user, setUser] = useState({ name: "Budi", age: 20 });

  return (
    <UserContext.Provider value={user}>
      <div>
        <h1>Aplikasi React Context</h1>
        <Profile />
      </div>
    </UserContext.Provider>
  );
}

export default App;

Penjelasan:

• UserContext.Provider menyediakan data user.
• Semua component di dalam Provider bisa mengakses data user.

Langkah 3 - Menggunakan Context dengan useContext

Untuk mengambil data dari context, kita gunakan useContext().

import { useContext } from "react";
import { UserContext } from "./UserContext";

function Profile() {
  const user = useContext(UserContext);

  return (
    <div>
      <h2>Profile</h2>
      <p>Nama: {user.name}</p>
      <p>Umur: {user.age}</p>
    </div>
  );
}

export default Profile;

Penjelasan:

• Kita import useContext dan UserContext.
• useContext(UserContext) memberi kita akses ke data user.
• Data tersebut bisa langsung ditampilkan di UI.

Langkah 4 - Context dengan Beberapa Value

Kita juga bisa mengirim lebih dari satu nilai melalui context, misalnya data dan fungsi untuk mengubah data.

import { useState } from "react";
import { UserContext } from "./UserContext";
import Profile from "./Profile";

function App() {
  const [user, setUser] = useState({ name: "Budi", age: 20 });

  return (
    <UserContext.Provider value={{ user, setUser }}>
      <div>
        <h1>Aplikasi React Context</h1>
        <Profile />
      </div>
    </UserContext.Provider>
  );
}

export default App;

Lalu di Profile.jsx:

import { useContext } from "react";
import { UserContext } from "./UserContext";

function Profile() {
  const { user, setUser } = useContext(UserContext);

  return (
    <div>
      <h2>Profile</h2>
      <p>Nama: {user.name}</p>
      <p>Umur: {user.age}</p>
      <button onClick={() => setUser({ ...user, age: user.age + 1 })}>
        Tambah Umur
      </button>
    </div>
  );
}

export default Profile;

Penjelasan:

• Kita kirim user dan setUser lewat Provider.
• Di Profile, kita bisa membaca sekaligus mengubah data user.

Kesimpulan

Pada artikel ini, kita sudah belajar tentang Context API, fitur bawaan React untuk berbagi data antar component tanpa harus melakukan props drilling.

Kita sudah membuat context dengan createContext, menyediakan data dengan Provider, dan mengaksesnya dengan useContext.

Di artikel berikutnya, kita akan membahas tentang Custom Hooks, yaitu bagaimana membuat hook buatan sendiri untuk menyederhanakan logika yang bisa digunakan kembali.

Terima kasih