Avoiding unnecessary renders in React - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output when using React.memo?

Consider a React functional component wrapped with React.memo. What happens when its parent re-renders but the props remain the same?

React

const Child = React.memo(({ count }) => {
  console.log('Child rendered');
  return <div>{count}</div>;
});

function Parent() {
  const [count, setCount] = React.useState(0);
  const [other, setOther] = React.useState(0);

  return (
    <>
      <Child count={count} />
      <button onClick={() => setOther(other + 1)}>Change Other</button>
    </>
  );
}

A Child component renders only once initially; subsequent Parent re-renders with unchanged props do not cause Child to re-render.

B Child component never renders because React.memo prevents all renders.

C Child component re-renders every time Parent re-renders, logging 'Child rendered' each time.

D Child component re-renders only when the 'other' state changes.

💡 Hint

React.memo skips rendering if props are shallowly equal.

React.memo compares the previous and next props. If they are the same, it skips rendering the child component. Here, 'count' does not change when 'other' changes, so Child does not re-render.

❓ state_output

intermediate

What is the console output when using useCallback incorrectly?

Given the following React component, what will be logged when clicking the 'Increment' button multiple times?

React

function Counter() {
  const [count, setCount] = React.useState(0);

  const increment = React.useCallback(() => {
    setCount(count + 1);
    console.log('Count inside increment:', count);
  }, []);

  return <button onClick={increment}>Increment</button>;
}

A Always logs 'Count inside increment: 0' regardless of clicks.

B Logs undefined because count is not initialized.

C Throws an error because count is not in dependency array.

D Logs increasing count values: 0, 1, 2, 3, ... as button is clicked.

💡 Hint

Think about how useCallback dependencies affect captured variables.

The increment function captures the initial value of 'count' (which is 0) because the dependency array is empty. It never updates, so it always logs 0 and sets count to 1 on every click.

🔧 Debug

advanced

Why does this component re-render unnecessarily?

Examine the following React component. Why does the Child component re-render every time the Parent renders, even though props seem unchanged?

React

const Child = React.memo(({ onClick }) => {
  console.log('Child rendered');
  return <button onClick={onClick}>Click me</button>;
});

function Parent() {
  const [count, setCount] = React.useState(0);

  return (
    <>
      <Child onClick={() => setCount(count + 1)} />
      <p>{count}</p>
    </>
  );
}

A Because the Child component lacks a key prop.

B Because count state changes, Child must re-render regardless of props.

C Because React.memo does not work with arrow functions.

D Because the onClick prop is a new function on every render, React.memo sees it as changed and re-renders Child.

💡 Hint

Functions defined inside components are recreated on every render.

Each render creates a new arrow function for onClick, so React.memo detects a prop change and re-renders Child. To avoid this, use useCallback to memoize the function.

📝 Syntax

advanced

Which option correctly prevents unnecessary re-renders using useMemo?

You want to memoize a computed value that depends on 'items' array. Which code snippet correctly uses useMemo to avoid recomputing unless 'items' changes?

A const total = React.useMemo(() => items.reduce((a, b) => a + b, 0), []);

B const total = React.useMemo(() => items.reduce((a, b) => a + b, 0), [items]);

C const total = React.useMemo(items.reduce((a, b) => a + b, 0), [items]);

D const total = React.useMemo(() => items.reduce((a, b) => a + b, 0));

💡 Hint

useMemo expects a function and a dependency array.

Option B correctly passes a function and dependency array. Option B never updates total after initial render. Option B passes a value instead of a function, causing error. Option B misses dependency array, so recomputes every render.

🧠 Conceptual

expert

Which technique best avoids unnecessary renders in deeply nested React components?

You have a deeply nested component tree. Which approach most effectively prevents unnecessary renders of child components when unrelated state changes in ancestors?

A Lift state up to the top and pass all state as props to every child component.

B Use React Context to pass all state and update it frequently to keep children in sync.

C Use React.memo on child components and useContext selectively with useMemo or useCallback to avoid prop changes.

D Avoid using React.memo and rely on React's default reconciliation to optimize renders.

💡 Hint

Think about combining memoization and selective context usage.

Option C combines React.memo to prevent re-renders when props don't change, and selective useContext with memoized values to avoid unnecessary updates. This is the most effective approach for deep trees.