Interview Q&A / React

1. For a simple contact form, would you use controlled or uncontrolled inputs?

   For a few fields that are only read on submit, uncontrolled inputs with FormData are enough and re-render less. Use controlled inputs when you need live validation, dependent fields, formatting as the user types or to disable the button.

   IntermediateQuick answer1 min read
2. How do you read a file from an input type file in React?

   File inputs are always uncontrolled. Read e.target.files in onChange, take the File object, and either upload it with FormData or preview it with URL.createObjectURL. You cannot set a file input's value from state.

   IntermediateQuick answer1 min read
3. How would you validate a React form without a library?

   Keep values and an errors object in state. Write a validate function that returns errors from the values, run it on submit (and optionally on blur), call preventDefault, and submit only when the errors object is empty.

   IntermediateQuick answer1 min read
4. How would you write a simple useFetch custom hook?

   Keep data, loading and error in state, fetch inside an effect keyed on the URL, and ignore or abort stale responses in the cleanup. Return the three values so components stay free of fetching details.

   IntermediateQuick answer1 min read
5. How would you write a useDebounce hook for a search box?

   Keep a debounced copy of the value in state. In an effect, start a setTimeout that updates the copy after a delay, and clear that timer in the cleanup so only the last change within the delay goes through.

   IntermediateQuick answer1 min read
6. What does it mean for a React component to be pure?

   A pure component returns the same JSX for the same props, state and context, and changes nothing outside itself while rendering. Purity lets React re-run, skip or repeat renders safely, including in Strict Mode.

   IntermediateQuick answer1 min read
7. What does React.memo do, and when does it fail to help?

   React.memo wraps a component so React skips re-rendering it when its props are shallowly equal to the last render. It fails when you pass new object, array or function references on every parent render.

   IntermediateQuick answer1 min read
8. What does the useFormStatus hook do in React 19?

   useFormStatus, from react-dom, reads the status of the parent form: whether it is pending, plus the submitted data. It must be called inside a component rendered within the form, which lets a submit button disable itself.

   IntermediateQuick answer1 min read
9. What is a stale closure in a React effect, and how do you fix it?

   A closure captures the values from the render where it was created. An effect with a missing dependency keeps using old values. Fix it by listing the dependency, using the updater form of setState, or storing the latest value in a ref.

   IntermediateQuick answer1 min read
10. What is lazy initialisation in useState, and when should you use it?

    Pass a function to useState, as in useState(() => compute()). React runs it only on the first render. Without the function form, the expensive call runs on every render, even though its result is ignored after the first.

    IntermediateQuick answer1 min read
11. What is state colocation, and how can it make a slow component fast without memo?

    Keep state in the lowest component that needs it. If only a small input uses a value, move that state into the input's own component, so typing no longer re-renders the heavy sibling components in the parent.

    IntermediateQuick answer1 min read
12. What is the useId hook for, and why not use Math.random for IDs?

    useId generates a stable unique ID that matches between server and client renders. It is meant for linking labels to inputs and aria attributes. Math.random changes each render and differs on the server, causing hydration mismatches.

    IntermediateQuick answer1 min read
13. When does calling a state setter cause a re-render?

    React re-renders when the new state is different from the current one, compared with Object.is. Setting the same primitive value, or the very same object reference, usually skips the render. A new object with equal contents counts as different.

    IntermediateQuick answer1 min read
14. When is useMemo actually worth using?

    Use it when a calculation is measurably slow, or when you need a stable object or array reference to pass to a memoised child or a hook dependency. Wrapping cheap calculations adds overhead and noise.

    IntermediateQuick answer1 min read
15. When would you choose useReducer over useState?

    Choose useReducer when state has several related fields, or the next state depends on complex rules and actions. It centralises update logic in one pure function, which is easier to test and reason about than many scattered setters.

    IntermediateQuick answer1 min read
16. Why does the state variable show the old value right after calling setState?

    State is a snapshot for the current render. Calling the setter only schedules the next render; the variable in the running function does not change. React also batches several updates in one event into a single render.

    IntermediateQuick answer1 min read
17. Why does useCallback often do nothing unless the child is wrapped in React.memo?

    useCallback keeps a function reference stable, but a child still re-renders whenever its parent does unless the child is wrapped in React.memo or the function is a hook dependency. The stable reference only helps where something compares it.

    IntermediateQuick answer1 min read
18. Why is copying a prop into state usually a bug?

    The initial value is read once, on the first render. Later prop changes are ignored, so the component shows stale data. Use the prop directly, derive the value during render, or reset state with a key.

    IntermediateQuick answer1 min read
19. Why must a reducer function be pure, and what breaks if it is not?

    React may call a reducer more than once with the same inputs, for example in Strict Mode. A pure reducer returns a new state from state and action only. Mutating state or running side effects inside it gives wrong or duplicated results.

    IntermediateQuick answer1 min read