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.