Nggak semua aplikasi React butuh Redux/MobX atau library sejenisnya. Untuk banyak kasus kita bisa pake React Context aja.
Context punya dua bagian utama yaitu Provider
yg nyediain variabel & fungsi-fungsi global, dan Consumer
sebagai pemakainya.

Untuk bikin Provider
, pertama kita buat context pake createContext()
. Terus kita pake komponen Context.Provider
.
import React, { useState, createContext } from 'react';
import Header from './Header';
import Mailbox from './Mailbox';
import './styles.scss';
export const AppContext = createContext();
export default function App() {
// global state
const [user, setUser] = useState(null);
return (
<AppContext.Provider
value={{
user,
setUser
}}
>
<div className="App">
<Header />
<Mailbox />
</div>
</AppContext.Provider>
);
}
Kenapa objek context-nya perlu diekspor? Biar bisa dipake di komponen-komponen lain yang jadi consumer-nya.
Continue reading →