React: State vs Props

The distinction between state vs props is one of the most crucial and fundamental ideas to grasp when learning React. Developers use both to handle and transfer data, but each serves a different function in creating interactive user interfaces.

You are not alone if you are unsure about when to employ state vs. props; novices frequently struggle with this. To assist you grasp both ideas, we’ll go over them in-depth in this piece along with examples, comparisons, and recommended practices.

What Are Props in React?

Developers use properties, or props for short, to transfer data between parent and child components. They make components dynamic and customizable

Imagine you’re creating a button component that you can customize. Instead of hardcoding the label, you pass it in as a parameter.

Key Characteristics of Props:

• Read-only: Props cannot be modified by the component that receives them.
• Passed from parent to child: They help keep components pure and predictable.
• Stateless: The component receiving the props does not manage or modify them.

Example:

function Welcome(props) {
  return <h1>Welcome, {props.username}!</h1>;
}

function App() {
  return <Welcome username="Alex" />;
}

Here, the App component passes the username prop to the Welcome component.

Real-world Analogy:

Props are like arguments passed to a function. Just as you might call greet('Alice'), you can render <Greet name="Alice" />. The receiving component has no control over the data — it just uses what it’s given.

What Is State in React?

A component’s state is how it keeps track of data that may change over time. It enables dynamic and interactive React components and is local to the component.

State is the tool you use to manage dynamic behaviours, such as when you’re creating a counter, to-do list, or modal that opens and closes.

Key Characteristics of State:

• Mutable: State can change — often in response to user input or API calls.
• Internal to the component: State belongs to the component where it’s defined.
• Triggers re-renders: When state changes, the component re-renders to reflect the new UI.

Example:

import React, { useState } from 'react';

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

  return (
    <>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click Me</button>
    </>
  );
}

Real-world Analogy:

State is like a notebook your component carries around. It can write notes (update state) and read them later (render based on state). Unlike props, it’s not something passed in — it belongs entirely to the component.

Props vs State: A Side-by-Side Comparison

Feature	Props	State
Modifiable?	❌ No (read-only)	✅ Yes (with setState or useState)
Scope	Passed from parent	Local to component
Managed by	Parent component	Component itself
Purpose	Configuration	Dynamic data
Can trigger re-render?	✅ Yes	✅ Yes

When to Use Each

Use props when:

• You want to make a component reusable.
• You’re passing down configuration or static values.
• You want to render something based on data from a parent.

Use state when:

• Your component’s behavior changes over time.
• You need to track form inputs, toggles, modals, tabs, etc.
• You want to respond to user actions or API responses.

Best Practices

1. Keep components pure when possible

Try to use props instead of state when your component doesn’t need to manage dynamic behavior. This helps make your components more reusable and easier to test.

2. Lift state up when needed

Sometimes multiple components need access to the same piece of state. In that case, move the state to their closest common ancestor and pass it down via props.

3. Avoid unnecessary state

If a value can be derived from props or computed in the render, don’t put it in state. Keep your components lean.

A Real-Life Example: Combining State and Props in React

Here’s a practical use case showing both in action:

function UserProfile({ name }) {
  const [isFollowing, setIsFollowing] = useState(false);

  return (
    <div>
      <h2>{name}</h2>
      <button onClick={() => setIsFollowing(!isFollowing)}>
        {isFollowing ? 'Unfollow' : 'Follow'}
      </button>
    </div>
  );
}

function App() {
  return <UserProfile name="Jessica" />;
}

• name is a prop (passed from App to UserProfile).
• isFollowing is state (internal to UserProfile and changes when the button is clicked).

Conclusion

Understanding the distinction between state and props is a must if you want to build effective React applications. They are tools for different jobs:

• Props let you pass data into a component.
• State lets a component keep track of information internally.

Once you master these concepts, you’ll be equipped to build complex, interactive UIs with confidence.

For more such blogs and updates follow Front-end Competency.

Follow NashTech Blogs for more amazing blogs.