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.

Practice

1. Which of the following causes a React component to re-render?

easy

A. When a variable inside the component function changes but state does not

B. When the component's state changes using a state setter like setState or useState setter

C. When the component's CSS styles change

D. When the browser window is resized

Solution

1. Step 1: Understand React's re-render triggers

   React re-renders a component when its state or props change, not just any variable or style change.

2. Step 2: Identify the correct trigger

   Using setState or the setter from useState updates state and triggers re-rendering.

3. Final Answer:

   When the component's state changes using a state setter like setState or useState setter -> Option B

4. Quick Check:

   State change triggers re-render = B [OK]

Hint: State or props change triggers re-rendering in React [OK]

Common Mistakes:

• Thinking local variable changes cause re-render
• Assuming style changes trigger re-render
• Believing window resize triggers component re-render

2. Which of the following is the correct way to update state and trigger a re-render in a React functional component?

easy

A. this.state.count = 5;

B. count = 5;

C. updateState(count = 5);

D. setCount(5);

Solution

1. Step 1: Recall state update syntax in functional components

   In React functional components, state is updated using the setter function returned by useState, e.g., setCount.

2. Step 2: Identify the correct syntax

   Direct assignment like this.state.count = 5 or count = 5 does not trigger re-render. Only calling setCount(5) updates state properly.

3. Final Answer:

   setCount(5); -> Option D

4. Quick Check:

   Use setter function to update state = C [OK]

Hint: Use setter from useState to update state, not direct assignment [OK]

Common Mistakes:

• Trying to assign state directly
• Using undefined functions like updateState
• Confusing class component syntax with functional

3. Consider this React functional component:

function Counter() {
  const [count, setCount] = React.useState(0);
  console.log('Render:', count);
  return (
    <button onClick={() => setCount(count + 1)}>Count: {count}</button>
  );
}

What will be logged to the console after clicking the button three times?

medium

A. Render: 0, Render: 1, Render: 2, Render: 3

B. Render: 0, Render: 1

C. Render: 3 only

D. Render: 1, Render: 2, Render: 3

Solution

1. Step 1: Understand initial render and state updates

   Initially, the component renders with count = 0 and logs 'Render: 0'. Each button click calls setCount(count + 1), updating state and causing re-render.

2. Step 2: Trace each click and render

   After first click, count becomes 1 and logs 'Render: 1'. Second click updates count to 2 and logs 'Render: 2'. Third click updates count to 3 and logs 'Render: 3'.

3. Final Answer:

   Render: 0, Render: 1, Render: 2, Render: 3 -> Option A

4. Quick Check:

   Each state update triggers render log = A [OK]

Hint: Each state update triggers a new render and console log [OK]

Common Mistakes:

• Ignoring initial render log
• Assuming only last render logs
• Thinking state updates batch without intermediate renders

4. Given this React component:

function Example() {
  const [value, setValue] = React.useState(0);
  function update() {
    value = value + 1;
  }
  return <button onClick={update}>Value: {value}</button>;
}

Why does clicking the button NOT update the displayed value?

medium

A. Because direct assignment to value does not update state or trigger re-render

B. Because the update function is not called on click

C. Because the initial state is zero and never changes

D. Because React does not allow state updates inside event handlers

Solution

1. Step 1: Identify how state updates trigger re-render

   React re-renders when state is updated via the setter function, not by direct variable assignment.

2. Step 2: Analyze the update function

   The function assigns value = value + 1 directly, which changes a local variable but does not update React state or cause re-render.

3. Final Answer:

   Because direct assignment to value does not update state or trigger re-render -> Option A

4. Quick Check:

   State must be updated via setter to re-render = A [OK]

Hint: Always use state setter to update state, not direct assignment [OK]

Common Mistakes:

• Thinking direct assignment updates state
• Assuming event handler is not called
• Believing React forbids state updates in handlers

5. You have a parent component passing a prop count to a child component. The child uses React.memo to avoid unnecessary re-renders. Which of these changes will cause the child to re-render?

hard

A. The parent re-renders but passes the same count value as before

B. A variable inside the child component function changes but state does not

C. The parent passes a new count value different from before

D. The parent changes an unrelated state but count stays the same

Solution

1. Step 1: Understand React.memo behavior

   React.memo prevents re-render if props are shallowly equal. If props change, it re-renders.

2. Step 2: Analyze each option

   A: Same count means props equal, no re-render.
   B: Local variable change does not update state or props, no re-render.
   C: Unrelated state change in parent does not affect child's props if count same.
   D: New count value means props changed, triggers re-render.

3. Final Answer:

   The parent passes a new count value different from before -> Option C

4. Quick Check:

   Prop change triggers React.memo re-render = D [OK]

Hint: React.memo re-renders only if props change shallowly [OK]

Common Mistakes:

• Thinking parent re-render always triggers child re-render
• Ignoring prop equality in React.memo
• Thinking local variable changes cause re-render