Blog

You are currently viewing State and Props: What’s the Difference?
State and Props

State and Props: What’s the Difference?

Introduction

When building applications in React, two key concepts that every developer must understand are State and props. These two mechanisms allow React components to store, update, and share data efficiently.

However, many beginners struggle to differentiate between state and props and understand their appropriate usage. This article will provide a comprehensive comparison of state vs. props, explaining their differences, when to use each, and best practices for efficient component-based development in React.

React Props: Passing Data Between Components

What You’ll Learn in This Article:

✅ What are state and props?
✅ Key differences between state and props
✅ How to use state and props in functional and class components
✅ When to use state vs. props
✅ Best practices for using state and props effectively

By the end of this guide, you’ll have a clear understanding of when to use state or props in your React applications. 🚀

1. What is State in React?

State is a built-in feature in React that allows components to store and manage data internally. The key feature of state is that it can change over time, triggering a re-render of the component whenever it updates.

1.1 Characteristics of State:

✅ State is mutable (it can be changed using setState or useState)
✅ State is managed within the component itself
✅ When the state changes, the component re-renders
✅ Typically used to store user input, API responses, and UI behavior

1.2 Example of State in a Functional Component (Using useState)

Let’s create a counter that increases when a button is clicked.

import React, { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0); // State initialized

  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}

export default Counter;

🔍 Explanation:

  • useState(0) initializes the state with 0.
  • setCount(count + 1) updates the state, causing a re-render.
  • The UI updates automatically when state changes.

2. What are Props in React?

Props (short for properties) are a way to pass data from a parent component to a child component in React. Unlike state, props are immutable—they cannot be changed inside the component that receives them.

2.1 Characteristics of Props:

✅ Props are immutable (cannot be modified in the child component)
✅ Props are passed from parent to child
✅ Props make components reusable and dynamic
✅ Commonly used for displaying data and configuring components

2.2 Example of Props in a Functional Component

Let’s create a Greeting component that receives a name as a prop.

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

function App() {
  return <Greeting name="Ali" />;
}

export default App;

🔍 Explanation:

  • The Greeting component receives name as a prop.
  • App passes "Ali" to Greeting dynamically.
  • Greeting remains reusable because the name can be changed when calling it.

3. Key Differences Between State and Props

FeatureStateProps
DefinitionData managed inside the componentData passed from a parent component
Mutability✅ Mutable (can be updated)❌ Immutable (cannot be changed inside the child)
Who Updates It?Updated using setState or useState inside the componentUpdated by the parent component
ReusabilityComponent-specific, not reusable across componentsHelps make components reusable
Used ForStoring dynamic data like form input, API responses, etc.Passing configuration and static data
Triggers Re-render?✅ Yes, updating state re-renders the component✅ Yes, if props change, the component re-renders
ExamplesCounter, input fields, API dataUser info, button labels, display data

💡 In simple terms:

  • Use state when the component needs to change data over time.
  • Use props when passing data from a parent to make a component reusable.

4. Using State and Props Together

In real applications, state and props often work together. The parent component manages state, while the child component receives it as a prop.

Example: Parent Component Passing State as a Prop

Let’s create a Message component that receives message as a prop from the parent.

4.1 Parent Component (Managing State)

import React, { useState } from "react";
import Message from "./Message"; // Importing the child component

function App() {
  const [message, setMessage] = useState("Hello, world!");

  return (
    <div>
      <Message text={message} />
      <button onClick={() => setMessage("New Message!")}>Update Message</button>
    </div>
  );
}

export default App;

4.2 Child Component (Receiving Props)

function Message(props) {
  return <h2>{props.text}</h2>;
}

export default Message;

✅ When the button is clicked, message is updated, and the new value is passed to Message as a prop.

5. When to Use State vs. Props?

5.1 Use State When:

✔ The data changes over time (e.g., user input, counters, form fields).
✔ The component needs to update itself dynamically.
✔ You need to store API responses inside the component.

Example: Form Input Using State

function UserForm() {
  const [name, setName] = useState("");

  return (
    <div>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <p>Entered Name: {name}</p>
    </div>
  );
}

✅ The input value updates because name is stored in state.

5.2 Use Props When:

✔ The data doesn’t change inside the component.
✔ You want to make a component reusable.
✔ The component only displays data (like a card or user profile).

Example: Reusable Card Component Using Props

function UserCard(props) {
  return (
    <div className="user-card">
      <h2>{props.name}</h2>
      <p>Email: {props.email}</p>
    </div>
  );
}

function App() {
  return (
    <div>
      <UserCard name="Ali" email="ali@example.com" />
      <UserCard name="Sara" email="sara@example.com" />
    </div>
  );
}

✅ The UserCard component is reusable because different props are passed each time.

6. Best Practices for Using State and Props

✅ Keep State Minimal → Only store what’s necessary to avoid unnecessary re-renders.
✅ Use Props for Read-Only Data → If data should not change inside the component, use props instead of state.
✅ Avoid Prop Drilling → If data needs to be passed deeply, use React Context API or a state management library.
✅ Use Functional Updates for State → If the new state depends on the previous state, use functional updates:

setCount(prevCount => prevCount + 1);

✅ Keep Components Pure → Avoid modifying props inside a component.

Conclusion

In this guide, we explored the key differences between state and props in React.

✅ State is used for dynamic, component-specific data that changes over time.
✅ Props are used for passing data from parent to child and making components reusable.
✅ Both state and props work together to build flexible, maintainable React applications.

Now that you understand state vs. props, you can confidently use them in your React projects to write cleaner and more efficient code! 🚀

Tags: