If you're new to React, you've probably heard the words "state" and "props" a thousand times. They are the two most fundamental concepts for passing data through your application, but they can be incredibly confusing at first.

What’s the difference? When should you use one over the other?

Forget the technical jargon for a moment. By the end of this guide, you'll have a crystal-clear mental model for both, all thanks to a simple coffee shop.

Let's Visit Our Coffee Shop

Imagine we're building a React component that displays a coffee shop's menu. This menu has two parts: the permanent, printed menu and a chalkboard for the daily special.

This is our entire analogy.

• Props are the permanent, printed menu.
• State is the daily special chalkboard.

Let's break that down.

Part 1: Props - The Permanent, Printed Menu

Think about a coffee shop's main menu. It's printed, laminated, and handed to you by the owner.

• The information on it (like "Espresso - $3.00") is given to the menu.
• The menu itself cannot change what's printed on it.
• The data comes from a higher source (the owner) and is passed down.

This is exactly how props (short for "properties") work.

Props are read-only pieces of data that are passed down from a parent component to a child component. The child component can read the props and use them, but it cannot change them.

The Code: A MenuItem Component

Let's create a reusable component for a single item on our menu. It will receive the name and price as props.

In our main App component (the "owner"), we can now use MenuItem and pass it whatever props we want.

Key Takeaway: The MenuItem component receives name and price as props and displays them. It is simply a receiver of information. It's read-only.

Part 2: State - The Daily Special Chalkboard

Now, think about the chalkboard behind the counter.

• It holds information that changes frequently (the daily special).
• The information is managed internally by the coffee shop staff. A customer can't walk up and change the sign.
• When the special is updated on the board, everyone looking at it sees the new information instantly.

This is exactly how state works.

State is data that is managed inside a single component. It's private to that component and can be changed over time based on user actions (like a button click). When the state changes, React automatically re-renders the component to display the new information.

The Code: A DailySpecial Component

To use state, we need to import a special function from React called useState.

Breaking it down:

1. const [orderCount, setOrderCount] = useState(0);: This line initializes our state. orderCount holds the current number (starting at 0), and setOrderCount is the only function we can use to change it.
2. onClick={handleOrderClick}: When the button is clicked, it runs our function.
3. setOrderCount(orderCount + 1): This tells React to update the orderCount state. React then automatically re-renders the DailySpecial component to show the new count on the screen.

Key Takeaway: The DailySpecial component manages its own orderCount. It can change its own data, and this data is not directly accessible by other components.

The Golden Rule: When to Use State vs. Props?

Here is a simple decision tree to help you decide. Ask yourself one question about a piece of data:

"Does this data need to change over time based on user interaction 

• If YES → Use State. (e.g., the number of items in a shopping cart, the text in a search input, whether a modal is open or closed).
• If NO → It's probably a Prop. The data is being passed down from a parent component and is just for display.

Final Comparison

Mastering the difference between state and props is the single biggest step toward truly understanding React. Keep this coffee shop analogy in your mind, and you'll be building dynamic, interactive applications in no time.

Happy coding