Context API in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this React Native Context usage?

Consider this React Native code using Context API. What text will be displayed on the screen?

React Native

import React, { createContext, useContext } from 'react';
import { Text, View } from 'react-native';

const ThemeContext = createContext('light');

function DisplayTheme() {
  const theme = useContext(ThemeContext);
  return <Text>{`Theme is ${theme}`}</Text>;
}

export default function App() {
  return (
    <ThemeContext.Provider value="dark">
      <View>
        <DisplayTheme />
      </View>
    </ThemeContext.Provider>
  );
}

A Theme is light

B Theme is undefined

C Theme is dark

D Error: Cannot read property 'Provider' of undefined

💡 Hint

Look at the value passed to ThemeContext.Provider and what useContext returns.

The ThemeContext.Provider sets the context value to "dark". The DisplayTheme component uses useContext to read this value and displays it. So the output is "Theme is dark".

❓ state_output

intermediate

What is the value of count after clicking the button twice?

In this React Native component using Context API, what will be the value of count after pressing the button two times?

React Native

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

const CountContext = createContext();

function Counter() {
  const { count, setCount } = useContext(CountContext);
  return (
    <View>
      <Text>{`Count: ${count}`}</Text>
      <Button title="Increment" onPress={() => setCount(count + 1)} />
    </View>
  );
}

export default function App() {
  const [count, setCount] = useState(0);
  return (
    <CountContext.Provider value={{ count, setCount }}>
      <Counter />
    </CountContext.Provider>
  );
}

A Count: 1

B Count: 2

C Count: 0

D Error: setCount is not a function

💡 Hint

Each button press increases count by 1. Starting from 0, two presses add 2.

The initial count is 0. Each press calls setCount(count + 1), increasing count by 1. After two presses, count becomes 2.

📝 Syntax

advanced

Which option correctly creates and uses a Context with default value?

Which code snippet correctly creates a React Native Context with a default value and consumes it in a component?

A

const UserContext = createContext();
function User() {
  const user = useContext();
  return <Text>{`User: ${user}`}</Text>;
}

B

const UserContext = createContext('guest');
function User() {
  const user = useContext(UserContext.Provider);
  return <Text>{`User: ${user}`}</Text>;
}

C

const UserContext = createContext('guest');
function User() {
  const user = UserContext.useContext();
  return <Text>{`User: ${user}`}</Text>;
}

D

const UserContext = createContext('guest');
function User() {
  const user = useContext(UserContext);
  return <Text>{`User: ${user}`}</Text>;
}

💡 Hint

Remember how to call useContext with the context object.

Option D correctly creates a context with default value 'guest' and uses useContext(UserContext) to consume it. Other options misuse useContext or context object.

🔧 Debug

advanced

What error does this Context usage cause?

What error will this React Native code produce when running?

React Native

import React, { createContext, useContext } from 'react';
import { Text, View } from 'react-native';

const DataContext = createContext();

function ShowData() {
  const data = useContext(DataContext);
  return <Text>{data.message}</Text>;
}

export default function App() {
  return (
    <View>
      <ShowData />
    </View>
  );
}

A TypeError: Cannot read property 'message' of undefined

B SyntaxError: Unexpected token

C ReferenceError: DataContext is not defined

D No error, displays empty text

💡 Hint

Check what value useContext(DataContext) returns when no Provider is used.

Since DataContext.Provider is not used, useContext(DataContext) returns undefined. Accessing data.message causes a TypeError.

🧠 Conceptual

expert

Why use Context API instead of prop drilling in React Native?

Which is the best explanation for why developers use Context API instead of passing props through many components?

A Context API allows sharing data globally without passing props through every level, reducing code complexity and improving maintainability.

B Context API automatically updates the UI without needing state or props, making components stateless.

C Context API replaces Redux and other state management libraries entirely for all apps.

D Context API forces components to re-render less often by caching props internally.

💡 Hint

Think about how data is passed in component trees and what problems prop drilling causes.

Context API helps avoid passing props through many layers (prop drilling), making code cleaner and easier to maintain. It does not replace all state management or automatically cache props.