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.

Practice

1. What is the main purpose of React Native's Context API?

easy

A. To share data easily across many components without passing props manually

B. To style components with CSS

C. To handle navigation between screens

D. To fetch data from a server

Solution

1. Step 1: Understand Context API's role

   Context API is designed to share data globally in a React app without passing props through every level.

2. Step 2: Compare options

   Only To share data easily across many components without passing props manually describes this purpose. Others relate to styling, navigation, or data fetching, which are unrelated.

3. Final Answer:

   To share data easily across many components without passing props manually -> Option A

4. Quick Check:

   Context API = Share data easily [OK]

Hint: Context API shares data without prop drilling [OK]

Common Mistakes:

• Confusing Context API with styling or navigation
• Thinking it fetches data from servers
• Believing it replaces all props usage

2. Which of the following is the correct way to create a context in React Native?

easy

A. const MyContext = React.useContext();

B. const MyContext = createContext();

C. const MyContext = React.createContext();

D. const MyContext = new Context();

Solution

1. Step 1: Recall correct syntax for creating context

   React Native uses React.createContext() to create a new context object.

2. Step 2: Analyze options

   const MyContext = React.createContext(); uses the full correct syntax. const MyContext = createContext(); misses React prefix. new Context(); uses invalid constructor. React.useContext(); calls useContext which is a hook, not for creation.

3. Final Answer:

   const MyContext = React.createContext(); -> Option C

4. Quick Check:

   Create context = React.createContext() [OK]

Hint: Use React.createContext() to create context [OK]

Common Mistakes:

• Omitting React prefix
• Using new Context() which doesn't exist
• Confusing useContext hook with createContext

3. Given this code snippet, what will be the output displayed by ChildComponent?

const MyContext = React.createContext('Default');

function Parent() {
  return (
    
      
    
  );
}

function ChildComponent() {
  const value = React.useContext(MyContext);
  return {value};
}

medium

A. Default

B. Error: useContext called outside provider

C. undefined

D. Hello

Solution

1. Step 1: Identify the Provider value

   The sets the value to "Hello" for all children inside it.

2. Step 2: Check useContext usage in ChildComponent

   ChildComponent uses React.useContext(MyContext) which reads the nearest Provider's value, which is "Hello".

3. Final Answer:

   Hello -> Option D

4. Quick Check:

   useContext reads Provider value = Hello [OK]

Hint: useContext reads nearest Provider value [OK]

Common Mistakes:

• Thinking default value is used when Provider exists
• Assuming undefined if value is string
• Confusing error with missing Provider

4. What is wrong with this React Native Context usage?

const MyContext = React.createContext();

function Parent() {
  return (
    
      
    
  );
}

function Child() {
  const value = React.useContext();
  return {value};
}

medium

A. createContext requires an initial value

B. useContext is called without passing the context object

C. Provider is missing a value prop

D. Child component should not use useContext

Solution

1. Step 1: Check useContext call in Child

   useContext must be called with the context object as argument, e.g., React.useContext(MyContext).

2. Step 2: Verify other parts

   Provider has a value prop "Hi" which is correct. createContext can be called without initial value (undefined default). Child can use useContext.

3. Final Answer:

   useContext is called without passing the context object -> Option B

4. Quick Check:

   useContext needs context argument [OK]

Hint: Always pass context to useContext() [OK]

Common Mistakes:

• Calling useContext() with no arguments
• Thinking createContext must have initial value
• Believing Provider can omit value prop

5. You want to share a user object across multiple nested components without passing props. Which steps correctly use Context API to achieve this? A) Create context with React.createContext(), wrap components with Provider passing user as value, use useContext in children. B) Pass user as props to every component manually. C) Use useState in every component to store user. D) Use React.createContext() but do not wrap components with Provider.

hard

A. Create context, wrap with Provider passing user, use useContext in children

B. Pass user as props manually to each component

C. Use useState in every component to store user

D. Create context but do not wrap with Provider

Solution

1. Step 1: Identify correct Context API usage

   To share data globally, create context, wrap components with Provider passing data, and consume with useContext.

2. Step 2: Eliminate incorrect options

   B passes props manually, not using Context API. C duplicates state unnecessarily. D creates context but no Provider means default or undefined value.

3. Final Answer:

   Create context, wrap with Provider passing user, use useContext in children -> Option A

4. Quick Check:

   Context API = create + Provider + useContext [OK]

Hint: Use createContext + Provider + useContext to share data [OK]

Common Mistakes:

• Skipping Provider wrapping
• Passing props manually instead of using context
• Using useState in every component unnecessarily