State re-render behavior in React - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when state is updated with the same value?

Consider this React component:

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

What happens when the button is clicked?

React

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

A The component does not re-render because the state value did not change.

B The component re-renders only if a second argument is passed to setCount.

C The component throws an error because setting the same state is invalid.

D The component re-renders even though the state value is the same.

💡 Hint

React compares the new state value with the previous one before re-rendering.

React skips re-rendering if the new state value is strictly equal to the previous one.

❓ state_output

intermediate

What is the output after multiple state updates?

Given this React component:

function Example() {
  const [value, setValue] = React.useState(0);

  React.useEffect(() => {
    setValue(value + 1);
    setValue(value + 2);
  }, []);

  return <div>Value: {value}</div>;
}

What will be displayed after the component mounts?

React

function Example() {
  const [value, setValue] = React.useState(0);

  React.useEffect(() => {
    setValue(value + 1);
    setValue(value + 2);
  }, []);

  return <div>Value: {value}</div>;
}

A Value: 0

B Value: 2

C Value: 3

D Value: 1

💡 Hint

State updates inside the same event are batched and the last update wins.

Both updates use the initial value 0. The last call sets value to 2, so the final state is 2.

❓ lifecycle

advanced

When does a React component re-render due to state changes?

Which of these scenarios will cause a React functional component to re-render?

A Changing a variable declared outside the component function.

B Calling setState with the same primitive value as current state.

C Updating a ref value using useRef without calling setState.

D Calling setState with a new object reference, even if contents are the same.

💡 Hint

React re-renders when state changes to a new value by reference or primitive comparison.

React re-renders when setState is called with a new value that differs by reference or primitive equality. Same primitive values do not trigger re-render. Updating refs or external variables does not trigger re-render.

📝 Syntax

advanced

Which code correctly updates state based on previous state?

Which of these React state updates correctly increments a counter based on previous state?

A setCount(prevCount => prevCount + 1);

B setCount(() => count + 1);

C setCount(count + 1);

D setCount(count++);

💡 Hint

When updating state based on previous state, use a function argument.

Option A uses the functional form of setState, which safely updates based on the latest state. Option A may cause stale updates. Option A ignores previous state argument. Option A uses invalid syntax and mutates state.

🔧 Debug

expert

Why does this React component re-render infinitely?

Examine this React component:

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

  React.useEffect(() => {
    setCount(count + 1);
  }, [count]);

  return <div>Count: {count}</div>;
}

Why does it keep re-rendering?

React

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

  React.useEffect(() => {
    setCount(count + 1);
  }, [count]);

  return <div>Count: {count}</div>;
}

A Because useEffect has no dependency array, so it runs on every render.

B Because count is mutated directly causing infinite loop.

C Because setCount inside useEffect updates count, triggering useEffect again endlessly.

D Because React does not allow state updates inside useEffect.

💡 Hint

Check what triggers the useEffect and what it does inside.

The useEffect depends on count and updates count inside it. Each update triggers a re-render and runs useEffect again, causing an infinite loop.