Using props in JSX in React - Deep Dive

Overview - Using props in JSX

What is it?

Using props in JSX means passing information from a parent component to a child component in React. Props are like special inputs that let components receive data and behave differently. They help make components reusable and dynamic by changing what they show or do based on the data they get. JSX is the syntax React uses to write HTML-like code inside JavaScript.

Why it matters

Without props, components would be static and could not share or customize data easily. Props solve the problem of communication between components, making apps interactive and flexible. Imagine building a toy where each piece can change color or shape depending on instructions; props are those instructions. Without them, every component would have to be rewritten for every small change, making development slow and error-prone.

Where it fits

Before learning props, you should understand basic React components and JSX syntax. After mastering props, you can learn about state management, hooks, and component lifecycle to build more interactive apps. Props are a foundational concept that connects simple components to complex app structures.

Mental Model

Core Idea

Props are like parameters you pass to a function, but for components, letting them receive data and customize their output.

Think of it like...

Using props in JSX is like giving a recipe card to a chef; the card tells the chef what ingredients to use and how to prepare the dish, so the chef can make different meals from the same recipe.

Parent Component
   │
   ├── passes props ──▶ Child Component
   │                     └─ uses props to render UI
   │
   └── can pass different props each time

Props flow one-way: Parent → Child

Build-Up - 7 Steps

1

Foundation

What Are Props in React

Concept: Introduce the idea of props as inputs to components.

In React, components can receive data called props. Props are passed like attributes in HTML but inside JSX. For example, passes a prop named 'name' with value 'Alice' to the Greeting component.

Result

The Greeting component can use the 'name' prop to show 'Hello, Alice!' on the screen.

Understanding props as inputs helps you see components as reusable pieces that can change based on the data they get.

2

Foundation

Accessing Props Inside Components

Concept: How to read and use props inside a functional component.

Props are received as a function argument in functional components. For example: function Greeting(props) { return

Hello, {props.name}!

; } Here, props.name accesses the value passed from the parent.

Result

The component renders a personalized greeting using the passed prop.

Knowing that props are just an object lets you access any data passed from the parent, making components flexible.

3

Intermediate

Passing Multiple Props and Different Types

🤔Before reading on: do you think props can only be strings, or can they be other types like numbers or functions? Commit to your answer.

Concept: Props can be any JavaScript value, not just strings.

You can pass numbers, booleans, arrays, objects, or even functions as props. For example: alert('Clicked!')} /> Inside the component, you use these props just like any other variable.

Result

The child component can behave differently based on the type and value of each prop.

Understanding that props accept any data type unlocks powerful ways to customize component behavior.

4

Intermediate

Default Props and Prop Validation

🤔Before reading on: do you think React automatically checks if props are missing or wrong type? Commit to your answer.

Concept: React allows setting default values for props and validating their types to catch errors early.

You can set default props by assigning default values in the function parameters or using defaultProps. Also, libraries like PropTypes help check prop types during development to avoid bugs.

Result

Components behave predictably even if some props are missing or incorrect.

Knowing how to provide defaults and validate props prevents common bugs and improves code quality.

5

Intermediate

Props Are Read-Only and One-Way

🤔Before reading on: can a child component change the props it receives? Commit to your answer.

Concept: Props flow only from parent to child and cannot be changed by the child component.

Props are immutable inside the child. If a child needs to change data, it should use state or communicate back to the parent via callbacks passed as props.

Result

This one-way data flow keeps apps predictable and easier to debug.

Understanding props immutability clarifies why state exists and how data flows in React.

6

Advanced

Destructuring Props for Cleaner Code

🤔Before reading on: do you think accessing props with destructuring changes how props work? Commit to your answer.

Concept: Destructuring props is a syntax shortcut to extract values directly from the props object.

Instead of writing function Greeting(props) { return

{props.name}

; }, you can write function Greeting({ name }) { return

{name}

; } This makes code cleaner and easier to read.

Result

Code becomes shorter and more readable without changing functionality.

Knowing destructuring improves code clarity and is a common pattern in professional React codebases.

7

Expert

Props and React Reconciliation Performance

🤔Before reading on: do you think passing new props always causes React to re-render the child component? 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 new object or function is passed each time, React treats it as changed and re-renders. Memoization techniques like React.memo or useCallback help prevent unnecessary renders by keeping props stable.

Result

Optimized apps avoid slowdowns caused by needless re-rendering.

Understanding how props affect rendering helps write high-performance React apps and avoid subtle bugs.

Under the Hood

When a React component is called, the props object is passed as an argument. React uses this object to determine what to render. During reconciliation, React compares the new props with the previous ones using shallow equality. If props differ, React updates the component's output in the virtual DOM and then updates the real DOM efficiently. Props are immutable inside the component, ensuring predictable rendering behavior.

Why designed this way?

Props were designed as immutable inputs to keep components pure and predictable. This one-way data flow simplifies debugging and reasoning about UI changes. Alternatives like two-way binding were avoided to reduce complexity and bugs. The design encourages clear separation between data input (props) and internal state, making apps easier to maintain and optimize.

┌───────────────┐       ┌───────────────┐
│ Parent        │       │ Child         │
│ Component     │──────▶│ Component     │
│ (creates JSX) │ props │ (receives     │
└───────────────┘       │ props object) │
                        └───────────────┘

React compares props during updates:
Previous props ──▶ shallow compare ──▶ New props
If different → re-render child component

Myth Busters - 4 Common Misconceptions

Quick: Can a child component modify the props it receives? Commit to yes or no.

Common Belief: Props can be changed inside the child component to update the UI.

Reality: Props are read-only inside the child component and cannot be modified.

Why it matters: Trying to change props inside a child leads to bugs and unpredictable UI behavior.

Quick: Are props only strings or can they be other types? Commit to your answer.

Common Belief: Props must be strings because JSX looks like HTML attributes.

Reality: Props can be any JavaScript value: numbers, booleans, objects, arrays, or functions.

Why it matters: Limiting props to strings restricts component flexibility and leads to awkward workarounds.

Quick: Does React always re-render a child component when props are passed? Commit to yes or no.

Common Belief: Passing props always causes the child component to re-render.

Reality: React re-renders only if props have changed based on shallow comparison; stable props prevent unnecessary renders.

Why it matters: Misunderstanding this causes performance issues and inefficient apps.

Quick: Does React automatically check prop types and provide defaults? Commit to yes or no.

Common Belief: React enforces prop types and default values automatically.

Reality: React does not enforce prop types or defaults by itself; developers must add PropTypes or default values manually.

Why it matters: Assuming automatic checks can lead to runtime errors and harder-to-find bugs.

Expert Zone

1

Passing inline functions as props creates new references each render, causing child re-renders unless memoized.

2

Destructuring props in the function signature improves readability but does not affect performance or behavior.

3

React.memo only shallowly compares props; deep objects require custom comparison to avoid unnecessary renders.

When NOT to use

Props are not suitable for managing data that changes inside a component; use state or context instead. For global or deeply nested data, consider React Context or state management libraries like Redux.

Production Patterns

In production, props are often combined with hooks and context to build scalable apps. Developers use PropTypes or TypeScript for type safety. Memoization patterns like React.memo and useCallback optimize rendering. Passing callbacks as props enables child-to-parent communication.

Connections

Function Parameters

Props in React components are like parameters passed to functions.

Understanding function parameters helps grasp how props deliver data to components, making React components behave like reusable functions.

Immutable Data Structures

Props are immutable inside components, similar to immutable data patterns.

Knowing immutability principles clarifies why props cannot be changed and how this leads to predictable UI updates.

Supply Chain Management

Props flow one-way from parent to child like goods moving down a supply chain.

Seeing props as a one-way delivery system helps understand data flow and why reverse changes require callbacks or state.

Common Pitfalls

#1 Trying to modify props inside a child component.

Wrong approach:

function Child(props) {
props.name = 'Changed'; // wrong
return {props.name};
}

Correct approach:

function Child(props) {
const [name, setName] = React.useState(props.name);
// use state to change name
return {name};
}

Root cause:

Misunderstanding that props are immutable and confusing them with state.

#2 Passing new objects or functions inline causing unnecessary re-renders.

Wrong approach:

doSomething()} />

Correct approach:

const handleClick = React.useCallback(() => doSomething(), []);

Root cause:

Not realizing that inline functions create new references each render, triggering React to re-render children.

#3 Assuming React automatically checks prop types and provides defaults.

Wrong approach:

function Button(props) {
return ;
}
// No default or type check

Correct approach:

Button.defaultProps = { disabled: false };
Button.propTypes = { disabled: PropTypes.bool, label: PropTypes.string.isRequired };

Root cause:

Believing React enforces prop validation and defaults without explicit code.

Key Takeaways

Props are the way React components receive data from their parents, making components reusable and dynamic.

Props are read-only and flow one-way from parent to child, ensuring predictable UI updates.

Props can be any JavaScript value, not just strings, allowing flexible component customization.

Understanding how React compares props helps optimize rendering and improve app performance.

Using default props and prop validation prevents bugs and improves code quality in React applications.