React Developer interview questions

A component should calculate the same JSX from the same props, state, and context without causing side effects during render.

• Rendering may run more than once, be paused, or be abandoned, so network calls and subscriptions do not belong in the component body.
• Event handlers perform user-triggered effects, while useEffect synchronizes with external systems after a commit.
• Local mutation of values created during the current render is fine, but mutating shared objects makes output order-dependent.

Each render sees a fixed snapshot of state, and setting state schedules a later render rather than changing that snapshot.

• An event handler keeps the state values captured by the render that created it.
• Multiple reads after setState in the same handler still return the old snapshot.
• Code that needs the next value based on the previous one should use a functional state updater.

React associates Hook state with call order, so that order must remain stable across renders.

• Calling a Hook inside a condition, loop, or nested function can shift later Hook positions.
• The exception is not based on whether a branch usually runs; every possible render must preserve the order.
• Conditional behavior belongs inside the Hook callback or in a separately rendered component.

Use a functional updater when the next state depends on the previous state.

• React passes the latest queued value to a function such as setCount(count => count + 1).
• This prevents several updates in one event from all using the same captured snapshot.
• It also reduces unnecessary dependencies when a memoized callback only needs state to calculate its replacement.

useEffect synchronizes a component with an external system after React commits the UI.

• Dependencies are every reactive value read by the effect, including props, state, and functions declared in the component.
• React compares each dependency with Object.is and reruns the effect after a commit when one changes.
• An empty array means the effect uses no reactive values, not that dependencies may be omitted for convenience.

Cleanup must undo the subscription, timer, connection, or other external work created by that effect's setup.

• React runs cleanup before rerunning an effect with changed dependencies and after unmounting.
• In development Strict Mode, an extra setup and cleanup cycle exposes code that cannot safely reconnect.
• Cleanup should use the same identifiers or handler references that setup registered.

useLayoutEffect runs after DOM updates but before the browser paints, while useEffect normally runs after paint.

• Layout effects suit DOM measurement that must immediately influence the visible layout.
• Because they block painting, excessive work in useLayoutEffect hurts responsiveness.
• Prefer useEffect unless the user would otherwise see an incorrect intermediate frame.

useMemo caches a calculation result between renders while its dependencies remain equal, but it is a performance optimization rather than a semantic guarantee.

• React computes the function during render, so it must stay pure.
• The cache can be discarded for framework reasons, so correctness cannot depend on it.
• It is useful when an expensive calculation or stable derived value measurably avoids work.

useMemo can add comparison, memory, and code complexity when the cached calculation is cheap or its dependencies change frequently.

• Memoizing a primitive calculation rarely helps because passing the primitive already has stable value equality.
• One always-new dependency invalidates the cache on every render.
• Optimization should follow profiler evidence or a clear expensive path, not be applied to every expression.

useCallback memoizes a function reference, not the result produced when that function is called.

• React returns the previous function while all dependencies remain equal by Object.is.
• Stable callback identity matters when a memoized child receives it or another Hook depends on it.
• It does not stop creation of the inline function expression itself, and it does not make the callback execution cheaper.

useMemo caches a computed value, while useCallback caches the function reference itself.

• useMemo(() => value, deps) stores the returned value.
• useCallback(fn, deps) is conceptually equivalent to useMemo(() => fn, deps).
• Both are justified by identity-sensitive consumers or expensive work and require complete dependencies.

useRef stores a stable mutable object across renders and can also point to a DOM node managed by React.

• Updating ref.current does not trigger a render because a ref is outside React's visual state flow.
• DOM refs support imperative actions such as focus, selection, and measurement.
• A ref can hold values such as timer IDs when they are needed by handlers but not by rendering.

Reading or mutating ref.current during render can make output depend on hidden mutable state and break render purity.

• React may invoke, restart, or discard renders, so render-time mutation has unreliable timing.
• Initialization behind a stable null check is a narrow accepted pattern when it always produces the same object.
• Normal ref reads and writes belong in effects or event handlers.

A value should be state when changing it must update what the user sees, and a ref when it only supports imperative or bookkeeping logic.

• State schedules rendering and participates in React's snapshot model.
• Ref updates are immediate mutations that React does not observe for rendering.
• Duplicating the same source of truth in both state and a ref creates synchronization risk.

useContext reads the value from the closest matching provider above the calling component in the rendered tree.

• Providers are resolved by tree position, not by the file where components are declared.
• A provider returned by the same component cannot affect a useContext call earlier in that component.
• Without a provider, React returns the default value passed when the context was created.

A consumer rerenders when its nearest provider receives a value that is not Object.is-equal to the previous value.

• React.memo does not block a fresh context value from reaching a consumer.
• A newly created object or function changes identity even when its contents look identical.
• Splitting unrelated data into separate contexts limits the number of consumers affected by each update.

An inline object has a new reference on every provider render, so all consumers observe a changed context value.

• Memoize the object only when its fields and callback dependencies can remain stable.
• Separating state from actions or splitting contexts can reduce update fan-out more effectively.
• Provider optimization matters most for broad contexts with many frequently rendered consumers.

useReducer centralizes state transitions when several related values change through a defined set of actions.

• A reducer receives the current state and an action and returns the next state.
• Dispatch describes what happened without exposing how every field must be updated.
• It is useful for complex local workflows, but it does not automatically make state global.

A reducer should be pure, deterministic, and return a new state when a transition changes data.

• It must not mutate the existing state because React relies on identity to observe changes.
• Side effects such as requests, timers, and logging do not belong inside the reducer.
• Unknown actions should follow an explicit policy, commonly returning current state or throwing in development.

useReducer is preferable when state fields form one transition model and many events update them together.

• It keeps valid transitions in one place and can prevent partial combinations of related updates.
• useState remains clearer for a few independent values with simple replacements.
• Reducer boilerplate is not justified only because an object has several properties.