Why state and props drive component behavior in React Native - UI Rendering Impact

Component - Why state and props drive component behavior

This React Native component shows how state and props control what the user sees and how the app behaves.
State is like the component's own memory that can change over time. Props are like instructions from the parent component. Together, they decide what the component shows and how it reacts to user actions.

Widget Tree

App
├─ Greeting (props: name)
└─ Counter (state: count)
   ├─ Text (shows count)
   └─ Button (increments count)

The App component has two children: Greeting and Counter. Greeting receives a name as a prop and displays a message. Counter holds a number in its state and shows it with a Text widget and a Button to increase the number.

Render Trace - 4 Steps

Step 1: App

Step 2: Greeting

Step 3: Counter

Step 4: Button

State Change - Re-render

Trigger:User taps the Increase button

Before

count = 0

→

After

count = 1

Re-renders:Counter component and its children re-render to show updated count

UI Quiz - 3 Questions

What causes the Greeting component to show a different name?

A Changing the props passed to Greeting

B Changing the state inside Greeting

C Pressing the Increase button

D Restarting the app

Key Insight

In React Native, state holds data that can change inside a component, causing it to update its display. Props are fixed values passed from parent to child components. Together, they control what the user sees and how the app responds to actions, making the UI dynamic and interactive.