State vs Props in React 📊

Understanding the difference between State and Props is fundamental to React development. This guide will help you understand when to use each, why choose one over the other, and common patterns for managing data flow in your React applications.

Table of content

What are Props?
Can You Update Props in Children?
What is State?
Key Differences
When to Use Props
When to Use State
Why Props Over State?
Why State Over Props?
Common Patterns and Best Practices
Common Questions & Answers

1. What are Props?

Props (short for properties) are read-only data passed from a parent component to a child component. They allow you to pass data and functions down the component tree, making components reusable and configurable.

Key Characteristics:

Props are immutable - you cannot modify them within the receiving component
Props flow downward - from parent to child (unidirectional data flow)
Props are read-only - attempting to modify props will cause errors
Props make components reusable and configurable

props-basics.jsx

// Props are read-only data passed from parent to child
function WelcomeMessage({ name, age, isActive }) {
  return (
    <div>
      <h1>Welcome, {name}!</h1>
      <p>Age: {age}</p>
      <p>Status: {isActive ? 'Active' : 'Inactive'}</p>
    </div>
  );
}

// Parent component passes props
function App() {
  return (
    <WelcomeMessage 
      name="John" 
      age={25} 
      isActive={true} 
    />
  );
}

// Props are immutable - this will cause an error
function BadExample({ count }) {
  count = count + 1; // ❌ Error: Cannot assign to read-only property
  return <div>{count}</div>;
}

2. Can You Update Props in Children?

Short Answer: NO - You cannot directly update props in a child component. Props are immutable and read-only.

Why Props Are Immutable:

Props maintain unidirectional data flow - data flows down from parent to child
Immutability ensures predictable behavior and prevents bugs
It enforces the "single source of truth" principle - data is owned by the parent
Attempting to modify props will result in a runtime error in React

How to "Update" Props (The Correct Way):

Since you can't modify props directly, you need to use the "Props Down, Events Up" pattern:

Parent owns the state - The data lives in the parent component's state
Pass data down as props - Parent passes the data to child as props
Pass callback functions as props - Parent passes a function that can update its state
Child calls the callback - When child needs to "update" the prop, it calls the parent's callback
Parent updates its state - Parent's state changes, which updates the prop passed to child

updating-props.jsx

// ❌ CANNOT UPDATE PROPS DIRECTLY - This will cause an error
function ChildComponent({ count }) {
  // Trying to modify props directly - THIS WON'T WORK!
  count = count + 1; // ❌ Error: Cannot assign to read-only property
  props.count = 10;  // ❌ Error: Cannot assign to read-only property
  
  return <div>Count: {count}</div>;
}

// ✅ CORRECT WAY: Use callback functions (Props Down, Events Up)
function Parent() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>Parent count: {count}</p>
      <ChildComponent 
        count={count}              // Pass data down as prop
        onIncrement={() => setCount(count + 1)}  // Pass callback as prop
      />
    </div>
  );
}

function ChildComponent({ count, onIncrement }) {
  // Child can't modify props, but can call parent's callback
  return (
    <div>
      <p>Child received count: {count}</p>
      <button onClick={onIncrement}>
        Increment (calls parent's function)
      </button>
    </div>
  );
}

// ✅ ALTERNATIVE: Use local state if child needs independent value
function ChildWithLocalState({ initialCount }) {
  // Initialize local state from prop, but manage independently
  const [count, setCount] = useState(initialCount);
  
  return (
    <div>
      <p>Local count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increment (local state)
      </button>
    </div>
  );
}

// Key Points:
// 1. Props are IMMUTABLE - you cannot change them
// 2. To "update" props, parent must update its state
// 3. Child communicates with parent via callback functions
// 4. This maintains unidirectional data flow

💡 Remember: If a child component needs to modify data, that data should be in the parent's state, not passed as a prop. The child can request changes through callback functions, but the parent always controls the data.

3. What is State?

State is mutable data that belongs to a component. It represents data that can change over time, typically in response to user interactions, network requests, or other events. When state changes, React re-renders the component.

Key Characteristics:

State is mutable - you can update it using setState or useState
State is local to the component - each component instance has its own state
State changes trigger re-renders - React updates the UI when state changes
State is private - not accessible from other components unless passed as props

state-basics.jsx

import { useState } from 'react';

// State is mutable data owned by the component
function Counter() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('Guest');
  
  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
      <button onClick={() => setName('John')}>
        Change Name
      </button>
    </div>
  );
}

// State changes trigger re-renders
function Toggle() {
  const [isOn, setIsOn] = useState(false);
  
  return (
    <button onClick={() => setIsOn(!isOn)}>
      {isOn ? 'ON' : 'OFF'}
    </button>
  );
}

4. Key Differences

Aspect	Props	State
Mutability	Immutable (read-only)	Mutable (can be changed)
Ownership	Owned by parent component	Owned by the component itself
Data Flow	Top-down (parent to child)	Local to component
Initialization	Passed from parent	Initialized in component
Updates	Changed by parent component	Changed by component itself
Use Case	Configuration, passing data down	Component-specific data that changes

props-vs-state.jsx

// ❌ WRONG: Trying to modify props
function UserCard({ name, age }) {
  // This won't work - props are read-only
  name = name.toUpperCase(); // Error!
  return <div>{name}, {age}</div>;
}

// ✅ CORRECT: Use state for mutable data
function UserCard({ initialName, age }) {
  const [name, setName] = useState(initialName);
  
  const handleNameChange = () => {
    setName(name.toUpperCase()); // Works!
  };
  
  return (
    <div>
      <p>{name}, {age}</p>
      <button onClick={handleNameChange}>Uppercase Name</button>
    </div>
  );
}

// ✅ CORRECT: Use props for passing data down
function Parent() {
  const [userName, setUserName] = useState('John');
  
  return (
    <ChildComponent 
      name={userName}  // Pass as prop
      onNameChange={setUserName}  // Pass setter as prop
    />
  );
}

function ChildComponent({ name, onNameChange }) {
  return (
    <div>
      <p>Name: {name}</p>
      <button onClick={() => onNameChange('Jane')}>
        Change Name
      </button>
    </div>
  );
}

5. When to Use Props

Use Props when you need to:

Pass data from parent to child: When a parent component needs to share data with its children
Make components reusable: When you want to create generic components that can be configured differently
Pass callback functions: When child components need to communicate back to parent components
Configure component behavior: When you want to customize how a component renders or behaves
Share data across multiple components: When multiple components need access to the same data (lift state up)

when-to-use.jsx

// ✅ USE PROPS WHEN:
// 1. Passing data from parent to child
function UserProfile({ user }) {
  return <div>{user.name} - {user.email}</div>;
}

// 2. Passing callback functions
function Button({ onClick, label }) {
  return <button onClick={onClick}>{label}</button>;
}

// 3. Configuring child components
function Modal({ isOpen, title, children }) {
  if (!isOpen) return null;
  return (
    <div>
      <h2>{title}</h2>
      {children}
    </div>
  );
}

// ✅ USE STATE WHEN:
// 1. Data changes over time within component
function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

// 2. User interactions (form inputs, toggles)
function LoginForm() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  // ... form logic
}

// 3. Component-specific UI state
function Dropdown() {
  const [isOpen, setIsOpen] = useState(false);
  return (
    <div>
      <button onClick={() => setIsOpen(!isOpen)}>Menu</button>
      {isOpen && <div>Dropdown content</div>}
    </div>
  );
}

// ❌ DON'T use state for:
// - Props received from parent
// - Computed values (use useMemo instead)
// - Data that doesn't change

// ❌ DON'T use props for:
// - Data that needs to change within component
// - Internal component logic

6. When to Use State

Use State when you need to:

Store data that changes: When data needs to be updated within the component (user input, toggles, counters)
Handle user interactions: When you need to track user actions like form inputs, button clicks, or selections
Manage UI state: When you need to control UI elements like modals, dropdowns, or loading states
Store component-specific data: When data is only relevant to that specific component instance
Handle asynchronous operations: When you need to store data from API calls or other async operations

Remember: If data doesn't change or is only used for rendering, you probably don't need state. Use props or compute it directly.

7. Why Props Over State?

Choose Props over State when:

Single Source of Truth: When multiple components need the same data, keeping it in a parent component and passing it as props ensures consistency. If you use state in each component, they can get out of sync.
Data Flow Clarity: Props create a clear, predictable data flow from parent to child, making your code easier to understand and debug.
Reusability: Components that receive data via props are more reusable because they don't depend on internal state that might not be relevant in different contexts.
Testability: Components that rely on props are easier to test because you can pass different props and verify the output without worrying about internal state.
Performance: When data is managed at a higher level and passed down, you have better control over when components re-render, leading to better performance optimization opportunities.

lifting-state.jsx

// Problem: Two siblings need to share state
// Solution: Lift state up to common parent

function App() {
  // State lifted to parent component
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <Display count={count} />
      <Controls 
        count={count} 
        onIncrement={() => setCount(count + 1)}
        onDecrement={() => setCount(count - 1)}
      />
    </div>
  );
}

// Child component receives count as prop
function Display({ count }) {
  return <h1>Count: {count}</h1>;
}

// Another child receives count and setters as props
function Controls({ count, onIncrement, onDecrement }) {
  return (
    <div>
      <button onClick={onDecrement}>-</button>
      <span>{count}</span>
      <button onClick={onIncrement}>+</button>
    </div>
  );
}

// Why lift state up?
// - Multiple components need the same data
// - Data needs to stay in sync across components
// - Single source of truth for shared data

8. Why State Over Props?

Choose State over Props when:

Component-Specific Data: When data is only relevant to a single component and doesn't need to be shared with siblings or parents. Using state keeps the data encapsulated and the component independent.
Frequent Updates: When data changes frequently and only affects one component, using local state avoids unnecessary re-renders of parent components.
User Input: For form inputs, toggles, and other interactive elements, local state provides immediate feedback and better user experience without prop drilling.
Independence: When you want a component to be self-contained and not depend on external data, state makes it more independent and reusable.
Performance: Local state can be more performant for component-specific UI state (like dropdown open/closed) because it doesn't trigger re-renders in parent components.

controlled-components.jsx

// Controlled Component: Parent controls the value via props
function App() {
  const [inputValue, setInputValue] = useState('');
  
  return (
    <ControlledInput 
      value={inputValue}  // Value comes from parent state
      onChange={setInputValue}  // Parent controls updates
    />
  );
}

function ControlledInput({ value, onChange }) {
  return (
    <input 
      value={value}  // Controlled by parent
      onChange={(e) => onChange(e.target.value)}
    />
  );
}

// Uncontrolled Component: Component manages its own state
function UncontrolledInput() {
  const [value, setValue] = useState('');
  
  return (
    <input 
      value={value}  // Controlled internally
      onChange={(e) => setValue(e.target.value)}
    />
  );
}

// When to use controlled?
// - Need to access value from parent
// - Multiple components need to sync
// - Form validation at parent level
// - Reset form from parent

// When to use uncontrolled?
// - Simple local input
// - No need to access value externally
// - Better performance (fewer re-renders)

9. Common Patterns and Best Practices

Here are some common patterns for using State and Props together:

state-prop-patterns.jsx

// Pattern 1: Props Down, Events Up
function TodoApp() {
  const [todos, setTodos] = useState([]);
  
  const addTodo = (text) => {
    setTodos([...todos, { id: Date.now(), text }]);
  };
  
  return (
    <div>
      <TodoInput onAdd={addTodo} />  {/* Pass handler as prop */}
      <TodoList todos={todos} />  {/* Pass data as prop */}
    </div>
  );
}

function TodoInput({ onAdd }) {
  const [input, setInput] = useState('');
  
  const handleSubmit = (e) => {
    e.preventDefault();
    onAdd(input);  // Call parent's handler
    setInput('');
  };
  
  return (
    <form onSubmit={handleSubmit}>
      <input 
        value={input}
        onChange={(e) => setInput(e.target.value)}
      />
    </form>
  );
}

function TodoList({ todos }) {
  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id}>{todo.text}</li>
      ))}
    </ul>
  );
}

// Pattern 2: Derived State from Props
function UserGreeting({ user }) {
  // Don't copy props to state!
  // const [name, setName] = useState(user.name); // ❌ BAD
  
  // ✅ GOOD: Use props directly
  return <h1>Hello, {user.name}!</h1>;
  
  // ✅ GOOD: If you need to modify, use derived state
  const displayName = user.name.toUpperCase();
  return <h1>Hello, {displayName}!</h1>;
}

// Pattern 3: State with Props Initialization
function Counter({ initialCount = 0 }) {
  // ✅ GOOD: Initialize state from prop, but manage it internally
  const [count, setCount] = useState(initialCount);
  
  // State is independent after initialization
  return (
    <button onClick={() => setCount(count + 1)}>
      {count}
    </button>
  );
}

Best Practices Summary

Props Down, Events Up: Pass data down via props, send events up via callback functions
Lift State Up: When multiple components need the same data, lift it to their common parent
Don't Copy Props to State: Use props directly unless you need to modify them (then use state)
Single Source of Truth: Keep state in one place - either in the component that needs it or in a common parent
Minimize State: Only use state for data that actually changes. Use props for static or computed data
Controlled vs Uncontrolled: Use controlled components (props) when you need to control the value from parent, use uncontrolled (state) for simple local inputs

Quick Decision Guide

Use Props if:

Data comes from parent component
Multiple components need the same data
Data is used for configuration
You want to make component reusable

Use State if:

Data changes within the component
Data is only relevant to this component
Handling user input or interactions
Managing UI state (modals, dropdowns, etc.)

10. Common Questions & Answers

Here are answers to frequently asked questions about State and Props in React. These questions often come up during development and interviews.

Q1: Can you pass state as props?

Yes! This is the most common pattern in React. You can pass any value as a prop, including state values.

Q2: Should you copy props to state?

Generally no. Use props directly unless you need to modify them independently. Copying props to state can lead to bugs when props change but your local state doesn't update.

Exception: It's okay to initialize state from props if the state needs to be independent after initialization (like a counter that starts from a prop value).

Q3: Can props be functions?

Yes! Functions are first-class values in JavaScript. You can pass functions as props, which is how the "Props Down, Events Up" pattern works.

Q4: What happens if you don't pass a prop?

The prop will be undefined. Always use default parameters or optional chaining to handle missing props gracefully.

Q5: Can you have both props and state in the same component?

Absolutely! This is a very common pattern. Use props for data from parent, and state for component-specific data that changes.

Q6: How do you share state between sibling components?

Lift state up to their common parent. The parent manages the state and passes it down as props to both siblings. If one sibling needs to update it, pass a callback function as a prop.

Q7: Can props be objects or arrays?

Yes! Any JavaScript value can be a prop - strings, numbers, booleans, objects, arrays, functions, even JSX elements.

Q8: What's the difference between controlled and uncontrolled components?

Controlled: Parent controls the value via props. The component receives value and onChange as props.

Uncontrolled: Component manages its own state internally. The parent doesn't control the value.

Q9: Can you use props to initialize state?

Yes, but remember: state becomes independent after initialization. If the prop changes later, your state won't automatically update. Use useEffect if you need to sync state with prop changes.

Q10: How do you sync state with prop changes?

Use useEffect to watch for prop changes and update your state accordingly. This is useful when you initialize state from props but want it to stay in sync.

common-questions.jsx

// Q1: Can you pass state as props?
// ✅ YES - This is the most common pattern
function Parent() {
  const [count, setCount] = useState(0);
  return <Child count={count} />;  // State passed as prop
}

// Q2: Should you copy props to state?
// ❌ GENERALLY NO - Use props directly
function BadExample({ name }) {
  const [localName, setLocalName] = useState(name); // ❌ BAD
  // Problem: If prop changes, local state won't update
}

// ✅ GOOD: Use props directly
function GoodExample({ name }) {
  return <div>{name}</div>;  // Use prop directly
}

// ✅ EXCEPTION: Only copy to state if you need to modify it independently
function Counter({ initialCount }) {
  const [count, setCount] = useState(initialCount); // ✅ OK
  // State is independent after initialization
}

// Q3: Can props be functions?
// ✅ YES - Functions are first-class values in JavaScript
function Parent() {
  const handleClick = () => console.log('Clicked');
  return <Button onClick={handleClick} />;
}

function Button({ onClick }) {
  return <button onClick={onClick}>Click me</button>;
}

// Q4: What happens if you don't pass a prop?
// Props are undefined if not passed
function Greeting({ name }) {
  return <div>Hello, {name || 'Guest'}!</div>;
}

// Better: Use default parameters
function Greeting({ name = 'Guest' }) {
  return <div>Hello, {name}!</div>;
}

// Q5: Can you have both props and state in the same component?
// ✅ YES - Very common pattern
function UserCard({ user }) {  // Props
  const [isExpanded, setIsExpanded] = useState(false);  // State
  
  return (
    <div>
      <h3>{user.name}</h3>
      {isExpanded && <p>{user.bio}</p>}
      <button onClick={() => setIsExpanded(!isExpanded)}>
        Toggle
      </button>
    </div>
  );
}

// Q6: How do you share state between sibling components?
// Solution: Lift state up to common parent
function App() {
  const [count, setCount] = useState(0);  // Shared state
  
  return (
    <div>
      <Display count={count} />      {/* Sibling 1 */}
      <Controls 
        count={count} 
        setCount={setCount} 
      />  {/* Sibling 2 */}
    </div>
  );
}

// Q7: Can props be objects or arrays?
// ✅ YES - Any JavaScript value can be a prop
function UserList({ users }) {  // Array prop
  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

function UserProfile({ user }) {  // Object prop
  return <div>{user.name} - {user.email}</div>;
}

// Q8: What's the difference between controlled and uncontrolled?
// Controlled: Parent controls value via props
function ControlledInput({ value, onChange }) {
  return (
    <input 
      value={value}  // Controlled by parent
      onChange={(e) => onChange(e.target.value)}
    />
  );
}

// Uncontrolled: Component manages its own state
function UncontrolledInput() {
  const [value, setValue] = useState('');
  return (
    <input 
      value={value}  // Controlled internally
      onChange={(e) => setValue(e.target.value)}
    />
  );
}

// Q9: Can you use props to initialize state?
// ✅ YES - But state becomes independent after initialization
function Counter({ initialCount = 0 }) {
  const [count, setCount] = useState(initialCount);
  // If initialCount prop changes later, count won't update
  // Use useEffect if you need to sync with prop changes
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

// Q10: How to sync state with prop changes?
// Use useEffect to sync state when prop changes
function SyncedCounter({ count: propCount }) {
  const [count, setCount] = useState(propCount);
  
  useEffect(() => {
    setCount(propCount);  // Sync when prop changes
  }, [propCount]);
  
  return <div>{count}</div>;
}

💡 Pro Tip

When in doubt, ask yourself: "Who owns this data?" If the parent component owns it, use props. If the component itself owns it, use state. If multiple components need it, lift the state up to their common parent and pass it down as props.