Why state and props drive component behavior in React Native - Challenge Your Understanding

Challenge - 5 Problems

❓ ui_behavior

intermediate

What happens when a React Native component's state changes?

Consider a React Native functional component using useState. What is the immediate effect on the UI when the state is updated?

React Native

import React, { useState } from 'react';
import { Text, Button, View } from 'react-native';

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <View>
      <Text>{count}</Text>
      <Button title="Add" onPress={() => setCount(count + 1)} />
    </View>
  );
}

A The UI re-renders showing the updated count value.

B The UI freezes until the app restarts.

C Nothing changes on the screen until the user navigates away and back.

D The app crashes due to state mutation.

💡 Hint

Think about what React Native does when state changes inside a component.

When state changes, React Native re-renders the component to reflect the new state in the UI immediately.

🧠 Conceptual

intermediate

How do props affect a React Native component?

If a parent component passes different props to a child component, what happens to the child component?

React Native

function Greeting({ name }) {
  return <Text>Hello, {name}!</Text>;
}

// Parent component changes the name prop from 'Alice' to 'Bob'

A The child component ignores the new props and keeps the old name.

B The child component re-renders with the new name displayed.

C The child component crashes due to prop change.

D The child component unmounts and does not reappear.

💡 Hint

Props are how parents tell children what to show.

When props change, React Native re-renders the child component to show the updated data.

❓ lifecycle

advanced

What happens if you update state directly instead of using setState in React Native?

Given a state variable declared with useState, what is the effect of modifying the state variable directly instead of calling the setter function?

React Native

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

// Incorrect update:
// count = count + 1; // This line would cause an error because count is a constant

// Correct update:
setCount(count + 1);

A The UI does not update because React does not detect the change.

B The UI updates immediately as expected.

C React throws a runtime error for direct state mutation.

D The app reloads automatically.

💡 Hint

React only re-renders when you use the setter function.

Directly changing the state variable does not notify React, so no re-render happens.

❓ navigation

advanced

How do props affect navigation between screens in React Native?

When navigating to a new screen and passing props, how does the receiving screen access those props?

React Native

navigation.navigate('Profile', { userId: 42 });

// In Profile screen component
function Profile({ route }) {
  const { userId } = route.params;
  return <Text>User ID: {userId}</Text>;
}

A Props must be stored in global state to be accessed.

B Props are accessed via this.props directly.

C Props are not accessible on the new screen.

D Props are accessed via route.params inside the screen component.

💡 Hint

React Navigation passes props through route parameters.

Props passed during navigation are available in route.params on the destination screen.

🔧 Debug

expert

Why does this React Native component not update the UI when props change?

Look at this component. It receives a prop but does not update the displayed value when the prop changes. Why?

React Native

function Display({ value }) {
  const [displayValue, setDisplayValue] = React.useState(value);
  return <Text>{displayValue}</Text>;
}

// Parent changes value prop from 'Hello' to 'World'

A The component updates automatically without extra code.

B The component should use useEffect to update state when props change.

C The component sets state only once on mount and ignores prop changes.

D The component crashes because state and props conflict.

💡 Hint

State initialized from props does not update automatically.

useState sets initial state only once; later prop changes do not update state unless handled explicitly.

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