React FAQ: Top 75 Questions

5. What is the difference between Props and State in React?

Props and State are two fundamental concepts in React that hold data within components, but they serve different purposes and have distinct characteristics:

Feature	Props (Properties)	State
Definition	Arguments/data passed from a parent component to a child component.	Data that a component manages internally; it belongs to the component itself.
Mutability	Immutable (read-only); a child component cannot directly modify the props it receives from its parent.	Mutable; a component can change its own state using `setState` (class components) or `useState` (functional components).
Ownership	Owned by the parent component that passes them.	Owned by the component itself.
Passing Data	Passed down from parent to child components.	Used within the component or passed to its children as props.
Purpose	To pass data, configuration, or callbacks from a parent to its children.	To manage data that changes over time and affects the component's rendering or behavior.
Initial Value	Set by the parent component.	Initialized within the component.
Changes	Re-renders child component when parent's props change.	Triggers re-render of the component when its state changes.
Example Use	`<Greeting name="Alice" />`, `name` is a prop.	A counter component whose count changes on button click.

In essence, **props are for communication between components (parent to child)**, while **state is for managing internal data that changes within a single component**.


import React, { useState } from 'react';
import ReactDOM from 'react-dom/client';

// Component demonstrating Props
function DisplayName(props) {
  // props.firstName is immutable - cannot be changed here.
  return <h2>Hello, {props.firstName} {props.lastName}!</h2>;
}

// Component demonstrating State
function ToggleMessage() {
  const [isVisible, setIsVisible] = useState(false); // isVisible is state

  const toggleVisibility = () => {
    setIsVisible(!isVisible); // State is updated using setter function
  };

  return (
    <div>
      <button onClick={toggleVisibility}>
        {isVisible ? 'Hide Message' : 'Show Message'}
      </button>
      {isVisible && <p>This message toggles based on state!</p>}
    </div>
  );
}

// Parent component to render both
function App() {
  const user = {
    firstName: "John",
    lastName: "Doe"
  };

  return (
    <div>
      <DisplayName firstName={user.firstName} lastName={user.lastName} />
      <hr />
      <ToggleMessage />
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root-props-state'));
root.render(<App />);

Explanation of the Code:

**`DisplayName` Component (Props):**
- It receives `firstName` and `lastName` as `props` from its parent (`App`).
- These `props` are read-only; `DisplayName` cannot change `props.firstName` or `props.lastName`.
- If `App` decides to pass different names, `DisplayName` will re-render with the new `prop` values.
**`ToggleMessage` Component (State):**
- It uses `useState` to manage its internal `isVisible` state.
- The `toggleVisibility` function *modifies* this `isVisible` state using `setIsVisible()`.
- When `isVisible` changes, `ToggleMessage` re-renders, conditionally showing or hiding the paragraph.

This example clearly demonstrates that `props` are external, immutable data passed into a component, while `state` is internal, mutable data managed by the component itself.

←→