React interview preparation.
Turn your understanding into examples, reasoning, and clear trade-offs.
Explain before you reveal.
Choose a level, explore explained answers, then try a focused session.
12 questions
Props vs state: what is the difference?
Props are values a parent supplies to a component, while state is data React remembers for a component across renders. Both influence the UI, but a component should not change its received props directly. State updates request a new render so the screen can reflect the new data.
What causes a re-render? Does it always change the DOM?
Rendering means React calls components to calculate the next UI description. Committing is the later step where React applies needed changes to the host environment, such as the browser DOM. A component can render again without causing any DOM change if the calculated output is effectively the same.
What are reconciliation, Fiber and keys?
Reconciliation is how React matches elements from the previous and next render to decide what to keep, update or replace. Fiber is the internal representation that helps React organize that work. Keys supply identity among siblings, allowing React to preserve the right state as a list changes.
Controlled vs uncontrolled input?
A controlled input takes its displayed value from React state, with changes flowing through an event handler. An uncontrolled input keeps its current value in the DOM until the application reads it. Controlled inputs make coordinated validation and UI changes convenient, while uncontrolled inputs can keep simple forms less state-heavy.
Why should I use a functional state update?
A functional state update supplies a function that receives the pending previous state and returns the next state. It is useful when several updates may be queued or a callback holds an older render's value. React can apply these updater functions in order without each relying on the same captured value.
When should I use useEffect?
useEffect synchronizes a committed component with something outside React, such as a connection, timer or browser event listener. Its setup runs when relevant dependencies change, and cleanup ends the old synchronization. Effects are not the usual place to compute values already available during rendering.
Why does an effect run twice in development or loop forever?
React Strict Mode performs an extra development-only setup and cleanup cycle for effects to reveal missing cleanup. An infinite effect loop is a different issue, usually caused by updating state that keeps changing an effect dependency. Understanding the trigger helps fix the design rather than masking the behavior.
useRef vs useState?
useState stores a value that participates in the UI, while useRef stores a stable mutable container whose changes do not request rendering. A ref is useful for an imperative handle such as a DOM node or timer ID. It should not replace state for information that the screen must show when it changes.
useMemo vs useCallback?
useMemo caches a calculated value between renders until its dependencies change. useCallback preserves a function reference under the same dependency idea. They can reduce repeated work or unstable props, but memoization is an optimization rather than a correctness guarantee.
When do I use Context, useReducer or a custom hook?
Context shares a value with descendants without passing it through every intermediate component. useReducer organizes state changes through actions and a reducer, while custom hooks extract reusable stateful logic. These tools address distribution, transition structure and reuse respectively; they are not interchangeable state stores.
Local state vs Redux/Zustand vs server state?
Local state belongs to a nearby component, a client store coordinates shared UI data, and server state represents data owned by a remote service. Server-state tools manage freshness, fetching and invalidation because the browser is only keeping a cached copy. Choosing the owner first prevents duplicated and conflicting sources of truth.
How do I make a slow React page faster?
Frontend performance includes initial loading, responsiveness during interaction and the cost of updating the UI. A slow page might be waiting for JavaScript, network data, layout or expensive component calculations. Profiling tells you which category matters before you make a targeted change.
Difficulty is editorial guidance. These questions are not a ranking of interview frequency.
All React interview questions by concept
Use the filters above for a practice selection, or follow the full question directory below. Each answer includes its source and explanation; difficulty labels are editorial guidance.