React state vs props

When you start working with React, two concepts come up again and again: state and props. They might look similar, but they do very different jobs. Let’s break it down.

What are Props?

Props (short for “properties”) are how you pass data from one component to another. Think of them like arguments you pass into a function. Once received, the component can use them, but it can’t change them.

Key points about props:

• They are passed from parent to child.
• They are read-only inside the child.
• They make components reusable by allowing different inputs.

Example of Props

// Parent component
function App() {
  return (
    <div>
      <Greeting name="Alice" />
      <Greeting name="Bob" />
    </div>
  );
}

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

Here, App sends different name props to Greeting. The child just displays them—it doesn’t try to change them.

What is State?

State is data that a component manages itself. Unlike props, state can change over time— usually when the user interacts with the UI.

Key points about state:

• It is managed inside the component.
• It can change when the component needs to re-render.
• It makes components dynamic and interactive.

Example of State

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

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

In this example, count is state. Every time the button is clicked, setCount updates the state, and React re-renders the component.

State and Props Together

Most real apps use both props and state. A parent might pass data via props, while the child manages its own state internally.

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

// Child
function Greeting(props) {
  const [count, setCount] = React.useState(0);

  return (
    <div>
      <h2>Hello, {props.name}!</h2>
      <p>You clicked {count} times.</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}
  

Here, name is a prop (external input), while count is state (internal, managed by the component).

Quick Comparison

Props	State
Passed from parent to child	Owned by the component itself
Read-only	Can be updated with setState or hooks like useState
Makes components reusable	Makes components interactive
Fixed for the lifetime of the render	Can change anytime based on events

Best Practices

• Use props to make components configurable from outside.
• Keep state as small as possible—don’t store data in state if it can be calculated from props.
• Lift state up: if multiple components need the same data, keep it in their closest common parent and pass it down as props.

Conclusion

Props and state are the backbone of React. Props let data flow into a component, and state lets the component handle its own changes. If you remember this simple split— props for external inputs, state for internal changes—you’ll be on solid ground when building React apps.