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.

Practice

1. What is the main role of state in a React Native component?

easy

A. To define the component's layout structure

B. To pass data from a parent component to a child component

C. To style the component with CSS-like rules

D. To hold data that can change over time inside the component

Solution

1. Step 1: Understand what state represents

   State is used to store data that can change during the life of a component, like user input or toggles.

2. Step 2: Differentiate state from props

   Props are for passing data from parent to child, not for internal changes.

3. Final Answer:

   To hold data that can change over time inside the component -> Option D

4. Quick Check:

   State = internal changing data [OK]

Hint: State holds changing data inside component [OK]

Common Mistakes:

• Confusing state with props
• Thinking state is for styling
• Believing state is static

2. Which of the following is the correct way to define a state variable using React hooks in a functional component?

easy

A. var count = useState(0);

B. let count = useState(0);

C. const [count, setCount] = useState(0);

D. state = { count: 0 };

Solution

1. Step 1: Recall React hook syntax for state

   useState returns an array with the current value and a function to update it, usually destructured.

2. Step 2: Check each option

   const [count, setCount] = useState(0); correctly uses array destructuring with useState. Others misuse syntax or do not destructure.

3. Final Answer:

   const [count, setCount] = useState(0); -> Option C

4. Quick Check:

   useState with destructuring = correct [OK]

Hint: useState returns [value, setter] array [OK]

Common Mistakes:

• Not destructuring useState result
• Using var or let instead of const
• Assigning useState directly to a variable

3. Consider this React Native component code:

function Greeting(props) {
  return Hello, {props.name}!;
}

function App() {
  return ;
}

What will be displayed on the screen?

medium

A. Hello, Alice!

B. Hello, name!

C. Hello, !

D. Error: props not defined

Solution

1. Step 1: Understand how props work in this example

   The Greeting component receives name as a prop from App with value "Alice".

2. Step 2: Check the rendered output

   The component returns Hello, {props.name}! which becomes "Hello, Alice!" on screen.

3. Final Answer:

   Hello, Alice! -> Option A

4. Quick Check:

   Props pass data = Hello, Alice! [OK]

Hint: Props pass data from parent to child [OK]

Common Mistakes:

• Assuming props is undefined
• Ignoring the passed name value
• Confusing props with state

4. What is wrong with this React Native code snippet?

function Counter() {
  const [count, setCount] = useState(0);
  return (
    
      {count}
       count = count + 1} />
    
  );
}

medium

A. You cannot assign directly to the state variable; must use setCount

B. Button component does not have a title prop

C. useState is not imported

D. Text component cannot display numbers

Solution

1. Step 1: Identify how state updates should happen

   State variables are read-only; to change state, use the setter function like setCount.

2. Step 2: Check the onPress handler

   The code tries to assign directly to count, which is invalid and won't update the UI.

3. Final Answer:

   You cannot assign directly to the state variable; must use setCount -> Option A

4. Quick Check:

   State updates require setter function [OK]

Hint: Always use setter to update state, never assign directly [OK]

Common Mistakes:

• Trying to change state variable directly
• Forgetting to import useState
• Misusing Button props

5. You want a component to show a message that changes when a button is pressed. Which approach correctly uses state and props to achieve this?

function Message({ initial }) {
  const [text, setText] = useState(initial);
  return (
    
      {text}
       setText('Updated!')} />
    
  );
}

function App() {
  return ;
}

hard

A. This fails because Button cannot change state

B. This works because state holds the message and props provide the initial value

C. This fails because props cannot be used inside useState

D. This fails because Text cannot display state variables

Solution

1. Step 1: Analyze how props and state are used

   The component receives an initial message via props and stores it in state for changes.

2. Step 2: Check the button's onPress behavior

   Pressing the button calls setText to update the state, which updates the displayed message.

3. Final Answer:

   This works because state holds the message and props provide the initial value -> Option B

4. Quick Check:

   Props initialize state; state changes update UI [OK]

Hint: Use props for initial data, state for changes [OK]

Common Mistakes:

• Thinking props can change after initial render
• Trying to update props directly
• Assuming Button can't trigger state changes