Cara Mengatur React Context

Prop drilling merusak kode Anda. Anda meneruskan data melalui lima lapisan komponen yang sebenarnya tidak membutuhkannya. React Context mengatasi hal ini. Namun, sebagian besar pengaturan justru menciptakan masalah baru.

Saat Anda menggunakan "Go to Definition" pada hook context, Anda sering kali mendarat di file yang hanya berisi panggilan useContext yang sangat kecil. Logika sebenarnya berada di file yang berbeda. Anda menghabiskan waktu seharian hanya untuk mencari logika state.

Anda dapat memperbaiki hal ini dengan struktur yang lebih baik.

Ikuti pola ini:

  • Masukkan context, public hook, dan logika state ke dalam satu file.
  • Biarkan Provider sebagai shell yang tipis.
  • Gunakan aturan lint untuk melindungi logika privat Anda.

Susun file Anda seperti ini:

src/context/ • GameContext.ts (Context, public hook, dan logika state) • GameProvider.tsx (Sebuah shell tipis)

Di dalam GameContext.ts, buatlah tiga bagian:

  1. Objek context.
  2. Public hook untuk digunakan oleh komponen. Hook ini harus melempar error jika context bernilai null. Ini memastikan komponen Anda langsung gagal (fail fast) jika berada di luar provider.
  3. Private hook untuk manajemen state. Hook ini berisi panggilan useState atau useReducer Anda.

Dengan menempatkan public hook dan logika privat dalam file yang sama, "Go to Definition" akan bekerja dengan sempurna. Anda dapat langsung melompat dari komponen ke logikanya.

Ada satu risiko. Karena private hook diekspor agar Provider dapat menggunakannya, rekan tim mungkin memanggilnya di tempat yang salah. Jika mereka melakukannya, mereka akan membuat state baru yang terisolasi, alih-alih menggunakan context yang dibagikan.

Berhentilah menggunakan komentar untuk mencegah hal ini. Gunakan aturan ESLint sebagai gantinya.

Saya membuat eslint-plugin-restrict-callers untuk mengatasi masalah ini. Anda dapat menentukan fungsi mana yang diizinkan untuk memanggil hook tertentu.

Sebagai contoh, Anda dapat memberi tahu ESLint bahwa hanya GameProvider yang boleh memanggil useGameStateManagement. Jika orang lain mencoba, build akan gagal dengan pesan error yang jelas.

Ringkasan alur kerja:

  • Kelompokkan context, public hooks, dan logika privat dalam satu file.
  • Gunakan Provider hanya untuk meneruskan hasil hook ke provider value.
  • Lempar error pada public hook jika context tidak ditemukan.
  • Gunakan ESLint untuk menegakkan batasan antara public hook dan private hook.

Sumber: https://dev.to/jareddlewis/how-to-set-up-react-context-2c9h