Updating phase in React - Mini Project: Build & Apply

React Component Updating Phase

📖 Scenario: You are building a simple React counter component that updates its displayed number when a button is clicked.This simulates a real-world situation where a user interacts with a webpage and the content changes dynamically.

🎯 Goal: Create a React functional component that shows a number starting at 0 and a button labeled 'Increase'. When the button is clicked, the number increases by 1 and the component updates to show the new number.

📋 What You'll Learn

Use React functional components

Use the useState hook to manage the counter state

Add a button that updates the state when clicked

Display the current counter value in a <div>

💡 Why This Matters

🌍 Real World

Counters are common in apps for likes, votes, quantities, or steps. Understanding how to update components on user actions is essential.

💼 Career

React developers frequently use state and event handlers to create interactive UI components that update dynamically.

1

Set up the initial counter state

Create a React functional component called Counter. Inside it, use the useState hook to create a state variable called count initialized to 0.

React

import React, { useState } from 'react';

function Counter() {
  // Create state variable count with initial value 0
  // Your code here
}

Hint

Use const [count, setCount] = useState(0); inside the Counter function.

2

Add a button to increase the counter

Inside the Counter component, add a <button> element with the text 'Increase'. Add an onClick handler that calls setCount(count + 1) to increase the count by 1.

React

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  // Add a button with onClick to increase count
  // Your code here
}

Hint

Return a button element with an onClick that calls setCount(count + 1).

3

Display the current count

Modify the Counter component to display the current count inside a <div> above the button.

React

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    
      {/* Display count here */}
      {/* Your code here */}
       setCount(count + 1)}>Increase
    
  );
}

Hint

Use a <div> to show the count value above the button.

4

Complete the component with export

Add export default Counter; at the end of the file to make the Counter component usable in other parts of the app.

React

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    
      {count}
       setCount(count + 1)}>Increase
    
  );
}
// Export the Counter component
// Your code here

Hint

Write export default Counter; at the end of the file.

Practice

1. What happens during the updating phase in a React component?

easy

A. The component is removed from the screen

B. The component is created for the first time

C. The component's styles are applied

D. The component re-renders when state or props change

Solution

1. Step 1: Understand React component lifecycle phases

   The updating phase happens after the initial render when state or props change.

2. Step 2: Identify what triggers re-rendering

   State or props changes cause React to re-render the component to update the UI.

3. Final Answer:

   The component re-renders when state or props change -> Option D

4. Quick Check:

   Updating phase = re-render on state/props change [OK]

Hint: Updating phase means re-render on state or props change [OK]

Common Mistakes:

• Confusing updating with mounting or unmounting phases
• Thinking styles apply only during updating
• Believing updating happens without state or props change

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

easy

A. this.setState({ count: count + 1 })

B. setCount(count + 1)

C. updateState(count + 1)

D. changeState({ count: count + 1 })

Solution

1. Step 1: Identify state update method in functional components

   Functional components use the setter function from useState, e.g., setCount.

2. Step 2: Check syntax correctness

   setCount(count + 1) correctly updates the state by adding 1.

3. Final Answer:

   setCount(count + 1) -> Option B

4. Quick Check:

   Use setter from useState to update state [OK]

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

Common Mistakes:

• Using this.setState in functional components
• Calling non-existent functions like updateState
• Trying to mutate state directly

3. Consider this React component snippet:

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

useEffect(() => {
  console.log('Count changed:', count);
}, [count]);

setCount(1);
setCount(2);

What will be logged to the console after these updates?

medium

A. Count changed: 1Count changed: 2

B. No output

C. Count changed: 2

D. Count changed: 0Count changed: 1Count changed: 2

Solution

1. Step 1: Understand state updates batching

   Multiple state updates in the same event batch are combined; only the last update triggers effect.

2. Step 2: Analyze useEffect dependency

   useEffect runs after render when count changes, so it logs only once with the final value 2.

3. Final Answer:

   Count changed: 2 -> Option C

4. Quick Check:

   State updates batch; effect logs last value [OK]

Hint: Multiple state updates batch; effect runs once with last value [OK]

Common Mistakes:

• Assuming useEffect runs after every setCount call immediately
• Expecting console to log intermediate values
• Not knowing React batches state updates

4. What is wrong with this React code snippet during the updating phase?

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

function increment() {
  count = count + 1;
  setCount(count);
}

medium

A. Directly modifying state variable instead of using setter

B. Missing dependency array in useEffect

C. Using setCount with a number instead of an object

D. Not returning JSX from the component

Solution

1. Step 1: Identify state mutation

   The code directly changes count variable, which is not allowed in React state management.

2. Step 2: Correct way to update state

   Use setCount(count + 1) without modifying count directly.

3. Final Answer:

   Directly modifying state variable instead of using setter -> Option A

4. Quick Check:

   Never mutate state variable directly; use setter [OK]

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

Common Mistakes:

• Trying to change state variable directly
• Confusing state variable with setter function
• Ignoring React's immutable state rule

5. You want to update a React component's state only when a prop value changes, avoiding unnecessary re-renders. Which approach correctly uses the updating phase to achieve this?

function MyComponent({ value }) {
  const [state, setState] = useState(value);

  // What should go here?
}

hard

A. useEffect(() => { setState(value); }, [value]);

B. useEffect(() => { setState(value); }, []);

C. setState(value); // directly in component body

D. useEffect(() => { setState(value); });

Solution

1. Step 1: Use useEffect to react to prop changes

   To update state only when value prop changes, use useEffect with [value] dependency.

2. Step 2: Avoid unnecessary updates

   Dependency array ensures effect runs only when value changes, preventing infinite loops or extra renders.

3. Final Answer:

   useEffect(() => { setState(value); }, [value]); -> Option A

4. Quick Check:

   useEffect with [value] updates state on prop change only [OK]

Hint: Use useEffect with dependency array for prop-based updates [OK]

Common Mistakes:

• Leaving dependency array empty causing no updates
• Calling setState directly in component body causing infinite loops
• Omitting dependency array causing effect on every render