React Developer Interview Questions

Summary

JSX is a JavaScript syntax extension that describes React elements with XML-like markup.

Longer Answer

JSX is compiled to JavaScript calls that create React elements. It lets UI structure live close to the logic that produces it, while still using JavaScript expressions for values, conditions, lists, and event handlers.

In interviews, stress that JSX is not HTML. Attributes use React naming such as className and htmlFor, expressions go inside braces, and components must return one renderable tree, often with fragments when no wrapper element is needed.

Key Points

• JSX is compiled to JavaScript calls that create React elements
• It lets UI structure live close to the logic that produces it, while still using JavaScript expressions for values, conditions, lists, and event handlers
• In interviews, stress that JSX is not HTML
• For 'Explain React concept: JSX.', the key is to explain what problem the concept solves, where it fits in React's rendering model, and what mistake causes production bugs.

In interviews, stress that JSX is not HTML. Attributes use React naming such as className and htmlFor, expressions go inside braces, and components must return one renderable tree, often with fragments when no wrapper element is needed

Comparison / Tradeoffs

In interviews, stress that JSX is not HTML. Attributes use React naming such as className and htmlFor, expressions go inside braces, and components must return one renderable tree, often with fragments when no wrapper element is needed. |

Summary

Props are read-only inputs passed from a parent component to a child component.

Longer Answer

Props let parents configure children with values, callbacks, renderable content, and options. A child should treat props as immutable during render; if it needs to change something, it calls a callback or manages its own local state initialized from props carefully.

The common pitfalls are mutating prop objects, copying props into state without a synchronization reason, and passing unstable object/function props that defeat memoization in performance-sensitive paths.

Key Points

• Props let parents configure children with values, callbacks, renderable content, and options
• A child should treat props as immutable during render; if it needs to change something, it calls a callback or manages its own local state initialized from props carefully
• The common pitfalls are mutating prop objects, copying props into state without a synchronization reason, and passing unstable object/function props that defeat memoization in performance-sensitive paths
• For 'Explain React concept: props.', the key is to explain what problem the concept solves, where it fits in React's rendering model, and what mistake causes production bugs.

The common pitfalls are mutating prop objects, copying props into state without a synchronization reason, and passing unstable object/function props that defeat memoization in performance-sensitive paths

Comparison / Tradeoffs

The common pitfalls are mutating prop objects, copying props into state without a synchronization reason, and passing unstable object/function props that defeat memoization in performance-sensitive paths. |

Summary

State is component-owned data that can change over time and cause React to re-render the UI.

Longer Answer

State should represent information that affects rendering and cannot be derived cheaply from props or other state. Updating state schedules a render; React then computes the next UI from the new state and props.

A strong answer distinguishes local UI state, shared state, server cache state, and URL state. Not every value belongs in useState; some values belong in refs, derived variables, query caches, forms, routers, or external stores.

Key Points

• State should represent information that affects rendering and cannot be derived cheaply from props or other state
• Updating state schedules a render; React then computes the next UI from the new state and props
• A strong answer distinguishes local UI state, shared state, server cache state, and URL state
• For 'Explain React concept: state.', the key is to explain what problem the concept solves, where it fits in React's rendering model, and what mistake causes production bugs.

A strong answer distinguishes local UI state, shared state, server cache state, and URL state. Not every value belongs in useState; some values belong in refs, derived variables, query caches, forms, routers, or external stores

Comparison / Tradeoffs

A strong answer distinguishes local UI state, shared state, server cache state, and URL state. Not every value belongs in useState; some values belong in refs, derived variables, query caches, forms, routers, or external stores. |

Summary

React data generally flows down from parent to child through props, while events flow up through callbacks.

Longer Answer

This model makes UI easier to reason about because a child renders from explicit inputs instead of mutating parent state directly. When a child needs a change, it calls a parent-supplied function, and the parent updates state that flows back down.

The tradeoff is that deeply nested trees can suffer from prop drilling. Solve that with composition, context, route state, colocated state, or a state library when the data truly crosses broad boundaries.

Key Points

• This model makes UI easier to reason about because a child renders from explicit inputs instead of mutating parent state directly
• When a child needs a change, it calls a parent-supplied function, and the parent updates state that flows back down
• The tradeoff is that deeply nested trees can suffer from prop drilling
• For 'Explain React concept: unidirectional data flow.', the key is to explain what problem the concept solves, where it fits in React's rendering model, and what mistake causes production bugs.

The tradeoff is that deeply nested trees can suffer from prop drilling. Solve that with composition, context, route state, colocated state, or a state library when the data truly crosses broad boundaries

Comparison / Tradeoffs

Summary

Keys give React stable identity for list items during reconciliation.

Longer Answer

When rendering arrays, React uses keys to match previous and next children so it can preserve state and update the right DOM nodes. A good key is stable, unique among siblings, and tied to the data identity, such as a database ID.

Using array indexes as keys is risky when items can be inserted, removed, sorted, or filtered because state can stick to the wrong visual row. Index keys are acceptable only for static lists that never reorder or change length.

Key Points

• When rendering arrays, React uses keys to match previous and next children so it can preserve state and update the right DOM nodes
• A good key is stable, unique among siblings, and tied to the data identity, such as a database ID
• Using array indexes as keys is risky when items can be inserted, removed, sorted, or filtered because state can stick to the wrong visual row
• For 'Explain React concept: keys in lists.', the key is to explain what problem the concept solves, where it fits in React's rendering model, and what mistake causes production bugs.

Using array indexes as keys is risky when items can be inserted, removed, sorted, or filtered because state can stick to the wrong visual row. Index keys are acceptable only for static lists that never reorder or change length

Comparison / Tradeoffs

Using array indexes as keys is risky when items can be inserted, removed, sorted, or filtered because state can stick to the wrong visual row. Index keys are acceptable only for static lists that never reorder or change length. |

Summary

A controlled input gets its value from React state, while an uncontrolled input stores its current value in the DOM.

Longer Answer

Controlled inputs use value and onChange, making React state the source of truth. Uncontrolled inputs use defaultValue/defaultChecked and refs to read values when needed.

Controlled inputs are best for validation, conditional UI, formatting, and immediate state-dependent behavior. Uncontrolled inputs can be simpler and faster for large forms when you only need values on submit or when using form libraries designed around refs.

Key Points

• Controlled inputs use value and onChange, making React state the source of truth
• Uncontrolled inputs use defaultValue/defaultChecked and refs to read values when needed
• Controlled inputs are best for validation, conditional UI, formatting, and immediate state-dependent behavior
• For 'Explain React concept: controlled vs uncontrolled inputs.', the key is to explain what problem the concept solves, where it fits in React's rendering model, and what mistake causes production bugs.

Controlled inputs are best for validation, conditional UI, formatting, and immediate state-dependent behavior. Uncontrolled inputs can be simpler and faster for large forms when you only need values on submit or when using form libraries designed around refs

Comparison / Tradeoffs

Controlled inputs are best for validation, conditional UI, formatting, and immediate state-dependent behavior. Uncontrolled inputs can be simpler and faster for large forms when you only need values on submit or when using form libraries designed around refs. |

Summary

Lifting state up means moving state to the closest common parent that needs to coordinate multiple children.

Longer Answer

If sibling components need to display or update the same value, the value should often live in their parent. The parent passes the value down and passes callbacks to update it, keeping one source of truth.

Do not lift state higher than necessary. Over-lifting makes large parts of the tree re-render and turns simple local interactions into global coordination problems.

Key Points

• If sibling components need to display or update the same value, the value should often live in their parent
• The parent passes the value down and passes callbacks to update it, keeping one source of truth
• Do not lift state higher than necessary
• For 'Explain React concept: lifting state up.', the key is to explain what problem the concept solves, where it fits in React's rendering model, and what mistake causes production bugs.

Do not lift state higher than necessary. Over-lifting makes large parts of the tree re-render and turns simple local interactions into global coordination problems

Comparison / Tradeoffs

Do not lift state higher than necessary. Over-lifting makes large parts of the tree re-render and turns simple local interactions into global coordination problems. |

Summary

useState stores local component state and provides a setter that schedules re-rendering when the value changes.

Longer Answer

Use it for simple local UI state such as form fields, toggles, selected tabs, open/closed state, and small client-side values. The setter can take a value or an updater function that receives previous state.

Use functional updates when the next value depends on the previous value. Avoid storing values that can be derived from props/state during render, and avoid using state for mutable values that do not affect rendering.

Key Points

• Use it for simple local UI state such as form fields, toggles, selected tabs, open/closed state, and small client-side values
• The setter can take a value or an updater function that receives previous state
• Use functional updates when the next value depends on the previous value
• For 'What does useState do and when should you use it?', the key is to explain what problem the concept solves, where it fits in React's rendering model, and what mistake causes production bugs.

Use functional updates when the next value depends on the previous value. Avoid storing values that can be derived from props/state during render, and avoid using state for mutable values that do not affect rendering

Comparison / Tradeoffs

Use functional updates when the next value depends on the previous value. Avoid storing values that can be derived from props/state during render, and avoid using state for mutable values that do not affect rendering. |

Summary

useEffect synchronizes a component with external systems after React commits a render.

Longer Answer

Effects are for subscriptions, timers, imperative APIs, analytics, network calls in simple apps, and other work that must happen because the component is present on screen. They run after paint by default and can return cleanup functions.

Do not use effects for ordinary data derivation or event handling. If you can compute a value during render, compute it there. If work happens because a user clicked, put it in the event handler.

Key Points

• Effects are for subscriptions, timers, imperative APIs, analytics, network calls in simple apps, and other work that must happen because the component is present on screen
• They run after paint by default and can return cleanup functions
• Do not use effects for ordinary data derivation or event handling
• For 'What does useEffect do and when should you use it?', the key is to explain what problem the concept solves, where it fits in React's rendering model, and what mistake causes production bugs.

Do not use effects for ordinary data derivation or event handling. If you can compute a value during render, compute it there. If work happens because a user clicked, put it in the event handler

Comparison / Tradeoffs

Do not use effects for ordinary data derivation or event handling. If you can compute a value during render, compute it there. If work happens because a user clicked, put it in the event handler. |

Summary

useContext reads the current value from a React context provider above the component.

Longer Answer

Context is useful for values that many components need without passing props through every level, such as theme, locale, auth session, feature flags, or dependency-like services. A provider sets the value; consumers re-render when that value changes.

Context is not automatically a high-performance global store. Large changing objects can re-render many consumers, so split contexts, memoize provider values when needed, or use external stores/selectors for frequently changing state.

Key Points

• Context is useful for values that many components need without passing props through every level, such as theme, locale, auth session, feature flags, or dependency-like services
• A provider sets the value; consumers re-render when that value changes
• Context is not automatically a high-performance global store
• For 'What does useContext do and when should you use it?', the key is to explain what problem the concept solves, where it fits in React's rendering model, and what mistake causes production bugs.

Context is not automatically a high-performance global store. Large changing objects can re-render many consumers, so split contexts, memoize provider values when needed, or use external stores/selectors for frequently changing state

Comparison / Tradeoffs

Context is not automatically a high-performance global store. Large changing objects can re-render many consumers, so split contexts, memoize provider values when needed, or use external stores/selectors for frequently changing state. |

Summary

useRef holds a mutable value that persists across renders without causing re-renders when it changes.

Longer Answer

Refs are commonly used to access DOM nodes, store timer IDs, keep previous values, hold imperative handles, or keep mutable data that event handlers need but UI does not render. The .current property can be changed freely.

Do not read or write refs during render in ways that affect output. If a value affects UI, it should usually be state. If it is purely imperative or mutable bookkeeping, a ref may be correct.

Key Points

• Refs are commonly used to access DOM nodes, store timer IDs, keep previous values, hold imperative handles, or keep mutable data that event handlers need but UI does not render
• The .current property can be changed freely
• Do not read or write refs during render in ways that affect output
• For 'What does useRef do and when should you use it?', the key is to explain what problem the concept solves, where it fits in React's rendering model, and what mistake causes production bugs.

Do not read or write refs during render in ways that affect output. If a value affects UI, it should usually be state. If it is purely imperative or mutable bookkeeping, a ref may be correct

Comparison / Tradeoffs

Do not read or write refs during render in ways that affect output. If a value affects UI, it should usually be state. If it is purely imperative or mutable bookkeeping, a ref may be correct. |

Summary

Custom hooks extract reusable stateful logic into functions that call React hooks.

Longer Answer

A custom hook is just a function whose name starts with use and that follows the Rules of Hooks. It can encapsulate subscriptions, forms, data fetching orchestration, local storage, media queries, keyboard shortcuts, or feature-specific state machines.

Use custom hooks when multiple components need the same logic or when a component is becoming hard to read. Do not extract too early if it hides important component behavior or creates a vague generic API.

Key Points

• A custom hook is just a function whose name starts with use and that follows the Rules of Hooks
• It can encapsulate subscriptions, forms, data fetching orchestration, local storage, media queries, keyboard shortcuts, or feature-specific state machines
• Use custom hooks when multiple components need the same logic or when a component is becoming hard to read
• For 'What does custom hooks do and when should you use it?', the key is to explain what problem the concept solves, where it fits in React's rendering model, and what mistake causes production bugs.

Use custom hooks when multiple components need the same logic or when a component is becoming hard to read. Do not extract too early if it hides important component behavior or creates a vague generic API

Comparison / Tradeoffs

Use custom hooks when multiple components need the same logic or when a component is becoming hard to read. Do not extract too early if it hides important component behavior or creates a vague generic API. |

Summary

The Rules of Hooks require hooks to be called at the top level of React components or custom hooks, in the same order every render.

Longer Answer

React associates hook state with call order. If a hook is called conditionally, inside a loop, after an early return, or inside an ordinary function, later renders can shift hook positions and corrupt state or throw hook-order errors.

The practical fix is to call hooks unconditionally and put conditions inside the hook body/effect or after the hooks. ESLint rules catch most violations before runtime.

Key Points

• React associates hook state with call order
• If a hook is called conditionally, inside a loop, after an early return, or inside an ordinary function, later renders can shift hook positions and corrupt state or throw hook-order errors
• The practical fix is to call hooks unconditionally and put conditions inside the hook body/effect or after the hooks
• For 'What does rules of hooks do and when should you use it?', the key is to explain what problem the concept solves, where it fits in React's rendering model, and what mistake causes production bugs.

The practical fix is to call hooks unconditionally and put conditions inside the hook body/effect or after the hooks. ESLint rules catch most violations before runtime

Comparison / Tradeoffs

The practical fix is to call hooks unconditionally and put conditions inside the hook body/effect or after the hooks. ESLint rules catch most violations before runtime. |

Summary

React 19 introduced Actions (async transitions for mutations) with useActionState, useFormStatus and useOptimistic; the use() API for reading promises and context; ref as a regular prop (no forwardRef needed); native document metadata (<title>, <meta>) and stylesheet/script support; resource preloading APIs; and stable Server Components and Server Actions.

Longer Answer

It also improved hydration error messages, allowed <Context> as a provider, supports cleanup functions returned from ref callbacks, and removed legacy APIs (string refs, propTypes checks, defaultProps on function components, legacy context). React 19.2 added <Activity> and useEffectEvent. The React Compiler (separately released) automates memoization.

Key Points

• Actions + useActionState/useFormStatus/useOptimistic
• use() for promises and context
• ref as a prop
• Document metadata and resource preloading
• Removed legacy APIs

Summary

Reconciliation is React's process for comparing the previous and next element trees and deciding what UI updates are needed.

Longer Answer

React uses element type and key to decide whether to update, preserve, or remount parts of the tree. If the type changes, React remounts that subtree. If the type and key match, React updates props and preserves state.

This is why keys, component identity, and stable tree structure matter. Accidentally defining components inside render or changing keys can reset state and cause extra work.

Key Points

• React uses element type and key to decide whether to update, preserve, or remount parts of the tree
• If the type changes, React remounts that subtree
• If the type and key match, React updates props and preserves state
• For 'Explain React concept: reconciliation.', the key is to explain what problem the concept solves, where it fits in React's rendering model, and what mistake causes production bugs.

This is why keys, component identity, and stable tree structure matter. Accidentally defining components inside render or changing keys can reset state and cause extra work

Comparison / Tradeoffs

This is why keys, component identity, and stable tree structure matter. Accidentally defining components inside render or changing keys can reset state and cause extra work. |

Summary

useMemo caches the result of a pure calculation between renders while its dependencies stay the same.

Longer Answer

Use it for expensive calculations, stable derived objects passed to memoized children, or dependency values that should not change identity unless inputs change. It runs during render, so the function must be pure.

Do not use useMemo everywhere. It is a performance optimization, not a semantic guarantee, and the dependency list must include every reactive value used by the calculation.

Key Points

• Use it for expensive calculations, stable derived objects passed to memoized children, or dependency values that should not change identity unless inputs change
• It runs during render, so the function must be pure
• Do not use useMemo everywhere
• For 'What does useMemo do and when should you use it?', the key is to explain what problem the concept solves, where it fits in React's rendering model, and what mistake causes production bugs.

Do not use useMemo everywhere. It is a performance optimization, not a semantic guarantee, and the dependency list must include every reactive value used by the calculation

Comparison / Tradeoffs

Do not use useMemo everywhere. It is a performance optimization, not a semantic guarantee, and the dependency list must include every reactive value used by the calculation. |

Summary

useCallback caches a function identity between renders while its dependencies stay the same.

Longer Answer

It is mostly useful when passing callbacks to memoized children, using a callback in another hook dependency list, or avoiding resubscription to imperative APIs. It does not make the function itself faster; it only stabilizes the reference.

Use it when identity stability matters and you have measured or understand the consumer. Avoid wrapping every event handler by default, especially in codebases using React Compiler patterns.

Key Points

• It is mostly useful when passing callbacks to memoized children, using a callback in another hook dependency list, or avoiding resubscription to imperative APIs
• It does not make the function itself faster; it only stabilizes the reference
• Use it when identity stability matters and you have measured or understand the consumer
• For 'What does useCallback do and when should you use it?', the key is to explain what problem the concept solves, where it fits in React's rendering model, and what mistake causes production bugs.

Use it when identity stability matters and you have measured or understand the consumer. Avoid wrapping every event handler by default, especially in codebases using React Compiler patterns

Comparison / Tradeoffs

Use it when identity stability matters and you have measured or understand the consumer. Avoid wrapping every event handler by default, especially in codebases using React Compiler patterns. |

Summary

React.memo memoizes a component render result so React can skip re-rendering when props are equal.

Longer Answer

By default it does a shallow comparison of props. It helps when a component is expensive to render and receives stable props, especially inside large lists or trees. It does not prevent renders caused by the component's own state or context changes.

Use React.memo after profiling or when the cost model is obvious. It can be defeated by passing new object/function props every render, and custom comparison functions can become slower or incorrect.

Key Points

• By default it does a shallow comparison of props
• It helps when a component is expensive to render and receives stable props, especially inside large lists or trees
• It does not prevent renders caused by the component's own state or context changes
• For 'React performance: React.memo?', the key is to explain what problem the concept solves, where it fits in React's rendering model, and what mistake causes production bugs.

Use React.memo after profiling or when the cost model is obvious. It can be defeated by passing new object/function props every render, and custom comparison functions can become slower or incorrect

Comparison / Tradeoffs

Use React.memo after profiling or when the cost model is obvious. It can be defeated by passing new object/function props every render, and custom comparison functions can become slower or incorrect. |

Summary

Concurrent rendering lets React prepare multiple versions of the UI and interrupt, pause or abandon rendering work, so urgent updates (typing, clicks) aren't blocked by expensive, non-urgent renders (filtering a large list, route transitions).

Longer Answer

It's enabled by createRoot and opt-in features: startTransition/useTransition, useDeferredValue and Suspense. Rendering must be pure because React may render components multiple times or discard results.

Key Points

• Interruptible rendering
• Urgent vs transition updates
• Enabled via createRoot + transitions/Suspense
• Requires pure renders

Summary

Effects run after render (waterfalls), don't cache or dedupe, re-run in Strict Mode development, and can set state from stale responses when inputs change quickly (e.g., typing a search). Abort previous requests with AbortController or ignore outdated results with a cleanup flag.

Longer Answer

Prefer framework data loading (RSC, loaders) or TanStack Query/SWR, which handle caching, deduplication, retries and cancellation. If you must fetch in effects, always clean up.

Code Example

useEffect(() => {
  const controller = new AbortController();
  fetch(`/api/search?q=${encodeURIComponent(query)}`, { signal: controller.signal })
    .then((r) => r.json())
    .then(setResults)
    .catch((err) => { if (err.name !== "AbortError") setError(err); });
  return () => controller.abort();
}, [query]);

Key Points

• No caching/dedupe; render waterfalls
• Race conditions with fast-changing inputs
• Abort or ignore stale responses
• Prefer query libraries or framework loaders

Summary

React decides whether to re-render by comparing references (Object.is). Mutating an object or array in place keeps the same reference, so React may skip updates and memoized components show stale data. Create new objects/arrays with spread, map, filter or structuredClone, or use Immer.

Longer Answer

Use functional updates (setItems(prev => ...)) when the new state depends on the previous one, especially with batching. Immer's produce lets you write 'mutating' code that produces immutable updates.

Code Example

setTodos((prev) => prev.map((t) => (t.id === id ? { ...t, done: !t.done } : t)));

setUser((prev) => ({ ...prev, address: { ...prev.address, city: "Berlin" } }));

Key Points

• Reference equality drives re-renders
• Spread/map/filter for new copies
• Functional updates for prev-dependent state
• Immer for deep updates

Summary

You don't need effects to derive data from props/state (compute during render), to handle user events (do it in event handlers), to reset state on prop change (use key), to chain state updates, or to notify parents (call callbacks in handlers).

Longer Answer

Effects are for synchronizing with external systems (subscriptions, network, DOM APIs). Unnecessary effects cause extra renders and bugs.

Key Points

• Derive during render
• Use event handlers for events
• key to reset state
• Effects only for external sync