Decide Between React State vs Props In The React Components

As a beginner React developer, you’ve probably come across two fundamental concepts: react state vs props. They’re the bread and butter of building React components, but deciding when to use one or the other can be confusing. Don’t worry; you’re not alone. In this blog, we’ll break it down step by step, complete with real-world examples to make things click.

---

What Are Props and State?

In my previous article, I've explained Props by diving deeper into when to use them, let’s quickly define these concepts:

• Props (short for properties): These are inputs to a component. Think of them as the arguments you pass to a function. Props are read-only and cannot be modified by the component receiving them.
• State: This is data that a component manages itself. It’s mutable (i.e., can be changed) and is often used to track things like user input, toggles, or any dynamic data.

---

Difference between State and Props

Understanding the difference between state and props is fundamental to working with React effectively. Let’s break it down:

Feature	State	Props
Definition	Internal data managed by the component.	Data passed from a parent component.
Mutability	Mutable (can be updated within the component).	Immutable (read-only).
Ownership	Owned by the component itself.	Owned by the parent component.
Purpose	Used to manage dynamic data that changes over time.	Used to pass data and functions to child components.
Scope	Local to the component (private).	Shared between parent and child components.
Updates	Can be updated using setState or hooks like useState.	Cannot be updated by the receiving component.

Quick Example:

• State: Imagine a toggle button where clicking it switches the state between “on” and “off.” The button manages its state internally.
• Props: Think of a Greeting component that displays a user’s name. The name is passed as a prop from a parent component and doesn’t change within the Greeting component.

By understanding these differences, you can make informed decisions on when to use state or props in your React components.

A Quick Analogy: The Recipe vs. The Kitchen

Imagine you’re a chef following a recipe:

• Props are like the ingredients delivered to you. They’re pre-measured, fixed, and you can't change them once they arrive. For example, if the recipe calls for two cups of flour you can’t magically make it three.
• State is like the inventory in your kitchen. You can adjust it on the fly add more salt, remove sugar, or even replace butter with oil if you run out. You have full control over it.

---

When to Use React State vs Props

Here’s a general rule of thumb:

• Use props to pass data from a parent component to a child component.
• Use state to manage data that changes over time within a component.

---

Real-World Examples

Let’s bring this to life with a couple of practical scenarios.

1. Building a Greeting Component

Imagine you’re creating a simple Greeting component that displays a message based on the user’s name. Here’s how you might use props:

    function Greeting(props) {
      return <h1>Hello, {props.name}!</h1>;
    }

    // Usage
    <Greeting name="Alice" />

In this example, name is passed as a prop from the parent component to Greeting. Since the Greeting component doesn’t need to modify name, props are the perfect choice.

---

2. Managing a Counter

Now, let’s say you’re building a counter. Every time the user clicks a button, the counter should increment. Here’s where state comes in:

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

Here, count is part of the component’s state because its value changes as the user interacts with the button. This dynamic behavior makes state the right choice.

---

3. Combining Props and State

Sometimes, you’ll need to use both props and state. For example, let’s build a Product card that displays a product’s name (via props) and whether it’s in the user’s cart (via state):

    function Product(props) {
      const [inCart, setInCart] = useState(false);

      const toggleCartStatus = () => {
        setInCart(!inCart);
      };

      return (
        <div>
          <h2>{props.name}</h2>
          <button onClick={toggleCartStatus}>
            {inCart ? "Remove from Cart" : "Add to Cart"}
          </button>
        </div>
      );
    }

    // Usage
    <Product name="React Guidebook" />

In this example:

• The product’s name is passed via props because it comes from a parent component and doesn’t change.
• The inCart status is managed with state because it can toggle between true and false based on user actions.

---

Key Questions to Ask Yourself

When deciding between state and props, ask these questions:

1. Where does the data come from? If it comes from a parent component, use props. If the component manages it itself, use state.
2. Does the data need to change? If yes, use state. If not, props are sufficient.
3. Is the component responsible for updating the data? If yes, state is the way to go.

---

Common Mistakes and How to Avoid Them

1. Mutating Props Props are read-only. Don’t try to modify them in your child components. If you need to make changes, pass a function as a prop from the parent.
2. Overusing State Don’t put everything in state. Use props when possible to keep your components simple and predictable.
3. Not Lifting State When Needed If multiple components need access to the same state, consider moving the state up to a common parent and passing it down as props.

---

Wrapping Up

Understanding when to use state and props is crucial for building React applications effectively. Think of props as fixed data that components receive, and state as dynamic data they manage themselves.

As you continue building with React, you’ll get more comfortable recognizing which one to use. Start small, experiment, and soon enough, you’ll be handling state and props like a pro!

This Blog Originally Posted at Programmingly.dev. Understand & Learn Web by Joining our Newsletter for Web development & Design Articles