Re-rendering behavior in React - Mini Project: Build & Apply

Understanding Re-rendering Behavior in React

📖 Scenario: You are building a simple React component that shows a counter and a button to increase it. You want to understand how React re-renders the component when the state changes.

🎯 Goal: Create a React functional component that uses useState to hold a counter value. Add a button that increases the counter when clicked. Observe how the component re-renders when the state changes.

📋 What You'll Learn

Create a React functional component named Counter

Use useState to create a state variable count initialized to 0

Add a button with an onClick handler that increases count by 1

Display the current count value inside a <p> tag

💡 Why This Matters

🌍 Real World

Understanding re-rendering helps you build efficient React apps that update the UI correctly when data changes.

💼 Career

React developers must know how state changes cause re-renders to optimize performance and avoid bugs.

1

Set up the Counter component with initial state

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

React

import React, { useState } from 'react';

// Create the Counter component and initialize count state
// Your code here

Need a hint?

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

2

Add a button to increase the count

Inside the Counter component, add a <button> element with 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
}

export default Counter;

Need a 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 a <p> tag above the button.

React

import React, { useState } from 'react';

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

  // Add a  tag to show count above the button
  // Your code here
}

export default Counter;

Need a hint?

Use a React fragment <></> to wrap multiple elements.

4

Add a console log to observe re-rendering

Inside the Counter component function body, add console.log('Counter rendered') to see when the component re-renders.

React

import React, { useState } from 'react';

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

  // Add console.log to observe re-rendering
  // Your code here

  return (
    
      Current count: {count}
       setCount(count + 1)}>Increase
    
  );
}

export default Counter;

Need a hint?

Place the console.log inside the component function but before the return statement.