States and Props in React: A Simple Guide for Beginners

Let’s break down two ideas that sit at the heart of every React app: state and props . If you understand these two well, the rest of React becomes much easier.

What Props Are

Props are like arguments you pass into a function. They let a component receive data from its parent.

Think of props as read-only information .

function Welcome(props) {
    return <h2>Hello, {props.name}</h2>;
  }

You can’t change props.name inside the component because props are meant to stay stable. Their job is to pass data down the component tree .

Use props when:

• You want to display data sent from a parent component
• The child component does not need to modify that data
• The value should stay the same unless the parent re-renders

What State Is

State represents data that can change over time. When state updates, React re-renders the component.

Here’s a basic example:

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

Every time you click the button, the state updates and React re-renders the UI.

Use state when:

• The component needs to update based on user actions
• Data changes over time (form inputs, counters, toggles)
• You want dynamic behavior

Props vs State: What’s the Difference?

Here’s the simplest way to remember it:

Feature	Props	State
Can the component change it?	❌ No	✅ Yes
Does it come from parent?	✅ Yes	❌ No
Does it trigger re-render?	Only if parent sends new props	Yes
Is it read-only?	Yes	No

Props = data coming from outside
State = data managed inside the component

How They Work Together

Often, props and state work as a team.

A parent stores something in its state and sends it to a child as a prop.

function Parent() {
    const [theme, setTheme] = useState("light");
    return <Child theme={theme} />;
  }

The child receives theme as a prop and displays it.

This is how React builds predictable, controlled UIs.

Final Thoughts

Once you understand state and props, you understand the backbone of React. Every interactive and reusable component relies on these two ideas. Keep experimenting, and soon this will feel natural.