Props passing in React Native - Deep Dive

Overview - Props passing

What is it?

Props passing is how components in React Native share information. A parent component sends data to a child component using props, which are like special input values. This lets components stay separate but still work together by sharing what they need. Props are read-only, so children cannot change them directly.

Why it matters

Without props passing, components would be isolated and unable to communicate, making apps rigid and hard to build. Props let you reuse components with different data, making your app flexible and easier to maintain. Imagine building a car where every part can’t talk to each other — props solve that problem in app design.

Where it fits

Before learning props passing, you should understand basic React Native components and how to create them. After mastering props, you can learn about state management and how components handle their own data. Props passing is a foundation for building interactive and dynamic mobile apps.

Mental Model

Core Idea

Props passing is like giving a child a gift with instructions on how to use it, allowing components to share data without changing each other.

Think of it like...

Think of props as a parent handing a recipe to a child. The recipe tells the child what ingredients to use and how to cook, but the child can’t change the recipe itself. This way, the parent controls the instructions, and the child follows them exactly.

Parent Component
   │
   ├── passes props ──▶ Child Component
   │                     └─ uses props to render UI
   │
Props flow downwards only, like a one-way street.

Build-Up - 7 Steps

1

Foundation

What are props in React Native

Concept: Props are inputs to components that carry data from parent to child.

In React Native, props are like function arguments. You define a component and pass props to it when you use it. For example: function Greeting(props) { return Hello, {props.name}!; } Here, 'name' is a prop with value 'Alice'.

Result

The Greeting component shows: Hello, Alice!

Understanding props as inputs helps you see components as reusable pieces that change behavior based on what data they receive.

2

Foundation

How to pass props between components

Concept: Props are passed as attributes when using a component inside another.

When you use a child component inside a parent, you add props like HTML attributes: function Parent() { return ; } function Child(props) { return {props.message}; } This passes the string 'Hi there!' to Child as the 'message' prop.

Result

Child component displays: Hi there!

Knowing that props are passed like attributes makes it easy to customize child components without changing their code.

3

Intermediate

Props are read-only and immutable

🤔Before reading on: do you think a child component can change the props it receives? Commit to yes or no.

Concept: Props cannot be changed by the child component; they are read-only.

If a child tries to modify props, React Native will ignore it or cause errors. Instead, children should use state or callbacks to communicate changes back to parents. Example of wrong usage: function Child(props) { props.message = 'Changed'; // This is wrong return {props.message}; } Correct approach is to keep props unchanged.

Result

Props remain the same; child cannot alter them.

Understanding props immutability prevents bugs and enforces clear data flow from parent to child.

4

Intermediate

Passing functions as props for interaction

🤔Before reading on: can you pass a function as a prop to a child component? Commit to yes or no.

Concept: You can pass functions as props to let children notify parents about events or changes.

Parents can send a function as a prop: function Parent() { const showAlert = () => alert('Button pressed!'); return ; } function Child(props) { return

Result

Pressing the button triggers the alert from the parent.

Passing functions as props enables child-to-parent communication while keeping data flow clear and controlled.

5

Intermediate

Default props and prop types for safety

Concept: You can set default values for props and check their types to avoid errors.

React Native lets you define default props: Child.defaultProps = { message: 'Default message' }; Also, you can use PropTypes to check prop types: import PropTypes from 'prop-types'; Child.propTypes = { message: PropTypes.string }; This helps catch mistakes early.

Result

Child uses default message if none is passed; warnings appear if wrong types are used.

Using defaults and type checks makes your app more reliable and easier to debug.

6

Advanced

Props destructuring for cleaner code

🤔Before reading on: do you think you can extract props directly in the function parameters? Commit to yes or no.

Concept: Destructuring lets you pull out props directly for simpler code.

Instead of writing props.name, you can write: function Greeting({ name }) { return Hello, {name}!; } This makes code shorter and clearer, especially with many props.

Result

Component works the same but code is easier to read.

Destructuring props improves code clarity and reduces repetition, a common practice in professional React Native apps.

7

Expert

Props passing performance and memoization

🤔Before reading on: does passing new props always cause child re-rendering? Commit to yes or no.

Concept: Passing new props causes child components to re-render; memoization can optimize this.

React.memo lets you wrap a component to skip re-render if props don't change: const Child = React.memo(function Child({ value }) { return {value}; }); If parent passes the same value, Child won't re-render, improving performance in big apps.

Result

Child renders only when props actually change, saving resources.

Knowing how props affect rendering helps build fast apps and avoid unnecessary work.

Under the Hood

Props are passed as JavaScript objects from parent to child during rendering. React Native compares new props with previous ones to decide if a component should update. Props are stored in the component's internal instance and accessed via the 'props' object. Because props are immutable, React can optimize rendering by assuming unchanged props mean unchanged output.

Why designed this way?

Props were designed to enforce a clear, one-way data flow from parent to child. This avoids confusion and bugs from components changing shared data unpredictably. The immutability and one-way flow simplify debugging and reasoning about app state. Alternatives like two-way binding were rejected for their complexity and error-proneness.

Parent Component
  │
  │ passes props (immutable object)
  ▼
Child Component
  │
  │ reads props
  ▼
Renders UI based on props

React compares old and new props to decide re-rendering.

Myth Busters - 4 Common Misconceptions

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

Common Belief: Children can change props to update the parent component's data.

Reality: Props are read-only; children cannot modify them. To change data, children must use callbacks or state lifting.

Why it matters: Trying to change props directly causes bugs and breaks React's data flow, leading to unpredictable UI behavior.

Quick: does passing a new object as a prop always mean the child will re-render? Commit to yes or no.

Common Belief: If the prop value looks the same, the child won't re-render.

Reality: Passing a new object or array creates a new reference, causing re-render even if contents are identical.

Why it matters: Ignoring this causes performance issues because components re-render unnecessarily.

Quick: can default props fix all missing data problems? Commit to yes or no.

Common Belief: Default props always provide safe fallback values for any missing prop.

Reality: Default props only apply if the prop is undefined, not if it is null or other falsy values.

Why it matters: Relying on defaults without checking can cause unexpected UI or runtime errors.

Quick: does passing functions as props mean the child owns the function? Commit to yes or no.

Common Belief: The child component owns and controls the function passed as a prop.

Reality: The parent owns the function; the child just calls it. The function's logic and side effects belong to the parent.

Why it matters: Misunderstanding this leads to confusion about where state changes happen and who controls app behavior.

Expert Zone

1

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

2

React Native's reconciliation uses shallow comparison of props, so deeply nested objects can cause unexpected re-renders.

3

Using PropTypes is helpful during development but has no effect in production builds, so runtime checks require other tools.

When NOT to use

Props passing is not suitable for deeply nested or global state sharing; in such cases, use state management libraries like Redux or Context API for better scalability and performance.

Production Patterns

In production, props passing is combined with memoization (React.memo), hooks (useCallback), and state management to optimize rendering and maintain clear data flow in complex apps.

Connections

Function arguments in programming

Props are like function arguments passed to components.

Understanding props as arguments helps grasp component reusability and data flow, similar to how functions behave in any programming language.

One-way data binding in UI frameworks

Props implement one-way data flow from parent to child components.

Knowing one-way data binding clarifies why props are immutable and how React Native ensures predictable UI updates.

Parent-child communication in organizational teams

Props passing mirrors how managers give instructions to team members without micromanaging their internal work.

Seeing props as instructions from parent to child helps understand controlled data flow and separation of concerns in app design.

Common Pitfalls

#1 Trying to modify props inside a child component.

Wrong approach:

function Child(props) {
props.title = 'New Title'; // wrong
return {props.title};
}

Correct approach:

function Child(props) {
const [title, setTitle] = React.useState(props.title);
// update title using state, not props
return {title};
}

Root cause:

Misunderstanding that props are immutable and should not be changed by children.

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

Wrong approach:

function Parent() {
return ; // new object every render
}

Correct approach:

const data = React.useMemo(() => ({ count: 1 }), []);
function Parent() {
return ;
}

Root cause:

Not realizing that object references change even if contents are the same, triggering re-renders.

#3 Not providing default props leading to undefined values.

Wrong approach:

function Child(props) {
return {props.message};
}
// Used without message prop

Correct approach:

function Child(props) {
return {props.message};
}
Child.defaultProps = { message: 'Hello!' };

Root cause:

Forgetting to set defaults causes UI to break or show undefined.

Key Takeaways

Props passing is the main way to send data from parent to child components in React Native.

Props are read-only and cannot be changed by child components, ensuring clear and predictable data flow.

You can pass any data type as props, including functions, to enable interaction between components.

Using default props and prop types helps prevent bugs and makes components more robust.

Optimizing props passing with memoization improves app performance by avoiding unnecessary re-renders.