State and Props in React

When you first start learning React, two terms you’ll encounter right away are state and props. They might sound a little confusing at first, but once you understand how they work, you’ll realize they’re the backbone of every React application. In this guide, we’ll break down what state and props are, how they differ, and how you can use them effectively to build dynamic, reusable React components. Learn State and Props in React with examples to manage data flow, build dynamic components, and enhance your app’s performance easily.

What Are Props in React?

Props (short for properties) are a way of passing data from one component to another — typically from a parent component to a child component.

Think of props like arguments you pass into a JavaScript function. They allow you to make components reusable and dynamic by giving them data from the outside.

Example:

function Welcome(props) {

  return <h1>Hello, {props.name}!</h1>;

}

function App() {

  return <Welcome name="Sarah" />;

}

What’s happening here:

• • App is the parent component.
• • Welcome is the child component.
• • The name prop is passed from App to Welcome.

• When this code runs, it will display:

Hello, Sarah!

Key points about props:

• • Props are read-only.
• • They make components reusable.
• • Data flows from parent to child (one-way data binding).

What Is State in React?

While props are used to pass data into a component, state is used to store and manage data within a component.

You can think of state as a component’s personal data store — it holds information that can change over time, usually in response to user actions or network responses.

Example:

import React, { useState } from "react";

function Counter() {

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

  return (

    <div>

      <p>You clicked {count} times</p>

      <button onClick={() => setCount(count + 1)}>Click Me</button>

    </div>

  );

}

What’s happening here:

• • We’re using the React Hook useState to create a piece of state called count.
• • The initial value of count is 0.
• • When the button is clicked, we call setCount() to update the value.

Key points about state:

• • State is mutable (it can change).
• • Each time the state updates, React re-renders the component.

• State is local to the component — unless you lift it up or share it using context.

State vs Props: The Key Differences

When to Use State and When to Use Props

Use props when:

• • You need to send data or configuration to a child component.
• • The data should not be changed by the child.

Use state when:

• • Your component needs to track user interactions (like form inputs or button clicks).
• • The component’s display should change dynamically.

Example combining both:

function Greeting({ name }) {

  const [isMorning, setIsMorning] = useState(true);

  return (

    <div>

      <h2>

        Good {isMorning ? "Morning" : "Evening"}, {name}!

      </h2>

      <button onClick={() => setIsMorning(!isMorning)}>

        Change Greeting

      </button>

    </div>

  );

}

Here:

• name is a prop passed from a parent.
• isMorning is a state variable inside the Greeting component.

Common Mistakes Beginners Make

1. 1. Trying to modify props directly:
2. 2. props.name = "John"; // This won’t work!

Props are read-only.

1. 3. Not initializing state properly:
   Always set an initial value using useState().
    
2. 4. Confusing state and props:
   • • Use state for data that changes.
   • • Use props for data that’s passed down.

Final Thoughts

Understanding state and props is fundamental to mastering React.

• • Props make your components flexible and reusable.
• • State makes them interactive and dynamic.

Do visit our channel to learn More: SevenMentor

Author:-

Sagar Kshirsagar