Drills Repository
16 Drills · All Belts · custom-hooks
Chaining Two Custom Hooks with Dependent Data
Hooks are plain function calls invoked synchronously in render order, and dependent async work is sequenced 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.
useOnlineStatus Called by Two Sibling Components
Hook state is tied to a component's own render-tree position, not to the custom Hook function, so reusing a custom Hook only reuses its logic. Here, the two sibling components each call useOnlineStatus(), but React gives each one its own useState and useEffect instances, so their online-status state never merges.
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.
useFormInput Shared Across Two Components
Custom Hooks share only their reusable logic, while React gives each call site its own independent state tied to that component's position in the tree. Both components calling useFormInput get separate state, so typing into one never updates the other.
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.
Custom Hook Purity During Rendering
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.
Extracting useOnlineStatus From Component Logic
Extracting repetitive synchronization logic into a custom Hook lets components express what they need declaratively, instead of repeating imperative subscribe-and-cleanup code in every component that needs it. Calling useOnlineStatus() keeps the subscription details encapsulated, so each component can simply read isOnline and focus on its own rendering logic.
useMount as a Generic Lifecycle Wrapper
Generic lifecycle wrapper Hooks can hide the reactive dependencies an Effect actually relies on, so the Hooks linter can no longer see or warn about them. Because useMount(fn) buries its useEffect call inside another function, the linter cannot inspect fn's dependencies, letting stale closures and synchronization bugs slip through unnoticed.
useInterval With An Inline Callback Dependency
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.