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.

Practice

1. What is the main purpose of lifting state up in React Native?

easy

A. To create multiple independent states in child components

B. To move shared state to a common parent component so children can access it

C. To store state only inside child components without sharing

D. To avoid using props for data sharing between components

Solution

1. Step 1: Understand the concept of shared state

   Lifting state up means moving state to a common parent so multiple children can use it.

2. Step 2: Identify the purpose of lifting state up

   This helps keep data consistent and allows children to communicate through the parent.

3. Final Answer:

   To move shared state to a common parent component so children can access it -> Option B

4. Quick Check:

   Lifting state up = shared parent state [OK]

Hint: Shared data lives in parent to sync children easily [OK]

Common Mistakes:

• Thinking each child should have its own separate state
• Believing lifting state up removes the need for props
• Confusing lifting state up with component styling

2. Which of the following is the correct way to pass a state update function from a parent to a child component in React Native?

easy

A.

B.

C.

D.

Solution

1. Step 1: Identify what to pass as prop

   The parent passes a function to update state, not the state value or setState method directly.

2. Step 2: Choose the correct syntax

   Passing updateStateFunction as a prop is correct to allow child to call it.

3. Final Answer:

   <Child updateState={updateStateFunction} /> -> Option C

4. Quick Check:

   Pass update function as prop = <Child updateState={updateStateFunction} /> [OK]

Hint: Pass functions, not state or setState directly [OK]

Common Mistakes:

• Passing the entire state object instead of a function
• Passing setState method directly without binding
• Passing state value instead of update function

3. Given the code below, what will be the output when the button in Child is pressed?

function Parent() {
  const [count, setCount] = React.useState(0);
  return (
    <>
      <Child count={count} increment={() => setCount(count + 1)} />
      <Text>Count: {count}</Text>
    </>
  );
}

function Child({ count, increment }) {
  return <Button title={`Add`} onPress={increment} />;
}

medium

A. The app will crash due to incorrect state update

B. The count will always stay 0 regardless of button presses

C. The button will not respond to presses

D. The count displayed will increase by 1 each time the button is pressed

Solution

1. Step 1: Understand state and props flow

   The Parent holds the count state and passes it plus an increment function to Child.

2. Step 2: Analyze what happens on button press

   Pressing the button calls increment, which updates count by adding 1.

3. Final Answer:

   The count displayed will increase by 1 each time the button is pressed -> Option D

4. Quick Check:

   State update via lifted function increments count [OK]

Hint: Button calls parent's update function to increase count [OK]

Common Mistakes:

• Thinking count won't update because it's passed as prop
• Assuming setCount is not called correctly
• Confusing local and lifted state

4. Identify the error in this lifting state up example:

function Parent() {
  const [text, setText] = React.useState('');
  return <Child text={text} setText={setText()} />;
}

function Child({ text, setText }) {
  return <TextInput value={text} onChangeText={setText} />;
}

medium

A. setText is called immediately instead of passing the function

B. text state is not initialized properly

C. Child component should not receive setText as prop

D. TextInput should not use onChangeText prop

Solution

1. Step 1: Check how setText is passed as prop

   In Parent, setText={setText()} calls setText immediately instead of passing the function.

2. Step 2: Correct way to pass setText

   It should be setText={setText} to pass the function reference.

3. Final Answer:

   setText is called immediately instead of passing the function -> Option A

4. Quick Check:

   Pass function reference, not call it [OK]

Hint: Pass function, don't call it when passing as prop [OK]

Common Mistakes:

• Calling setState function instead of passing it
• Confusing state value with update function
• Ignoring React hooks rules

5. You have two sibling components, TemperatureInputCelsius and TemperatureInputFahrenheit, that need to share temperature data. How should you use lifting state up to keep both inputs in sync?

hard

A. Move the temperature state to their common parent and pass value and update functions as props

B. Keep separate states in each sibling and update independently

C. Store temperature state only in one sibling and let the other read it directly

D. Use global variables outside React components to share temperature

Solution

1. Step 1: Identify the need for shared state

   Both siblings need to reflect the same temperature, so state must be shared.

2. Step 2: Apply lifting state up

   Move temperature state to their common parent and pass it plus update functions down as props.

3. Step 3: Avoid incorrect approaches

   Separate states cause inconsistency; global variables break React's data flow.

4. Final Answer:

   Move the temperature state to their common parent and pass value and update functions as props -> Option A

5. Quick Check:

   Lift shared state to parent for syncing siblings [OK]

Hint: Parent holds shared state; siblings get props and update functions [OK]

Common Mistakes:

• Keeping separate states causing out-of-sync inputs
• Trying to share state via global variables
• Passing state only to one sibling