ReactJS State | SetState, Props and State Explained for beginners

What is State in ReactJS?

In ReactJS, “state” refers to the data that determines how a component renders and behaves. Think of it as the current condition or state of your component.

Imagine you’re building a simple website with React. Let’s say you have a button component that changes its color when clicked. The color of the button is determined by its state. Initially, the button might be blue, indicating it’s in one state. When you click it, it changes to red, indicating it’s in another state.

So, in React, you use state to manage and update this kind of dynamic data within your components. It helps you keep track of changes and update the user interface accordingly.

In simple terms, “state” is just the current status or condition of a component, and it’s what makes your React app interactive and responsive.

Imagine we’re making a button. When you click it, we want it to change color from blue to red, and then back to blue again when clicked again.

import React, { useState } from 'react';

function ColorChangingButton() {
  // Define state for the color
  const [buttonColor, setButtonColor] = useState('blue');

  // Function to handle click event and change color
  const handleClick = () => {
    // If the current color is blue, change it to red; otherwise, change it back to blue
    const newColor = buttonColor === 'blue' ? 'red' : 'blue';
    setButtonColor(newColor); // Update the state with the new color
  };

  return (
    <button 
      style={{ backgroundColor: buttonColor }} // Set the button's background color based on the state
      onClick={handleClick} // Attach the handleClick function to the button's click event
    >
      Click me
    </button>
  );
}

export default ColorChangingButton;

This example demonstrates the use of state in React to make a component interactive and dynamic.

What is setState() Method?

In React, we can change the state of a component when certain things happen, like when someone clicks a button, when the server responds to a request, or when the component receives new information from its parent component.

To make these changes, we use a method called setState(). When we call setState(), React queues up all the updates we want to make to the component’s state. Then, it tells React to re-draw the component and its children with the updated state.

It’s really important to always use setState() when we want to change the state of a component. This is because setState() not only updates the state, but it also lets React know that something has changed, so React can re-render the component and show the updated information. This keeps our app running smoothly and makes sure everything stays up-to-date.

Example, let’s say we have a counter component in React. This counter displays a number, and when you click a button, it increases the number by 1. We’ll use setState() to update the counter’s state and re-render the component.

import React, { useState } from 'react';

function Counter() {
  // We create a state variable called 'count' and a function to update it (setCount)
  const [count, setCount] = useState(0); // We start the count at 0

  // Function to handle click event and increase count
  const handleIncrement = () => {
    // We use setState() to update the count by 1
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p> {/* We display the current count */}
      <button onClick={handleIncrement}>Increment</button> {/* Button to increase count */}
    </div>
  );
}

export default Counter;

So, every time you click the button, the count increases by 1, thanks to the use of setState(), which manages the state updates and re-renders the component accordingly.

What is Props?

In React, there’s this thing called “props.” Think of props as a way for components to communicate with each other by passing data around.

When we say “props,” we’re talking about “properties” – little nuggets of information that one component can send to another. It’s like passing a note from one friend to another, except instead of notes, we’re passing data.

Here’s a comparison table between state and props in ReactJS

This table outlines the key differences between state and props, helping to clarify their roles and usage within ReactJS applications.