Props

React Props

Props (short for properties) are inputs passed from a parent component to a child component. They make components configurable and reusable. In practice, props are one of the most important mechanisms in React because they define how data flows through the component tree.

Note

Mental model: parent components own data and behavior, child components receive configuration through props and render UI based on those values.

graph TD P["Parent Component"] -->|props| C["Child Component"] C --> U["Rendered UI"]

What Props Enable

Data Flow

Pass data from parent to child in a predictable one-way direction.

Reusability

Reuse the same component with different prop values.

Dynamic UI

Render different output based on changing inputs.

Basic Props Usage

Passing, Receiving, and Destructuring

Passing Props

function App() {
    return <User name="Sahil" age={20} />;
}

Receiving Props

function User(props) {
    return (
        <h1>
            {props.name} - {props.age}
        </h1>
    );
}

Destructuring Props

function User({ name, age }) {
    return (
        <h1>
            {name} - {age}
        </h1>
    );
}

Props are Read-Only (Immutable)

Props are immutable inside the child component. A child must never mutate them. If a value needs to change, the parent should update and pass new props.

function User(props) {
    props.name = "Changed"; // Wrong: never mutate props
}

Danger

Mutating props breaks React’s one-way data flow and can cause unpredictable UI behavior.

Why Read-Only?

React follows unidirectional data flow: parent to child.

Parent -> Child (one-way)

Passing Different Types of Props

React props can hold almost any JavaScript value.

String / Number / Boolean

<User name="Sahil" age={20} isAdmin={true} />

Array / Object

<User skills={["React", "Python"]} user={{ name: "Sahil", age: 20 }} />

Function Prop

<User onClick={handleClick} />

Props in Class Components

Class components access props with this.props.

class User extends React.Component {
    render() {
        return <h1>{this.props.name}</h1>;
    }
}

Default Props

Default values are used when a prop is missing.

Function Component Default

function User({ name = "Guest" }) {
    return <h1>{name}</h1>;
}

Class Component Default

User.defaultProps = {
    name: "Guest",
};

Passing Props Between Components

Props can move through multiple levels in a component tree.

App
 ├── Header
 ├── User
 │    └── Profile

function App() {
    return <User name="Sahil" />;
}

function User(props) {
    return <Profile name={props.name} />;
}

graph LR A["App"] -->|name| B["User"] B -->|name| C["Profile"]

Props vs State

Feature	Props	State
Ownership	Parent	Component
Mutability	Immutable	Mutable
Purpose	Data passing	Internal logic

Children Props

props.children contains everything placed between opening and closing tags of a component.

function Card(props) {
    return <div>{props.children}</div>;
}

<Card>
    <h1>Hello</h1>
</Card>

<Card>
  ↓
props.children = <h1>Hello</h1>

Conditional Props Usage

Props are often used in conditional rendering logic.

function User({ isLoggedIn }) {
    return <h1>{isLoggedIn ? "Welcome" : "Please Login"}</h1>;
}

Spread Props

Spread props are concise and common for forwarding related values.

const user = { name: "Sahil", age: 20 };

<User {...user} />;

Equivalent to:

<User name="Sahil" age={20} />

Caution

Avoid blind spreading from untrusted sources. It can pass unexpected props and make component contracts unclear.

Passing Functions as Props

Function props allow child components to trigger parent-controlled behavior.

function Parent() {
    function handleClick() {
        console.log("Clicked");
    }

    return <Child onClick={handleClick} />;
}

function Child({ onClick }) {
    return <button onClick={onClick}>Click</button>;
}

Parent controls behavior
Child triggers it

Props and Re-rendering

When props change, React re-renders the receiving component.

New Props -> Re-render -> New UI

Even when output looks the same, render work may still happen unless you optimize intentionally.

Key Prop

The key prop helps React match list items correctly across updates.

items.map((item) => <li key={item.id}>{item.name}</li>);

Keys should be stable, unique, and not change between renders to prevent unnecessary re-renders.

Prop Drilling

Prop drilling happens when props are passed through many intermediate components.

App -> A -> B -> C -> D

Common issues:

• Verbose component wiring.
• Harder maintenance as the tree grows.

Advanced Patterns with Props

Composition Pattern

Composition is preferred over inheritance in React.

function Layout({ header, content }) {
    return (
        <div>
            {header}
            {content}
        </div>
    );
}

Render Props Pattern

A render prop is a function passed as a prop to control rendering output.

function DataProvider({ render }) {
    const data = "Hello";
    return render(data);
}

<DataProvider render={(data) => <h1>{data}</h1>} />

Higher-Order Components (HOC)

An HOC is a function that takes a component and returns an enhanced component.

function withLogger(Component) {
    return function Wrapped(props) {
        console.log(props);
        return <Component {...props} />;
    };
}

Props Validation

PropTypes is an older but still useful runtime validation approach in JavaScript React projects.

import PropTypes from "prop-types";

User.propTypes = {
    name: PropTypes.string,
    age: PropTypes.number,
};

Anti-Patterns

Mutating Props

props.name = "Hack"; // Wrong

Overusing Props

Too many props can make component APIs difficult to understand.

Passing Unnecessary Props

Avoid forwarding data that a component does not need.

Performance Considerations

Shallow Comparison

React compares prop references shallowly, especially in memoized components.

Old props vs New props

Objects and arrays are compared by reference, not deep content.

Common Problem

<User data={{ name: "Sahil" }} />

This creates a new object each render, which can trigger avoidable re-renders.

Props and PureComponent

React.PureComponent performs shallow prop/state comparison to skip unnecessary re-renders.

class User extends React.PureComponent {}

Internal Working

When a parent re-renders, it generates new props for its children. React then reconciles the child components with the new props and updates the DOM if necessary.

graph TD A["Parent Re-renders"] --> B["New Props Generated"] B --> C["Child Receives Props"] C --> D["Reconciliation"] D --> E["DOM Updated If Needed"]

Mental Model

Keep these two ideas in mind:

Props = Configuration of a Component

Component = Function(props) -> UI