Props vs. State: Managing Component Data

1. Props: Data Passed from the Outside

Let's start with what you already know. Props (short for properties) are the way a parent component passes data and configuration down to its children.

Think of a React component as a JavaScript function. In this analogy, props are the arguments to that function.

// A regular JavaScript function
function greet(name) {
  return `Hello, ${name}!`;
}
greet('Alice'); // 'Alice' is the argument

// A React component
function Greeting({ name }) {
  return <p>Hello, {name}!</p>;
}
<Greeting name="Alice" /> // 'name' is a prop

A crucial rule in React is that a component must never change its own props. They are read-only. This principle ensures a predictable, one-way data flow, where data always flows down the component tree.

Attempting to change a prop directly will result in an error and goes against the design of React.

To get a deeper understanding of this, let's look at an article by Kent C. Dodds, a well-known figure in the React community.

So, if props can't be changed by the component, how do we handle data that needs to change, like the text a user types into an input field or a counter that increments? This is where state comes in.

2. State: A Component's Internal Memory

If props are the arguments passed into a component, state is the data managed within a component. It's like a component's private memory.

Key characteristics of state:

• Internal: State is declared and managed entirely inside the component. It's not accessible to parent components directly.
• Mutable: Unlike props, a component can update its own state.
• Triggers Re-renders: This is the most important aspect. When you update a component's state, React automatically re-renders that component (and its children) to reflect the new data in the UI.

This video from Web Dev Simplified offers a concise and clear explanation of these concepts.

The video you just watched highlighted the core idea: props are for external configuration, while state is for internal, interactive data.

3. A Direct Comparison: Props vs. State

Let's consolidate the differences into a clear comparison. Given your coding background, the analogy of function parameters versus local variables is especially fitting.

Here is a summary table of the key differences:

The following diagram visually captures this relationship. Props flow down from parent to child, while state is encapsulated within each component.

4. How to Decide: Is It Props or State?

When building a component, you'll often need to decide whether a piece of data should be managed as state. The official React documentation provides an excellent mental model for this. Ask yourself these three questions about any piece of data:

1. Does it remain unchanged over time? If so, it isn't state.
2. Is it passed in from a parent via props? If so, it isn't state.
3. Can you compute it based on existing state or props? If so, it definitely isn't state!

Data that doesn't meet any of these criteria is likely state.

Let's read the section from the "Thinking in React" guide that explains this process.

The principle of not storing computable data in state is crucial for avoiding bugs and keeping your components efficient. For example, if you have an array of items in state, you don't need a separate state variable to store the count of items; you can always compute it from array.length.

5. Common Pattern: Initializing State from Props

Props and state are different, but they often work together. A common pattern is for a parent component to pass a prop to a child, and the child then uses that prop as the initial value for its own internal state.

This is useful for components like a form input that needs a default value but must then manage its own changes.

Let's return to Kent C. Dodds' article to see a practical code example of this pattern.

The convention of naming the prop initialValue or defaultValue is a good practice, as it communicates that the prop only sets the starting value, and subsequent changes to the prop will not affect the component's state.

Conclusion

You've now covered one of the most fundamental concepts in React. Understanding the division of responsibility between props and state is key to building robust, interactive applications.

Key Takeaways:

• Props are for passing data down from a parent component. They are external and immutable (read-only) from the child's perspective.
• State is for managing a component's own data that changes over time. It is internal and mutable, and updating it triggers a re-render.
• To decide if something should be state, ask if it changes over time and cannot be computed from other props or state.
• Props and state work together, often with a prop providing the initial value for a piece of state.

Next Up:

We've focused on the "what" and "why" of state. In the next lesson, we'll dive into the "how." You will learn the syntax and mechanics of the useState hook to initialize and update state in your functional components, finally making your UIs interactive.