What is useState?

The useState() method allows us to define a reactive variable.  useState is a way to create and manage a piece of data in a React component that can change over time. Think of it as a special type of variable that can automatically update what you see on the screen when its value changes.

1. Importing useState: First, we need to tell our program that we want to use useState by importing it from React.
2. Creating a Reactive Variable: We create a reactive variable using useState. This variable has an initial value, and we also get a function to change its value.
3. Using the Variable in Our Component: We can use count in our HTML-like code to display its value.
4. Updating the Variable: To change count, we use the setCount function.

 
1. import { useState } from 'react';
 
2. const [count, setCount] = useState(0);
 
3. <div>The counter is set to: {count}</div>
 
4. setCount(count + 1);
 

1. count is our reactive variable, starting at 0.
2. setCount is the function we use to change the value of count

//Counter.js
 
import React, { useState } from 'react';
 
function Counter() {
  // Create a sticky note for "count" with initial value 0
  const [count, setCount] = useState(0);
 
  // Function to update the sticky note (like a button click)
  function handleIncrement() {
    setCount(count + 1); // Use the updater function to change the value
  }
 
  return (
    <div>
      <p>The count is: {count}</p>
      <button onClick={handleIncrement}>Increment</button>
    </div>
  );
}
 
export default Counter;
 

In App.js we have to import the Counter.js  as given

//App.js
 
import React from 'react';
import Counter from './Counter';
// Adjust the path if Counter.js is in a different folder
 
function App() {
  return (
    <div className="App">
      <h1>My Counter App</h1>
      <Counter />
    </div>
  );
}
 
export default App;
 
 

How It Works

1. Initialization: When the Counter component is rendered, it initializes the count state variable to 0.
2. Rendering: The component displays the current count and a button.
3. Interaction: When the button is clicked, the handleIncrement function is called.
4. State Update: handleIncrement calls setCount to update the count state.
5. Re-rendering: React detects the state change and re-renders the component, updating the displayed count.

This cycle repeats every time the button is clicked, incrementing the count and re-rendering the component to reflect the new state.

Here is another example:

 
import { useState } from 'react';

function ClickCounter() {
  const [clicks, setClicks] = useState(0);

  return (
    <div>
      <p>You clicked the button {clicks} times</p>
      <button onClick={() => setClicks(clicks + 1)}>Click me</button>
    </div>
  );
}

export default ClickCounter;
 
 

Explanation:

1. useState(0): We start the click counter at 0.
2. clicks: This variable keeps track of how many times the button is clicked.
3. setClicks: This function updates the clicks variable.
4. button onClick: When the button is clicked, we increase clicks by 1.

When the button is clicked, setClicks(clicks + 1) updates the clicks variable, and React automatically updates the displayed number of clicks.

By using useState, we ensure that our component re-renders with the updated value whenever we change the state, keeping our UI in sync with the current state of the data.