𝗛𝗼𝘄 𝗔𝗱𝘃𝗮𝗻𝗰𝗲𝗱 𝗥𝗲𝗮𝗰𝘁 𝗗𝗲𝘃𝗲𝗹𝗼𝗽𝗲𝗿𝘀 𝗦𝗵𝗼𝘂𝗹𝗱 𝗧𝗵𝗶𝗻𝗸 𝗔𝗯𝗼𝘂𝘁 𝗛𝗼𝗼𝗸𝘀

Kebanyakan pengembang mempelajari hooks tanpa memahami cara React melakukan render. Hal ini menyebabkan kebingungan. Untuk menguasai hooks, Anda harus memahami lima tanggung jawab inti:

• Mengingat data • Menjalankan side effects • Berbagi data • Mengoptimalkan rendering • Mengontrol scheduling

Perubahan state memicu re-render. Setiap re-render membuat ulang variabel, objek, dan fungsi. Fakta sederhana ini menjelaskan mengapa useMemo dan useCallback ada.

Understanding the Hooks

State and Ordering React menyimpan state dalam sebuah linked list yang terhubung ke component Fiber. Inilah alasan mengapa Anda tidak dapat memanggil hooks di dalam kondisi atau loop. React mengandalkan urutan pemanggilan untuk menemukan state yang benar.

The Batching Reality Saat Anda memanggil setState, React menjadwalkan sebuah update. React tidak langsung mengubah nilainya. Inilah alasan mengapa melakukan logging state tepat setelah mengaturnya akan menampilkan nilai lama. Selalu gunakan pola functional update untuk menghindari data yang usang (stale data):

The useEffect Mental Model Berhentilah memperlakukan useEffect seperti lifecycle method. Gunakan ia untuk menyinkronkan komponen Anda dengan sistem eksternal seperti API atau WebSockets.

Penting: React melakukan paint pada layar sebelum useEffect berjalan. Hal ini memastikan effect Anda tidak memblokir UI. Jika Anda perlu mengukur DOM sebelum pengguna melihatnya, gunakan useLayoutEffect.

The useRef Reality Sebuah ref bukan hanya untuk elemen DOM. Ia adalah kontainer mutable yang persisten. React mempertahankan referensi objek yang sama di antara render. Mengubah ref.current tidak akan memicu re-render. Gunakan ia untuk timer, socket, atau nilai sebelumnya.

The Memoization Trap useMemo bukanlah tombol ajaib untuk kecepatan. Ia memiliki biaya overhead. React harus menyimpan cache dan membandingkan dependensi.

Gunakan useMemo hanya jika biaya kalkulasi lebih tinggi daripada biaya memoization. Jika Anda menggunakannya untuk perhitungan matematika sederhana, Anda justru membuat aplikasi Anda lebih lambat.

Context is not State Management Context ditujukan untuk dependency injection. Ini membantu Anda menghindari prop drilling. Namun, ketika nilai Context berubah, setiap consumer akan melakukan re-render. Jangan menaruh seluruh global state Anda dalam satu provider. Pisahkan context Anda berdasarkan tujuannya.

Pola Lanjutan • useReducer: Gunakan ini untuk state machine yang kompleks alih-alih menggunakan banyak panggilan useState. • startTransition: Gunakan ini untuk menjaga UI tetap responsif selama pembaruan yang berat. • useDeferredValue: Gunakan ini untuk menunda pembaruan UI yang berat saat pengguna sedang mengetik.

Tulis kode yang bersih dengan memindahkan logika ke dalam custom hooks. Komponen dengan 1200 baris sulit untuk dipelihara. Lima hook kecil yang mengelola logika akan lebih mudah untuk diskalakan.

Sumber: https://dev.to/jagadeesh_008/how-advanced-react-developers-should-think-about-hooks-102l