State re-render behavior in React - Mini Project: Build & Apply

State Re-render Behavior in React

📖 Scenario: You are building a simple React component that tracks a counter. You want to understand how changing state causes the component to re-render and update the displayed number.

🎯 Goal: Create a React functional component called Counter that uses useState to hold a number. Add a button that increases the number by 1 when clicked. Observe how the component re-renders to show the updated number.

📋 What You'll Learn

Use React functional components with hooks

Create a state variable called count initialized to 0

Add a button that increments count by 1 when clicked

Display the current count value in a heading

Ensure the component re-renders when count changes

💡 Why This Matters

🌍 Real World

Tracking and updating values in a user interface is common in apps like counters, forms, and interactive dashboards.

💼 Career

Understanding state and re-rendering is essential for React developers to build dynamic and responsive web applications.

1

Set up the React component and initial state

Create a React functional component named 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

Remember to import useState from React and call it inside your component to create count and setCount.

2

Add a button to increment the count

Inside the Counter component, add a <button> element. Set its onClick handler to a function 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 that increments count
  // Your code here
}

Hint

Use an arrow function inside onClick to call setCount(count + 1).

3

Display the current count value

Modify the Counter component to display the current count inside an <h1> element 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 curly braces inside JSX to show the count variable.

4

Complete the component with export

Add an export default Counter; statement at the end of the file to make the 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

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

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