Updating phase in React - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output after clicking the button once?

Consider this React component that updates a counter on button clicks. What will be the displayed count after clicking the button once?

React

import React, { useState } from 'react';

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

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment Twice</button>
    </div>
  );
}

export default Counter;

A Count: 1

B Count: 2

C Count: 0

D Count: NaN

💡 Hint

Remember that state updates in React are asynchronous and may be batched.

Both setCount calls use the same stale value of count (which is 0). So the state is set to 1 twice, resulting in a final count of 1, not 2.

❓ lifecycle

intermediate

Which hook runs after every update including the first render?

In React functional components, which hook runs after every render including the first render and all updates?

A useEffect with empty dependency array []

B useMemo

C useEffect with no dependency array

D useCallback

💡 Hint

Think about which hook runs after every render regardless of dependencies.

useEffect without a dependency array runs after every render, including the first and all updates.

📝 Syntax

advanced

What error does this React code produce on update?

What error will this React component produce when the button is clicked?

React

import React, { useState } from 'react';

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

  function handleClick() {
    setValue(value + 1);
    setValue(value + 1);
  }

  return (
    <div>
      <p>{value}</p>
      <button onClick={handleClick}>Update</button>
    </div>
  );
}

export default Example;

A No error, value updates to 3

B No error, value updates to 2

C Warning: Cannot update state during render

D No error, value updates to 1

💡 Hint

Consider how React batches state updates with the same value source.

Both setValue calls use the same stale value (0), so the final state is 1, not 3 or 2.

🔧 Debug

advanced

Why does this component not re-render after state update?

This React component updates state but does not re-render. Why?

React

import React, { useState } from 'react';

function NoRender() {
  const [obj, setObj] = useState({ count: 0 });

  function increment() {
    obj.count += 1;
    setObj(obj);
  }

  return (
    <div>
      <p>{obj.count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default NoRender;

A Syntax error in setObj call

B React does not detect change because the object reference is the same

C State updates asynchronously so render is delayed

D Button onClick handler is not attached

💡 Hint

Think about how React compares previous and new state values.

React uses shallow comparison for state. Since the object reference does not change, React skips re-render.

🧠 Conceptual

expert

What is the correct order of React updating phase steps?

Arrange the steps React follows during the updating phase after a state change.

A 1,3,2,4

B 1,2,3,4

C 3,1,2,4

D 2,1,3,4

💡 Hint

Think about React's render and commit phases and when effects run.

React first renders the component (1), then compares the new JSX with the old (3), then commits changes to the DOM (2), and finally runs effects (4).