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
}

Need a 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
}

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 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
    
  );
}

Need a 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

Need a hint?

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