React's useContexthook adalah alat yang ampuh untuk berbagi status antar komponen tanpa harus meneruskan data melalui rangkaian props yang panjang. Dengan useContext, Anda dapat dengan mudah berbagi status di seluruh pohon komponen, menjadikannya alat yang berguna untuk mengelola status global.

Pada artikel ini, kita akan menjelajahi dasar-dasar hook useContextdan melihat bagaimana kita dapat menggunakannya untuk mengelola status dalam aplikasi React kita.

Apa itu useContext?

useContextadalah hook React bawaan yang memungkinkan Anda menggunakan data dari konteks yang telah dibuat oleh komponen induk. Konteks adalah objek yang menyimpan beberapa data status bersama yang dapat diakses oleh komponen apa pun yang merupakan turunan dari komponen yang membuat konteks.

Pengait useContextmengambil objek konteks sebagai argumennya dan mengembalikan nilai konteks saat ini. Ini berarti bahwa setiap pembaruan pada konteks akan secara otomatis memicu perenderan ulang semua komponen yang menggunakannya.

Bagaimana cara menggunakan useContext?

Untuk menggunakan useContext, pertama-tama kita perlu membuat objek konteks. Kita bisa melakukan ini dengan menggunakan createContextmetode dari Reactperpustakaan. Berikut contohnya:

import React from 'react';

const MyContext = React.createContext();

import React from 'react';

const MyContext = React.createContext();

function App() {
  const [count, setCount] = React.useState(0);

  return (
    <MyContext.Provider value={{ count, setCount }}>
      <div>
        <h1>Count: {count}</h1>
        <Counter />
      </div>
    </MyContext.Provider>
  );
}

function Counter() {
  const { count, setCount } = React.useContext(MyContext);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

Komponen Appmembungkus komponen turunannya di dalam MyContext.Providerkomponen dan meneruskan nilai saat ini dari status bersama sebagai valuepenyangga. Dalam hal ini, nilainya adalah objek yang berisi countstatus dan setCountfungsi.

Komponen Countermengkonsumsi MyContextobjek menggunakan useContexthook dan mengekstrak countstatus dan setCountfungsi dari objek konteks. Kami kemudian menggunakan incrementfungsi untuk memperbarui status bersama saat tombol diklik.

Kapan harus digunakan useContext?

useContextpaling berguna untuk mengelola keadaan global yang perlu diakses oleh banyak komponen di seluruh aplikasi. Ini adalah pilihan yang baik untuk kasus-kasus di mana pengeboran prop akan menjadi rumit atau di mana Anda ingin menghindari status melewati beberapa lapisan komponen.

useContextjuga merupakan pilihan yang baik untuk kasus di mana Anda perlu meneruskan fungsi melalui pohon komponen. Dengan meneruskan fungsi melalui objek konteks, Anda dapat menghindari keharusan meneruskannya melalui beberapa lapisan komponen.

Kesimpulan

Pengait useContextadalah alat yang ampuh untuk mengelola keadaan global.

Saya harap banyak yang menjelaskan kepada Anda semua.