Blog

What Is Props vs State in React and How Does Data Flow?

React props vs state differ in purpose: Props pass data from parent to child components, while State manages data within a component. Props are immutable, whereas State is mutable and controlled by the component itself.

Understanding how data flows in React is crucial for writing clean, maintainable code. Beginners often confuse props and state, leading to bugs or poor design. With React powering apps for companies like Facebook, Netflix, and Airbnb, mastering this concept is a must.

Key Takeaways

  • Props → Read-only, passed from parent, immutable.
  • State → Internal, managed by the component, mutable.
  • Props = Input | State = Internal memory.
  • Props control communication | State controls behavior.

What are Props in React?

Props (short for properties) are used to pass data from a parent component to a child component in React. They are read-only and cannot be modified by the child component. Props make your components reusable and dynamic.

Example Code:

// Parent Component
function App() {
  return <Welcome name="Alexa" />;
}

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

export default App;

Output:

Hello, Alexa!

Here, name="Alexa" is passed as a prop from App to Welcome. The child component cannot change it.

What is State in React?

State is used to manage data within a component. Unlike props, state is mutable and can change during the lifecycle of a component. This makes state useful for handling user interactions, form inputs, or toggling UI elements.

Example Code:

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

export default Counter;

Output:

You clicked 0 times

(Every button click increases the counter.)

Here, count is managed internally by the component using useState.

What is the Difference Between Props and State in React – How Does Data Flow

How Does Data Flow with Props vs State?

  • Props → Parent to Child
    Props enable one-way data flow from parent to child. This ensures predictable behavior since children cannot modify parent data directly.
  • State → Internal Updates
    State is local to a component. It updates when an event occurs (like user input, API response, or button click), and React automatically re-renders the component to reflect the changes.

Visualization:

Parent Component ----(props)----> Child Component
Component ----(state updates)----> Re-render UI

When to Use Props vs When to Use State?

When should I use props in React?

Use props when you need to pass data from a parent to a child and don’t want that data to change inside the child. Props are ideal for static, read-only values like titles, labels, or configurations.

Example:

function Product(props) {
  return <h2>{props.name} - ${props.price}</h2>;
}

function App() {
  return <Product name="Laptop" price={999} />;
}

export default App;

Output:

Laptop - $999

Here, the product name and price are fixed inputs passed as props.

When should I use state in React?

Use state when the data needs to change over time due to user actions, API calls, or other events. State is ideal for dynamic behavior like counters, form inputs, or toggling UI themes.

Example:

import { useState } from "react";

function ToggleTheme() {
  const [darkMode, setDarkMode] = useState(false);

  return (
    <div style={{ background: darkMode ? "black" : "white", color: darkMode ? "white" : "black" }}>
      <p>{darkMode ? "Dark Mode" : "Light Mode"}</p>
      <button onClick={() => setDarkMode(!darkMode)}>
        Toggle Theme
      </button>
    </div>
  );
}

export default ToggleTheme;

Clicking the button changes the theme dynamically because state handles updates.

Can I use props and state together?

Yes ✅ Many components use props for input and state for internal changes. For example, an e-commerce cart might get product details via props but track quantity in state.

Example:

function CartItem({ name, price }) {
  const [quantity, setQuantity] = useState(1);

  return (
    <div>
      <h3>{name} - ${price}</h3>
      <p>Quantity: {quantity}</p>
      <button onClick={() => setQuantity(quantity + 1)}>Add One</button>
    </div>
  );
}

function App() {
  return <CartItem name="Headphones" price={199} />;
}

export default App;
  • Props → name & price (fixed by parent).
  • State → quantity (updated internally).

What happens if I use state instead of props?

If you use state for everything, the parent-child data flow breaks, and components can become isolated. Props are meant to ensure reusability and communication, while state ensures local dynamic behavior. Always use props for external input and state for internal management.

React props vs state: Practical Value

Big tech companies rely heavily on React’s props and state to build dynamic, scalable applications.

  • Facebook → Uses State to handle live notifications and real-time updates. When a new notification arrives, the state of the notification component changes, and React re-renders the UI instantly.
  • Netflix → Uses Props to pass movie details between UI components like posters, descriptions, and trailers. These values don’t change in the child component, making props the ideal choice.

Example 1: Passing Props to Display User Details

This demonstrates how Netflix-like apps might pass props between components.

// Parent Component
function App() {
  return (
    <UserProfile name="Romi" age={68} location="India" />
  );
}

// Child Component
function UserProfile(props) {
  return (
    <div>
      <h2>{props.name}</h2>
      <p>Age: {props.age}</p>
      <p>Location: {props.location}</p>
    </div>
  );
}

export default App;

Output:

Romi
Age: 68
Location: India

Just like Netflix passing a movie’s title, release year, and genre as props, here user details are passed from parent to child.

Example 2: Using State to Toggle Dark/Light Theme

This demonstrates how Facebook-like apps manage dynamic behavior (such as switching modes or updating feeds).

import { useState } from "react";

function ThemeSwitcher() {
  const [darkMode, setDarkMode] = useState(false);

  return (
    <div style={{
      background: darkMode ? "black" : "white",
      color: darkMode ? "white" : "black",
      padding: "20px"
    }}>
      <h2>{darkMode ? "Dark Mode" : "Light Mode"}</h2>
      <button onClick={() => setDarkMode(!darkMode)}>
        Toggle Theme
      </button>
    </div>
  );
}

export default ThemeSwitcher;

Output:

  • Starts in Light Mode.
  • Clicking the button switches between Dark Mode and Light Mode dynamically.

Just like Facebook updates state when new data arrives (notifications, messages, likes), this component re-renders when state changes.

Comparison of Props vs State in React

FeaturePropsState
MutabilityImmutableMutable
UsagePass data parent → childManage internal changes
ControlControlled by parentControlled by component itself
ExamplePassing usernameTracking form input value

Questions about React props vs state

5 frequently asked questions about React Props vs State – How Data Flow Works in React:

1. Can props be updated inside a child component?
Most competitors just say “props are read-only.” But they miss explaining why you can’t change them. Props are controlled by the parent component, so updating them inside a child breaks the one-way data flow and React’s predictable rendering. To update data, you need to lift state up to the parent or use a callback function passed via props.

2. When should I use state instead of props for a value?
Competitors often say “use state for internal data.” What they miss is the practical distinction:

  • Use state for values that change over time inside the component (like form inputs, toggle states, or counters).
  • Use props when a parent component controls the value, even if it changes, to maintain a single source of truth.

3. Does changing state always trigger a re-render?
Many articles say “yes” without exceptions. But React actually batches updates for performance and only re-renders if the state value truly changes (shallow comparison for objects and arrays). Simply calling setState with the same value won’t re-render the component. Competitors often overlook this subtle but important performance detail.

4. How does React handle props vs state in functional components?
Competitors often explain class components only. In functional components, props are parameters of the function, and state is managed via useState hook. The key insight missed is that hooks preserve state between renders while props just reflect the latest parent value—this is why functional components can remain pure and predictable.

5. Can props affect state initialization?
Most tutorials ignore this. You can use props to initialize state (e.g., const [value, setValue] = useState(props.initialValue)), but it’s a one-time snapshot. Subsequent changes to props won’t automatically update the state. Competitors often fail to warn beginners that this can lead to stale state if not handled properly with useEffect.

Understanding the difference between props vs state in React is essential for building interactive, scalable applications. Use props for data input from parents and state for internal updates.

👉 Keep learning with our programming resources on Newtum.
📥 Download our free React Cheat Sheet PDF to speed up your coding journey!

About The Author

Rasika Deshpande

Rasika Deshpande, a passionate writer with over 4 years of experience in the EdTech industry. At Newtum, she writes, edit, and compile engaging blog and other content. Writing is not just a profession for her; it’s a passion that fuels creativity and dedication to the field of writing.

See author's posts

Leave a Reply