Why state and props drive component behavior in React Native - Why It Works This Way

Overview - Why state and props drive component behavior

What is it?

In React Native, components are the building blocks of the app's user interface. State and props are two key ways components get data and decide what to show on the screen. Props are like instructions given from a parent component, while state is data that a component keeps and can change over time. Together, they control how components look and behave.

Why it matters

Without state and props, components would be static and unable to respond to user actions or data changes. This would make apps boring and uninteractive. State and props let apps update smoothly and show the right information at the right time, making the app feel alive and responsive.

Where it fits

Before learning this, you should understand what React Native components are and how to create simple ones. After this, you can learn about hooks like useState and useEffect to manage state more powerfully and about component lifecycle for advanced behavior.

Mental Model

Core Idea

State holds a component's own changing data, while props pass data from parent to child, and together they decide what the component shows and how it acts.

Think of it like...

Think of a component like a puppet. Props are the strings controlled by the puppeteer (parent), telling the puppet what to do. State is the puppet's own mood or energy that can change on its own, affecting how it moves.

Component
├─ Props (from parent) ──▶ Controls appearance and behavior
└─ State (internal data) ──▶ Changes over time, triggers updates

Build-Up - 6 Steps

1

Foundation

Understanding React Native Components

Concept: Learn what a component is and how it forms the UI.

A React Native component is a function or class that returns UI elements. It can show text, buttons, images, and more. Components can be simple or complex, and they build the app's screen piece by piece.

Result

You can create a basic component that shows static content on the screen.

Knowing what a component is helps you see how state and props fit as tools to make components dynamic and interactive.

2

Foundation

What Are Props in Components

Concept: Props are inputs given to a component from its parent to customize it.

Props are like parameters you pass to a function. For example, a Button component might get a prop called 'title' to show different text. Props are read-only inside the component and cannot be changed there.

Result

You can make one component behave differently by passing different props to it.

Understanding props shows how components can be reused with different data without changing their code.

3

Intermediate

Introducing State for Dynamic Data

🤔Before reading on: do you think props can be changed inside a component? Commit to yes or no.

Concept: State is data a component owns and can change to update the UI.

Unlike props, state lives inside the component and can be changed with functions like setState or useState hook. When state changes, the component redraws to show the new data. For example, a counter button increases its number using state.

Result

You can create interactive components that respond to user actions by changing state.

Knowing state lets you build components that react to events and update themselves without needing new props.

4

Intermediate

How Props and State Work Together

🤔Before reading on: do you think a component can change its props directly? Commit to yes or no.

Concept: Props provide data from outside, state holds internal data, and both combine to control the UI.

A parent component passes props to a child. The child can use props and also keep its own state. For example, a list component gets items as props but tracks which item is selected in state. Changes in either cause the UI to update.

Result

Components become flexible and interactive by mixing props and state.

Understanding this relationship clarifies how data flows in React Native apps and how components stay in sync.

5

Advanced

State and Props Trigger Re-rendering

🤔Before reading on: do you think changing state or props always redraws the entire app? Commit to yes or no.

Concept: Changing state or props causes React Native to re-run the component function and update the UI efficiently.

When state or props change, React Native compares the new UI with the old one and updates only what changed. This process is called reconciliation. It keeps apps fast and smooth even with many components.

Result

UI updates happen automatically and efficiently when data changes.

Knowing how re-rendering works helps you write components that update correctly and perform well.

6

Expert

Avoiding Common State and Props Pitfalls

🤔Before reading on: do you think mutating state directly is safe in React Native? Commit to yes or no.

Concept: State must be treated as immutable, and props should never be changed inside a component to avoid bugs.

Directly changing state variables without setState or useState setter breaks React's update system. Similarly, trying to modify props inside a child component causes errors or unexpected behavior. Instead, always create new state objects and treat props as read-only.

Result

Your app updates reliably without strange bugs or UI glitches.

Understanding immutability and data flow rules prevents subtle bugs and makes your app stable and maintainable.

Under the Hood

React Native keeps a virtual version of the UI called the Virtual DOM. When state or props change, React Native creates a new virtual UI tree by running the component function again. It then compares this new tree with the previous one to find differences. Only the changed parts are updated on the real screen, making updates fast and efficient.

Why designed this way?

This design separates data (state and props) from UI rendering, allowing React Native to optimize updates and avoid redrawing the whole screen unnecessarily. It also enforces a clear data flow from parents to children, reducing bugs and making apps easier to reason about.

App
├─ Parent Component
│  ├─ Passes Props ──▶ Child Component
│  └─ Holds State
└─ React Native
   ├─ Runs Component Function on State/Props Change
   ├─ Creates Virtual UI Tree
   ├─ Compares with Previous Tree
   └─ Updates Real UI Efficiently

Myth Busters - 4 Common Misconceptions

Quick: Can a component change its own props? Commit to yes or no.

Common Belief: Props can be changed inside the component like state.

Reality: Props are read-only inside a component and cannot be changed there; only the parent can change them.

Why it matters: Trying to change props inside a component breaks React's data flow and causes bugs or warnings.

Quick: Does changing state always update the entire app UI? Commit to yes or no.

Common Belief: Changing state causes the whole app to re-render, which is slow.

Reality: Only the component with changed state and its children re-render; React Native updates efficiently using the virtual DOM.

Why it matters: Believing this can make developers avoid state changes and build static apps, missing React Native's power.

Quick: Is it safe to modify state variables directly without setState or useState setter? Commit to yes or no.

Common Belief: You can change state variables directly and React Native will notice.

Reality: Direct mutation does not trigger re-rendering; you must use setState or the setter function to update state properly.

Why it matters: Direct mutation leads to UI not updating and confusing bugs.

Quick: Are props and state the same thing? Commit to yes or no.

Common Belief: Props and state are interchangeable ways to store data in components.

Reality: Props come from parents and are read-only; state is internal and can change over time.

Why it matters: Confusing them leads to wrong code structure and harder-to-maintain apps.

Expert Zone

1

State updates may be asynchronous and batched, so relying on current state immediately after setState can cause bugs.

2

Props can be functions, allowing parents to control child behavior indirectly, enabling powerful patterns like callbacks.

3

Using immutable data structures for state helps React Native detect changes efficiently and avoid unnecessary re-renders.

When NOT to use

Avoid using local state for data that must be shared across many components; instead, use global state management tools like Redux or Context API. Also, props are not suitable for data that changes inside a component; use state instead.

Production Patterns

In real apps, components receive props from navigation or global stores and manage local UI state internally. Developers use hooks like useState and useEffect to handle state and side effects, and pass callbacks via props for user interactions.

Connections

Flux Architecture

Builds on the idea of unidirectional data flow using props and state.

Understanding state and props helps grasp how Flux enforces predictable data changes in large apps.

Functional Programming

Shares the principle of immutability and pure functions in managing state.

Knowing state immutability in React Native connects to functional programming concepts that improve code reliability.

Human Decision Making

Similar to how people react to external instructions (props) and internal feelings (state) to decide actions.

This cross-domain link shows how components mimic natural decision processes, making UI behavior intuitive.

Common Pitfalls

#1 Trying to modify props inside a component.

Wrong approach:

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

Correct approach:

function MyComponent(props) {
return {props.title};
}

Root cause:

Misunderstanding that props are read-only and controlled by the parent.

#2 Mutating state directly instead of using setter.

Wrong approach:

const [count, setCount] = useState(0);
count = count + 1; // wrong

Correct approach:

const [count, setCount] = useState(0);
setCount(count + 1); // correct

Root cause:

Not knowing that React Native tracks state changes only via setter functions.

#3 Confusing when to use state vs props.

Wrong approach:

function Child() {
const [data, setData] = useState();
// tries to get data from parent but uses state instead of props
}

Correct approach:

function Child(props) {
// uses props.data passed from parent
}

Root cause:

Lack of clarity on data ownership and flow in React Native.

Key Takeaways

State and props are the two main ways React Native components get and manage data.

Props come from parent components and are read-only inside the child component.

State is internal to a component and can change over time to update the UI.

Changing state or props causes React Native to re-render components efficiently.

Treat state as immutable and never modify props inside a component to avoid bugs.