𝗛𝗼𝘄 𝗔𝗱𝘃𝗮𝗻𝗰𝗲𝗱 𝗥𝗲𝗮𝗰𝘁 𝗗𝗲𝘃𝗲𝗹𝗼𝗽𝗲𝗿𝘀 𝗦𝗵𝗼𝘂𝗹𝗱 𝗧𝗵𝗶𝗻𝗸 𝗔𝗯𝗼𝘂𝘁 𝗛𝗼𝗼𝗸𝘀
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.
고급 패턴
• useReducer: 많은 useState 호출 대신 복잡한 상태 머신을 관리할 때 사용하세요.
• startTransition: 무거운 업데이트 중에도 UI의 반응성을 유지하기 위해 사용하세요.
• useDeferredValue: 사용자가 타이핑하는 동안 비용이 많이 드는 UI 업데이트를 지연시키기 위해 사용하세요.
로직을 커스텀 훅으로 분리하여 깨끗한 코드를 작성하세요. 1,200줄짜리 컴포넌트는 유지보수가 어렵지만, 로직을 담당하는 5개의 작은 훅은 확장하기 쉽습니다.
출처: https://dev.to/jagadeesh_008/how-advanced-react-developers-should-think-about-hooks-102l