𝗛𝗼𝘄 𝗔𝗱𝘃𝗮𝗻𝗰𝗲𝗱 𝗥𝗲𝗮𝗰𝘁 𝗗𝗲𝘃𝗲𝗹𝗼𝗽𝗲𝗿𝘀 𝗦𝗵𝗼𝘂𝗹𝗱 𝗧𝗵𝗶𝗻𝗸 𝗔𝗯𝗼𝘂𝘁 𝗛𝗼𝗼𝗸𝘀
Most developers learn hooks without understanding how React renders. This causes confusion. To master hooks, you must understand five core responsibilities:
• Remembering data • Executing side effects • Sharing data • Optimizing rendering • Controlling scheduling
State changes trigger re-renders. Every re-render recreates variables, objects, and functions. This simple fact explains why useMemo and useCallback exist.
Understanding the Hooks
State and Ordering React stores state in a linked list attached to the component Fiber. This is why you cannot call hooks inside conditions or loops. React relies on the order of calls to find the correct state.
The Batching Reality When you call setState, React schedules an update. It does not change the value immediately. This is why logging state right after setting it shows the old value. Always use the functional update pattern to avoid stale data:
- Bad: setCount(count + 1)
- Good: setCount(prev => prev + 1)
The useEffect Mental Model Stop treating useEffect like a lifecycle method. Use it to synchronize your component with external systems like APIs or WebSockets.
Important: React paints the screen before useEffect runs. This ensures your effect does not block the UI. If you need to measure the DOM before the user sees it, use useLayoutEffect.
The useRef Reality A ref is not just for DOM elements. It is a persistent mutable container. React keeps the same object reference between renders. Changing ref.current does not trigger a re-render. Use it for timers, sockets, or previous values.
The Memoization Trap useMemo is not a magic button for speed. It has an overhead cost. React must store the cache and compare dependencies.
Only use useMemo if the calculation cost is higher than the memoization cost. If you use it for simple math, you make your app slower.
Context is not State Management Context is for dependency injection. It helps you avoid prop drilling. However, when a Context value changes, every consumer re-renders. Do not put your entire global state in one provider. Split your contexts by purpose.
Corak Lanjutan
• useReducer: Gunakan ini untuk mesin keadaan yang kompleks berbanding banyak panggilan useState.
• startTransition: Gunakan ini untuk memastikan UI anda kekal responsif semasa kemas kini yang berat.
• useDeferredValue: Gunakan ini untuk melambatkan kemas kini UI yang berat semasa pengguna menaip.
Tulis kod yang bersih dengan memindahkan logik ke dalam hook tersuai. Komponen sepanjang 1200 baris sukar untuk diselenggara. Lima hook kecil yang menguruskan logik adalah mudah untuk diskalakan.
Sumber: https://dev.to/jagadeesh_008/how-advanced-react-developers-should-think-about-hooks-102l