Hooks
59 bites tagged Hooks — interview questions with model answers, and 60-second explainers.
Tearing and useSyncExternalStore in concurrent React
Tearing is inconsistent UI when an interruptible render reads a changed external store mid-pass; useSyncExternalStore subscribes and forces consistent snapshots, re-rendering synchronously on change. Concurrency consistency guarantees.
Unit testing a custom hook with renderHook
Render the hook, read result.current, fire actions inside act, assert updated state. knowing how to test hook logic in isolation. calling hook directly outside a component or skipping act around updates.
Fetching REST Data with Loading and Error State
Track loading, data, and error; fetch in an effect, check response.ok, parse JSON, handle catch and finally. data fetching with state. ignoring non-2xx responses or leaving loading true on error.
Debouncing a Search TextInput with Hooks
Keep input in state, in an effect set a timer that fires the search after a delay, clear the timer on each change so only the final pause triggers the call. debounce with hooks.
Shared values and useAnimatedStyle in Reanimated
UseSharedValue holds a mutable .value readable on both threads, useAnimatedStyle derives styles as a worklet, mutate .value with withTiming or withSpring. Reanimated core hooks. reading .value during render to set state.
Redux versus Zustand state management
Redux uses actions, reducers, and a Provider with structured boilerplate; Zustand offers a minimal hook-based store with no provider and selective subscriptions. judgment about state-library tradeoffs.
Accessing navigation outside a screen component
Use the useNavigation hook inside any component under NavigationContainer; for navigating outside React, use a navigationRef. getting navigation without the prop. prop-drilling navigation down manually through many layers.
Refetching data when a screen gains focus
Use useFocusEffect with a useCallback callback; refetch on focus; clean up to abort stale requests. knowing focus differs from mount. relying on useEffect with empty deps, which only fires once on mount.
Mongoose pre('save') hooks for password hashing
Pre('save') runs before persistence; use it to hash the password, guarding with isModified, calling next() or returning. lifecycle hooks on documents.
Helm migration hooks under GitOps
Use a pre-upgrade hook Job with weights and delete policy; the challenge is GitOps tools render statically and reconcile, conflicting with Helm's imperative hook lifecycle. Helm hooks plus GitOps tension. ignoring idempotency.
How would you implement a custom useDebounce hook using useState and useEffect?
It tests effect cleanup and stale closure awareness. Use useState for the debounced value, useEffect to set a setTimeout when the input changes, and return a cleanup calling clearTimeout. Omitting cleanup leaks timers and fires stale values.
How do you unit test a custom React hook like useCounter?
This tests whether you know hooks must run inside a component and that renderHook provides that scaffold. A strong answer names renderHook and act, explains result.current access, and warns against calling hooks directly.
Explain the difference between React.memo and useMemo
React.memo skips re-renders when props match; useMemo caches a computed value between renders. whether you distinguish component-level memo from value caching. saying they are interchangeable or both stop re-renders.
What is a stale closure in React hooks?
Tests closures and hook dependencies. A strong answer defines stale closure as capturing an outdated variable, shows a useEffect interval with stale state, and fixes it with dependencies and cleanup. Red flag: omitting cleanup or using refs blindly.
Compare HOCs and custom hooks for sharing logic
Tests your grasp of React's shift from wrapper-based to function-based logic reuse. Hooks eliminate wrapper hell and implicit props by extracting stateful behavior into plain functions without nesting components. Red flag: calling hooks just sugar.
Explain the difference between useMemo and useCallback
This tests whether useMemo caches values while useCallback caches functions, and why that matters for React.memo. A strong answer notes React.memo uses Object.is, so a new inline function prop triggers a child re-render. Red flag: claiming they are the same.
Use useContext to provide theme state without prop drilling
This tests global state sharing without prop drilling. A strong answer uses createContext and a Provider with useState at the app root, then calls useContext in nested components. Red flag: ignoring re-render costs or placing the Provider too deep.
Explain useReducer and when to prefer it over useState
Tests if you know useReducer centralizes complex state transitions better than scattered useState. Answer: define reducer/dispatch, then contrast with useState via interdependent fields or deep updates. Red flag: calling it only for global state or Redux.
Why is exhaustive-deps critical and when can you disable it?
This tests closure and effect timing intuition. A strong answer explains missing deps let effects read stale render values, gives a concrete override like a ref or stable callback, and warns that silencing the rule hides refactor hazards.
When would you choose useLayoutEffect over useEffect?
Use useLayoutEffect to measure or mutate DOM before paint to stop flicker; useEffect runs after paint. React commit phase and paint timing. Using it for data fetching or ignoring its blocking cost.
Why pass a function to useState for expensive initial values?
This tests your understanding of React's render-phase behavior. Without the function, expensive work reruns on every render and is thrown away; the initializer runs once only during mount.
What is the purpose of the useEffect cleanup function?
Explain cleanup prevents memory leaks by clearing timers or unsubscribing when dependencies change or on unmount. Your grasp of useEffect teardown before re-runs and unmount.
What will count be after three setCount calls in a row?
Tests React state batching and stale closures. Answer: count is 1 because all three calls read the same closed-over value of 0. Fix: pass an updater function setCount(c => c + 1) three times so React queues each update.
Explain useEffect dependency array behavior for [], [deps], and omitted
It tests reactive dependency tracking. Omitting re-runs every render; [] runs on mount with cleanup on unmount; [deps] re-runs when Object.is detects change. Red flag: claiming [] means 'run once' without mentioning cleanup or stale values.
Get Hooks bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.