Re-rendering behavior in React - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What triggers a re-render in this React component?

Consider this React functional component using useState:

import React, { useState } from 'react';

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

  console.log('Rendering with count:', count);

  return (
    <button onClick={() => setCount(count)}>Count: {count}</button>
  );
}

What happens when the button is clicked?

React

import React, { useState } from 'react';

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

  console.log('Rendering with count:', count);

  return (
    <button onClick={() => setCount(count)}>Count: {count}</button>
  );
}

A The component re-renders and logs the count again.

B The component does not re-render because the state value is unchanged.

C The component crashes with an error because setCount is called incorrectly.

D The component re-renders but the count increments by 1 automatically.

💡 Hint

Think about whether React re-renders when the state setter is called with the same value.

React skips re-rendering if the state value passed to setCount is the same as the current state. Here, setCount(count) sets the state to the existing value, so no re-render occurs.

❓ state_output

intermediate

What is the output after clicking the button twice quickly?

Look at this React component:

import React, { useState } from 'react';

function Clicker() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
    setCount(count + 1);
  }

  return (
    <button onClick={handleClick}>Clicked {count} times</button>
  );
}

What will the button display after clicking it once?

React

import React, { useState } from 'react';

function Clicker() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
    setCount(count + 1);
  }

  return (
    <button onClick={handleClick}>Clicked {count} times</button>
  );
}

A Clicked 1 times

B Clicked 2 times

C Clicked 0 times

D Clicked NaN times

💡 Hint

Remember that state updates may be batched and the count variable does not update immediately.

Both setCount(count + 1) calls use the same count value (0). React batches them, so the state updates to 1, not 2.

🔧 Debug

advanced

Why does this React component re-render infinitely?

Examine this React component:

import React, { useState, useEffect } from 'react';

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    setSeconds(seconds + 1);
  });

  return <div>Seconds: {seconds}</div>;
}

What causes the infinite re-rendering?

React

import React, { useState, useEffect } from 'react';

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    setSeconds(seconds + 1);
  });

  return <div>Seconds: {seconds}</div>;
}

A The component renders only once because useEffect has no dependencies.

B The setSeconds call is invalid inside useEffect and throws an error.

C The seconds state never changes, so no re-render occurs.

D The useEffect runs after every render and updates state, causing a loop.

💡 Hint

Think about when useEffect runs and what happens when state updates inside it.

Without a dependency array, useEffect runs after every render. Inside it, setSeconds(seconds + 1) updates state, triggering another render, causing an infinite loop.

📝 Syntax

advanced

Which option correctly prevents unnecessary re-renders using React.memo?

Given this component wrapped with React.memo:

const Display = React.memo(function Display({ value }) {
  console.log('Rendering Display');
  return <div>Value: {value}</div>;
});

Which parent component usage prevents Display from re-rendering when value does not change?

React

const Display = React.memo(function Display({ value }) {
  console.log('Rendering Display');
  return <div>Value: {value}</div>;
});

A

function Parent() {
  const val = React.useMemo(() => 5, []);
  return <Display value={val} />;
}

B

function Parent() {
  return <Display value={Math.random()} />;
}

C

function Parent() {
  const val = 5;
  return <Display value={val} />;
}

D

function Parent() {
  const val = { number: 5 };
  return <Display value={val} />;
}

💡 Hint

Consider how React.memo compares props and when new objects cause re-renders.

Option C passes a primitive constant val which does not change, so Display skips re-render. Option C passes a new random number each render. Option C passes a new object each render causing re-render. Option C uses useMemo but for a primitive, which is unnecessary but still works; however, option C is simpler and correct.

🧠 Conceptual

expert

Why does useCallback help prevent re-renders in child components?

In React, when passing functions as props, why is useCallback useful to prevent unnecessary re-renders of child components?

A Because useCallback returns a memoized function reference that stays the same unless dependencies change, preventing child re-renders.

B Because useCallback forces React to skip rendering the child component entirely.

C Because useCallback caches the function's return value and reuses it automatically.

D Because useCallback delays the function execution until the child component renders.

💡 Hint

Think about how React compares props to decide if a child should re-render.

React compares props by reference. Without useCallback, a new function is created on every render, causing child components to re-render. useCallback returns the same function reference unless dependencies change, helping React skip unnecessary re-renders.