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.

Practice

1. What happens in React when you update a component's state using setState?

easy

A. React re-renders that component and its children to update the UI.

B. React reloads the entire page to reflect the changes.

C. React ignores the change unless the component is a class component.

D. React only updates the state internally without changing the UI.

Solution

1. Step 1: Understand what setState does

   Using setState tells React that the component's state has changed and it needs to update the UI.

2. Step 2: Know React's rendering behavior

   React re-renders the component where state changed and all its child components to reflect the new state.

3. Final Answer:

   React re-renders that component and its children to update the UI. -> Option A

4. Quick Check:

   State change triggers re-render = B [OK]

Hint: State change triggers re-render of component and children [OK]

Common Mistakes:

• Thinking React reloads the whole page
• Believing state changes don't affect functional components
• Assuming UI doesn't update automatically

2. Which of the following is the correct way to update state in a React functional component?

easy

A. this.state.count = 1;

B. updateState({count: 1});

C. count = 1;

D. setCount(1);

Solution

1. Step 1: Recall how state is updated in functional components

   Functional components use the useState hook, which returns a setter function like setCount.

2. Step 2: Identify the correct syntax

   Calling setCount(1) updates the state and triggers a re-render.

3. Final Answer:

   setCount(1); -> Option D

4. Quick Check:

   Use setter function from useState = D [OK]

Hint: Use the setter function from useState to update state [OK]

Common Mistakes:

• Trying to assign state directly like a variable
• Using this.state in functional components
• Using non-existent functions like updateState

3. Consider this React component code:

function Counter() {
  const [count, setCount] = React.useState(0);
  React.useEffect(() => {
    console.log('Rendered with count:', count);
  });
  return  setCount(count + 1)}>Click {count};
}

What will be logged to the console after clicking the button twice?

medium

A. 'Rendered with count: 1' then 'Rendered with count: 2'

B. 'Rendered with count: 0' only once

C. 'Rendered with count: 2' only once

D. No logs will appear

Solution

1. Step 1: Understand useEffect without dependencies

   Without a dependency array, useEffect runs after every render.

2. Step 2: Trace state changes on clicks

   Initial count is 0. Clicking once sets count to 1, triggering a render and logging 'Rendered with count: 1'. Clicking again sets count to 2, triggering another render and logging 'Rendered with count: 2'.

3. Final Answer:

   'Rendered with count: 1' then 'Rendered with count: 2' -> Option A

4. Quick Check:

   State updates cause re-render and useEffect logs each time = A [OK]

Hint: useEffect without deps runs after every render [OK]

Common Mistakes:

• Thinking useEffect runs only once
• Assuming logs show initial state only
• Ignoring that state updates cause re-renders

4. What is wrong with this React code snippet?

function Example() {
  const [value, setValue] = React.useState(0);
  function update() {
    value = value + 1;
  }
  return Increase;
}

medium

A. useState hook is used incorrectly; it needs two arguments.

B. Directly assigning to state variable does not update state or trigger re-render.

C. The function update should be async to update state.

D. The button should use onChange instead of onClick.

Solution

1. Step 1: Identify how state is updated

   State variables from useState are read-only. Direct assignment like value = value + 1 does not update React state.

2. Step 2: Understand correct state update method

   State must be updated using the setter function setValue to trigger re-render.

3. Final Answer:

   Directly assigning to state variable does not update state or trigger re-render. -> Option B

4. Quick Check:

   State updates require setter function = C [OK]

Hint: Never assign state variable directly; use setter function [OK]

Common Mistakes:

• Assigning state variable directly
• Confusing event handlers like onChange vs onClick
• Thinking useState needs two arguments

5. You have a parent component that renders a child component. The parent updates its state with setParentState. Which components re-render when the parent's state changes?

hard

A. Only the child component re-renders; the parent does not.

B. Only the parent component re-renders; the child does not.

C. Both the parent and child components re-render.

D. Neither component re-renders automatically.

Solution

1. Step 1: Understand React's re-render on state change

   When a parent component's state changes, React re-renders that parent component.

2. Step 2: Know child component rendering behavior

   Since the child is rendered inside the parent, React also re-renders the child unless memoization or other optimizations are used.

3. Final Answer:

   Both the parent and child components re-render. -> Option C

4. Quick Check:

   Parent state change re-renders parent and children = A [OK]

Hint: Parent state change re-renders parent and children by default [OK]

Common Mistakes:

• Thinking child won't re-render automatically
• Assuming only child re-renders
• Believing no re-render happens without explicit calls