Props: Passing Data Down

Props (short for properties) are how you pass data from a parent component down to a child component. Think of them as the settings or configuration for a component. The key thing to remember is that props are read-only. A child component should never modify the props it receives.

Let's see an example. We have a parent App component that wants to pass a user's name to a child UserProfile component.

JavaScript

// Child Component
function UserProfile(props) {
  // Props are received as an object in the function's first argument
  return <h1>Welcome back, {props.name}!</h1>;
}

// Parent Component
function App() {
  return (
    <div>
      {/* We pass props down like HTML attributes */}
      <UserProfile name="Alice" />
      <UserProfile name="Bob" />
    </div>
  );
}

In UserProfile, the props object looks like this: { name: "Alice" }. We can make our code cleaner by destructuring the props object right in the function signature:

JavaScript

function UserProfile({ name, role = "User" }) { // We can also set default values!
  return <h1>Welcome back, {name} ({role})!</h1>;
}

State: Managing Internal Data

What about data that needs to change in response to user interaction, like a counter or the text in an input field? That's where state comes in.

State is data that is managed inside a component. It is private to that component. When a component's state changes, React will automatically re-render the component and its children to reflect the new data. This is the core mechanism for creating interactive UIs in React.

Analogy: Props are like the name engraved on a trophy (can't be changed). State is like the score on a scoreboard (can change at any time).

Props vs. State

FeaturePropsStateSourcePassed from a parent component.Managed within the component.Mutability Immutable (read-only).Mutable (can be changed).PurposeTo configure a child component.To manage interactive data.AnalogyA function's arguments.A function's local variables.

Export to Sheets

The Component Lifecycle Concept

Every component in React goes through a "lifecycle" — it's born, it lives, and it dies. Understanding this lifecycle is key to performing actions at the right time, like fetching data when the component first appears.

The lifecycle is typically broken down into three main phases:

1. Mounting: The component is being created and inserted into the DOM for the first time. This is where you might fetch initial data or set up subscriptions.
2. Updating: The component is re-rendering because its props or state have changed.
3. Unmounting: The component is being removed from the DOM. This is where you would perform cleanup actions, like cancelling network requests or removing subscriptions.

In modern React, we manage these lifecycle events using a special function called a Hook, which you'll learn about in the next tutorial!