Lifting state up in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What is the output when lifting state up in this React Native example?

Consider two sibling components that share a counter state lifted up to their parent. What will be displayed when you press the increment button in one sibling?

React Native

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

function SiblingA({ count, onIncrement }) {
  return <Button title={`Increment A (${count})`} onPress={onIncrement} />;
}

function SiblingB({ count }) {
  return <Text>Count in B: {count}</Text>;
}

export default function Parent() {
  const [count, setCount] = useState(0);
  return (
    <View>
      <SiblingA count={count} onIncrement={() => setCount(count + 1)} />
      <SiblingB count={count} />
    </View>
  );
}

A Pressing increment in SiblingA updates only the button label in SiblingA, SiblingB remains unchanged.

B Pressing increment in SiblingA updates only SiblingB text, button label stays the same.

C Pressing increment in SiblingA updates count in both SiblingA button label and SiblingB text.

D Pressing increment in SiblingA does not update any displayed count.

💡 Hint

Think about where the state is stored and which components receive it as props.

The state count is stored in the parent component. Both siblings receive count as a prop. When the button in SiblingA is pressed, it calls onIncrement which updates the parent's state. This causes both siblings to re-render with the new count value.

🧠 Conceptual

intermediate

Why do we lift state up in React Native?

What is the main reason to lift state up to a common parent component in React Native?

A To share state between sibling components that need to stay in sync.

B To make each component manage its own state independently.

C To avoid passing props between components.

D To improve the app's performance by reducing renders.

💡 Hint

Think about components that need to show the same data or react to the same changes.

Lifting state up allows sibling components to share the same state from their common parent. This keeps their data consistent and synchronized.

❓ lifecycle

advanced

What happens to child components when lifted state changes?

In React Native, when a parent component's state changes due to lifting state up, what happens to its child components?

A All child components re-render with updated props reflecting the new state.

B Only the child component that triggered the state change re-renders.

C Child components do not re-render unless their own state changes.

D The parent re-renders but child components remain unchanged.

💡 Hint

Remember how React updates components when props change.

When the parent's state changes, React re-renders the parent and all children receiving props from that state. This updates the UI to reflect the new data.

🔧 Debug

advanced

Why doesn't the child's useEffect log count changes?

Given this React Native code snippet, why does Child's console.log not show updates to count when the button in Parent is pressed?

React Native

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

function Parent() {
  const [count, setCount] = useState(0);
  return (
    <View>
      <Button title="Increment" onPress={() => setCount(count + 1)} />
      <Child count={count} />
    </View>
  );
}

function Child({ count }) {
  useEffect(() => {
    console.log('Count changed:', count);
  }, []);
  return <Text>{count}</Text>;
}

A The Parent does not pass the count prop correctly to Child.

B The Child's useEffect has an empty dependency array, so it does not react to count changes.

C The setCount function is not updating the state.

D The Child component is not rendered inside Parent.

💡 Hint

Look at the dependencies of the useEffect hook in Child.

The Child component's useEffect runs only once on mount because its dependency array is empty. Although the count prop changes and the component re-renders, the effect does not run again to log the new count.

❓ navigation

expert

How does lifting state up affect navigation state in React Native apps?

In a React Native app using React Navigation, if you lift state up to a parent component that wraps multiple screens, what is a key effect on navigation?

A The lifted state resets every time you navigate to a new screen.

B Navigation becomes slower because state is duplicated in each screen.

C You cannot lift state up when using React Navigation.

D The lifted state persists across screen navigations, allowing shared data between screens.

💡 Hint

Think about where the state lives relative to the navigation container.

Lifting state up to a parent component that wraps multiple screens keeps the state alive while navigating. This allows screens to share and persist data without resetting.