ReactJS State

Understanding state is crucial in React, as it allows components to manage and respond to dynamic data.

What is State?

State is a built-in object in React that allows components to create and manage their own data. Unlike props, which are read-only and passed down from parent to child components, state is local to the component and can be updated by the component itself.

When a component’s state changes, React re-renders the component to reflect the updated state, ensuring the UI is always in sync with the underlying data.

Example of State in a Functional Component

Let’s create a simple counter application to illustrate how state works. This example uses the useState hook, which is the primary way to add state to functional components.

Set up your project: First, make sure you have a React project set up. If you don’t have one, you can create one using Create React App:

npx create-react-app my-counter-app
cd my-counter-app

Edit App.js: Open the App.js file in your project and replace its content with the following code:

import React, { useState } from 'react';

function App() {
  // Declare a state variable named "count" and a function "setCount" to update it.
  const [count, setCount] = useState(0);

  // Function to handle incrementing the count
  const increment = () => {
    setCount(count + 1);
  };

  // Function to handle decrementing the count
  const decrement = () => {
    setCount(count - 1);
  };

  return (
    <div>
      <h1>Simple Counter</h1>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
}

export default App;

Explanation

Importing useState:

import React, { useState } from 'react';

The useState hook is imported from React. This hook allows you to add state to functional components.

Declaring State:

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

Here, count is the state variable, and setCount is the function used to update the state. The argument 0 passed to useState initializes count to 0.

Increment Function:

const increment = () => {
  setCount(count + 1);
};

This function increments the count state by 1 whenever it is called.

Decrement Function:

const decrement = () => {
  setCount(count - 1);
};

This function decrements the count state by 1 whenever it is called.

Rendering the Component:

return (
  <div>
    <h1>Simple Counter</h1>
    <p>Count: {count}</p>
    <button onClick={increment}>Increment</button>
    <button onClick={decrement}>Decrement</button>
  </div>
);

The component renders a heading, the current count, and two buttons. The buttons have onClick event handlers that call the increment and decrement functions, updating the state and causing the component to re-render with the new count.

Running the App

Save the App.js file and run your project:

npm start

Open your browser to http://localhost:3000, and you should see your simple counter application. Click the “Increment” and “Decrement” buttons to see the state update in real time.