What is the difference between state and props in React?

Great question! In React, **state** and **props** are both plain JavaScript objects that hold information influencing how components render, but they serve different purposes and have distinct characteristics. ### Props (short for properties) - **Purpose:** Props are used to pass data **from a parent component to a child component**. - **Immutable:** A component receiving props **cannot modify them** — they are read-only. - **Usage:** Props allow components to be dynamic and reusable by configuring them with different data. - **Example:** `` — here, `name` is a prop passed to the `Greeting` component. ### State - **Purpose:** State is used to hold data that is **local to a component and can change over time**. - **Mutable:** Unlike props, a component **can update its own state** using methods like `setState` (class components) or the `useState` hook (functional components). - **Usage:** State is best for data that needs to be tracked and updated within the component, such as user input, toggles, counters, or fetched data. - **Example:** A button component might track whether it is toggled on or off using state. ### Key differences summarized: | Aspect | Props | State | |----------------|--------------------------------|---------------------------------| | Who controls? | Parent component | The component itself | | Mutability | Immutable (read-only) | Mutable (can be updated) | | Purpose | Pass data and configuration | Manage dynamic data and behavior | | Lifecycle | Fixed during component render | Can change asynchronously | In short, **props make components configurable from the outside, while state manages data that changes inside the component.** Understanding this distinction helps you build clear, predictable React applications.