useContext

hook ini digunakan untuk mengambil nilai ke context dari komponent. kenapa harus menggunakan useContext?

lihat gambar dibawah

misal kita memerlukan userID disetiap komponen yang kita buat dan juga userID itu hanya bisa didapatkan dengan ngehit API /user/info. cara yang paling gampang apabila salah satu component contoh AppComponent sudah integrasi dengan API dan bisa mendapatkan userID yaitu dengan copy paste code nya baik itu fungsi untuk ngefetch data nya, dan copy paste state nya. atau state yang berawal dari AppComponent itu di teruskan ke ComponentA kemudian diteruskan kembali ke komponen B yang mana komponen B pun meneruskan kembali ke komponen E. karena akan banyak code duplication, mengurangi maintainbility juga istilahnya props drilling

dengan Hook Context kita bisa mendapatkan nilai userID yang berada di AppComponent tanpa harus meneruskan userID via props.

How To

1. buat state untuk menyimpan nilai userID

  const [userID, setUserID] = useState(null)

2. buat context menggunakan createContext

export const UserContext = createContext(null)

3. bungkus komponen child dengan Context Provider

<UserContext.Provider value={userID}>
  <Child />
</UserContext.Provider>

4. Child sudah bisa menggunakan userID kapan pun dengan menggunakan useContext

const userID = useContext(UserContext)