What are props in React - Deep Dive

Overview - What are props

What is it?

Props are special inputs that you pass to React components to customize their behavior or appearance. They are like parameters you give to a function, but for components. Props allow components to be reusable and dynamic by receiving different values each time they are used. They are read-only, meaning a component cannot change its own props.

Why it matters

Without props, every React component would be fixed and unchangeable, making it hard to build flexible user interfaces. Props let you create one component that can show different content or behave differently depending on the data it receives. This saves time and effort, and helps keep your code organized and easy to maintain.

Where it fits

Before learning props, you should understand basic React components and JSX syntax. After mastering props, you can learn about state for managing internal component data, and then explore hooks for advanced behavior.

Mental Model

Core Idea

Props are like the settings or instructions you give to a component so it knows what to show or do.

Think of it like...

Imagine a coffee machine where you choose the size and type of coffee each time you use it. The coffee machine is the component, and the choices you make (size, type) are the props that customize the coffee it makes.

Component(props) ──> Rendered UI

┌───────────────┐
│   Component   │
│  receives     │
│   props       │
└──────┬────────┘
       │
       ▼
┌───────────────┐
│  Uses props to│
│  decide what  │
│  to display   │
└──────┬────────┘
       │
       ▼
┌───────────────┐
│  Shows UI     │
│  customized   │
│  by props     │
└───────────────┘

Build-Up - 6 Steps

1

Foundation

Basic concept of props

Concept: Props are inputs passed to components to customize them.

In React, components can receive data from their parent components through props. This data can be text, numbers, functions, or even other components. Props are passed like attributes in HTML tags. Example: function Greeting(props) { return

Hello, {props.name}!

; } Here, the Greeting component receives a prop called 'name' with the value 'Alice'.

Result

The component displays: Hello, Alice!

Understanding props as inputs helps you see components as reusable pieces that can change based on what you give them.

2

Foundation

Props are read-only

Concept: Props cannot be changed inside the component that receives them.

Props are like instructions you receive but cannot alter. If you try to change props inside a component, React will warn you. Instead, components can use state to manage data that changes internally. Example: function Counter(props) { // Wrong: props.count = props.count + 1; // This is not allowed return

Count: {props.count}

; }

Result

Props remain the same as passed from the parent; the component cannot modify them.

Knowing props are read-only prevents bugs where components try to change data they shouldn't, keeping data flow predictable.

3

Intermediate

Passing multiple props

🤔Before reading on: Do you think you can pass any type of data as props, like numbers, strings, or even functions? Commit to your answer.

Concept: Props can be many types of data, including functions, objects, and arrays.

You can pass multiple props to a component, and they can be any JavaScript value. Example: function Profile(props) { return (

{props.name}

Age: {props.age}

); } alert('Hi!')} />

Result

The Profile component shows Bob's name and age, and the button shows an alert when clicked.

Understanding that props can be functions or complex data lets you build interactive and flexible components.

4

Intermediate

Default props and prop types

🤔Before reading on: Do you think React automatically checks if props are the right type or provides default values? Commit to your answer.

Concept: React allows setting default values for props and checking their types to avoid errors.

You can define default props so a component has fallback values if none are provided. Also, you can specify expected prop types to catch mistakes early. Example: import PropTypes from 'prop-types'; function Button(props) { return ; } Button.defaultProps = { label: 'Click me' }; Button.propTypes = { label: PropTypes.string };

Result

If no label is passed, the button shows 'Click me'. If a wrong type is passed, React warns in the console.

Using default props and prop types improves component reliability and developer experience.

5

Advanced

Props destructuring for clarity

🤔Before reading on: Do you think accessing props directly or destructuring them makes no difference in code clarity? Commit to your answer.

Concept: Destructuring props in the function parameters or inside the component makes code cleaner and easier to read.

Instead of writing props.name, props.age repeatedly, you can extract them at the start. Example: function User({ name, age }) { return

{name} is {age} years old.

; } This is equivalent to: function User(props) { const { name, age } = props; return

{name} is {age} years old.

; }

Result

The component renders the same output but the code is simpler and clearer.

Knowing destructuring helps write cleaner components and reduces repetitive code.

6

Expert

Props and component re-rendering

🤔Before reading on: Do you think changing props always causes a component to re-render, even if the values are the same? Commit to your answer.

Concept: React re-renders components when props change, but understanding how React compares props helps optimize performance.

React uses shallow comparison for props. If a prop is a new object or array, React treats it as changed even if contents are the same. Example: const obj1 = { a: 1 }; const obj2 = { a: 1 }; Even though obj1 and obj2 look the same, React sees them as different because they are different objects. To optimize, use memoization or stable references to avoid unnecessary re-renders.

Result

Understanding this helps prevent performance issues in large apps.

Knowing how React compares props is key to writing efficient components and avoiding wasted work.

Under the Hood

When a React component is called, the props object is passed as an argument containing all the data given by the parent. React uses this props object to determine what to render. React tracks changes in props using shallow comparison to decide if a component needs to update. Props are immutable inside the component to keep data flow predictable and one-way, from parent to child.

Why designed this way?

Props were designed to enforce a clear data flow in React apps, making components predictable and easier to debug. By making props read-only, React avoids side effects inside components. The shallow comparison approach balances performance and simplicity, allowing React to efficiently update the UI without deep checks.

Parent Component
     │
     │ passes props
     ▼
┌───────────────┐
│ Child Component│
│ receives props │
│ (immutable)    │
└──────┬────────┘
       │
       ▼
 React compares new props with old props
       │
       ▼
If props changed (shallowly) → Re-render component
Else → Skip re-render

Myth Busters - 4 Common Misconceptions

Quick: Do you think a component can change its own props? Commit to yes or no.

Common Belief: A component can modify its props to update its display.

Reality: Props are read-only inside components; only the parent can change them by passing new values.

Why it matters: Trying to change props inside a component leads to bugs and React warnings, breaking the predictable data flow.

Quick: Do you think passing the same object as a prop twice will prevent re-render? Commit to yes or no.

Common Belief: If two props have the same content, React will not re-render the component.

Reality: React compares props by reference, not content. Different objects with same content cause re-render.

Why it matters: Misunderstanding this causes unnecessary re-renders and performance issues.

Quick: Do you think props can be used to store component internal state? Commit to yes or no.

Common Belief: Props can be used to store and update internal state inside a component.

Reality: Props are for external data; internal state should be managed with React state hooks.

Why it matters: Mixing props and state confuses data flow and can cause bugs.

Quick: Do you think React automatically validates prop types without extra setup? Commit to yes or no.

Common Belief: React checks prop types automatically and throws errors if types are wrong.

Reality: React does not validate prop types by default; you must use PropTypes or TypeScript for type checking.

Why it matters: Without explicit checks, type errors can go unnoticed and cause runtime bugs.

Expert Zone

1

Passing functions as props can cause re-renders if not memoized, even if the function body is the same.

2

Default props only apply when a prop is undefined, not when it is null or another falsy value.

3

Props spreading (e.g., {...props}) can unintentionally pass unwanted props, leading to bugs or warnings.

When NOT to use

Props are not suitable for managing data that changes inside a component; use state or context instead. For deeply nested data, consider using context or state management libraries rather than passing props through many layers.

Production Patterns

In real apps, props are used to pass data and callbacks down the component tree. Developers often use prop destructuring and default props for clarity. Memoization techniques like React.memo and useCallback help optimize components that receive props to avoid unnecessary re-renders.

Connections

Function parameters

Props in React components are like parameters passed to functions.

Understanding props as function parameters helps grasp how components receive input and produce output.

Immutable data structures

Props are immutable inside components, similar to how immutable data structures cannot be changed after creation.

Knowing immutability principles clarifies why props cannot be modified and how React detects changes efficiently.

Supply chain management

Props passing is like delivering parts from a supplier (parent) to a factory (child) that assembles products.

Seeing props as supplies helps understand the one-way flow and importance of clear contracts between components.

Common Pitfalls

#1 Trying to modify props inside a component.

Wrong approach:

function MyComponent(props) {
props.name = 'Changed'; // Wrong
return {props.name};
}

Correct approach:

function MyComponent(props) {
const name = props.name;
return {name};
}

Root cause:

Misunderstanding that props are immutable and should not be changed inside components.

#2 Passing new object literals as props causing unnecessary re-renders.

Wrong approach:

Correct approach:

const data = { a: 1 };

Root cause:

Not realizing that each new object literal creates a new reference, triggering re-renders.

#3 Not providing default props leading to undefined values.

Wrong approach:

function Button(props) {
return ;
}

Correct approach:

function Button(props) {
const label = props.label || 'Click me';
return ;
}

Root cause:

Assuming props will always have values without setting defaults.

Key Takeaways

Props are inputs passed from parent to child components to customize their behavior and appearance.

Props are read-only inside components, ensuring a predictable one-way data flow.

Props can be any JavaScript data type, including functions, enabling flexible and interactive components.

Understanding how React compares props helps optimize component rendering and performance.

Using default props and prop types improves code reliability and developer experience.