Intermediate Level React Interview Questions & Answers – Set 1

Q1. What problem does the virtual DOM solve in React?

• Updating the real DOM directly is slow.
• React uses a virtual DOM (a lightweight copy of the real DOM).
• When something changes, React updates the virtual DOM first, compares it with the old one (diffing), and updates only the changed parts in the real DOM.
• This makes updates fast and efficient.

Q2. How does JSX differ from regular JavaScript?

• JSX looks like HTML but runs inside JavaScript.
• It’s a syntax extension to write UI clearly.

const element = <h1>Hello, React!</h1>;

Without JSX:

const element = React.createElement("h1", null, "Hello, React!");

Q3. Why are React components encouraged to be pure functions?

Pure functions return the same output for the same input

• Benefits in React:
  • Predictable UI rendering
  • No side effects
  • Easier to test and debug

Q4. What are controlled vs uncontrolled components, and how does two-way binding work?

Controlled: React manages form values via state (two-way binding).

function Form() {
  const [name, setName] = useState("");
  return <input value={name} onChange={(e) => setName(e.target.value)} />;
}

Uncontrolled: The DOM manages the value via ref.

function Form() {
  const inputRef = useRef();
  return <input ref={inputRef} />;
}

Q5. How do you share data between sibling components?

Lift state up to a common parent or use Context API.

function Parent() {
  const [value, setValue] = useState("Hello");
  return (
    <><ChildA value={value} />
      <ChildB setValue={setValue} />
    </>
  );
}

Q6. What is the difference between props and state?

• Props: Passed from parent to child, read-only.
• State: Managed inside the component, can be updated with useState or this.setState.

Q7. What happens if you directly mutate state instead of using setState?

React will not detect changes, so UI won’t re-render.

state.count = 5; //  wrong

Q8. What are fragments in React, and why use them?

Fragments allow returning multiple elements without extra divs.

return (
  <><h1>Title</h1>
    <p>Description</p>
  </>
);

Q9. How does conditional rendering work in React?

Render elements based on conditions.

{isLoggedIn ? <Dashboard /> : <Login />}

Q10. How is useState different from class component state?

• useState is for functional components.
• Class components use this.state and this.setState.
• Hooks make code simpler and cleaner.

Q11. What happens if you call a hook conditionally?

• It breaks the rules of hooks.
• Hooks must be called in the same order on every render.

Q12. What are rules of hooks and why must they be followed?

1. Call hooks only at the top level (not in loops/if).
2. Call hooks only inside React functions.

Q13. How is useEffect different from lifecycle methods?

useEffect combines componentDidMount, componentDidUpdate, and componentWillUnmount.

useEffect(() => {
  console.log("Mounted or updated");
  return () => console.log("Cleanup before unmount");
}, []);

Q14. When would you use useLayoutEffect instead of useEffect?

• useLayoutEffect runs before the browser paints the UI.
• Useful for measuring DOM size or position before rendering.

Q15. What is the difference between useMemo and React.memo?

• useMemo: Caches results of calculations.
• React.memo: Caches the whole component to skip re-render.

Q16. How is useCallback helpful in optimizing performance?

useCallback memoizes a function to avoid recreating it every render.

const memoizedFn = useCallback(() => doSomething(), []);

Q17. How do you reset state values using useState?

Call setState with the initial value.

setCount(0);

Q18. How does useReducer help manage complex state logic?

• useReducer is like Redux inside a component.
• Great for complex state updates or multiple state variables.

function reducer(state, action) {
  switch (action.type) {
    case "increment": return { count: state.count + 1 };
    case "decrement": return { count: state.count - 1 };
    default: return state;
  }
}
const [state, dispatch] = useReducer(reducer, { count: 0 });

Q19. What is the difference between synchronous vs asynchronous state updates in hooks?

• React batches state updates asynchronously.
• Multiple setState calls may be combined before re-render.

Q20. How do you use useRef to persist values across renders and interact with DOM elements?

Persist a value:

const countRef = useRef(0);

Focus an input element:

const inputRef = useRef();
useEffect(() => inputRef.current.focus(), []);
return <input ref={inputRef} />;

Q21. What is the use case of useImperativeHandle?

Customize what a parent component can access via a child ref.

Q22. How does useDebugValue help in custom hooks?

Displays debug info in React DevTools for custom hooks.