Drills Repository
16 Drills · All Belts · custom-hooks
useEffect dependency on event handlers
Inline functions create a new reference on every render, and useEffect's dependency comparison relies on reference equality. React therefore sees the callback as changed and re-runs the Effect, causing unnecessary reconnects.
Passing reactive values between Hooks
Custom Hooks re-run their internal logic whenever the parent component re-renders, since Hooks are part of the component's render flow rather than detached modules. Because the latest serverUrl is passed into the Hook on every render, its internal Effect receives the updated value and re-runs due to the changed dependency.
Extracting Effects into custom Hooks
Extracting repetitive Effect logic into a focused custom Hook clarifies the reactive contract of input in, synchronized data out. It also centralizes dependency management, reducing the chance of inconsistent Effect dependencies across multiple components.
Custom Hooks and render purity
Custom Hooks execute as part of the component render process, so their logic must remain pure and deterministic just like a component body. Side effects belong inside Effects, never directly in the render path.
Custom Hooks share logic, not state
Every Hook call is tied to the component instance currently rendering. A custom Hook is just a function that reuses Hook logic, not a shared state container. React stores Hook state per component render tree position, so two components calling the same custom Hook still get independent useState and useEffect instances.
Custom Hooks share logic not state
Custom Hooks only share reusable logic. Every component calling a Hook gets its own independent Hook state tied to that component's render position. React does not create global shared state just because the Hook implementation is reused.
Custom Hook boundaries by purpose
React recommends Hooks focused on concrete high-level use cases. Purpose-specific Hooks like useChatRoom constrain behavior and make calling code more declarative, while overly abstract lifecycle wrappers often obscure dependencies and intent.
Hooks rerun with component renders
Custom Hooks execute as part of the component render process. Since components may re-render frequently and unpredictably, Hook code must stay pure and deterministic, with side effects moved into Effects instead.
Declarative extraction advantage
Custom Hooks let components express intent declaratively (useOnlineStatus()) without repeating low-level subscription logic everywhere. The synchronization details stay encapsulated while components focus on rendering behavior.
You Cannot Await One Custom Hook Inside Another Hook
Hooks are plain function calls invoked synchronously in render order, and the only way to sequence dependent async work is through state produced by one render triggering an effect on a later render. usePosts receives profile as an argument, and its own useEffect re-fires whenever that value changes across renders - achieving the dependency chain without ever awaiting a hook call directly.
useInterval stale callback reset
Inline callbacks receive a new reference on every render, so React tears down and recreates an interval each time such a callback is used as a dependency. If renders occur frequently enough, the timer can reset before completing its delay period.
Resetting interval from unstable callback
Inline callbacks create a new reference on every render, and because the Effect depends on onTick, React repeatedly tears down and recreates the interval. This can reset the timer before its delay fully elapses, preventing the expected behavior.