What happens if a component does not consume context? JavaScript const ThemeContext = React.createContext("light"); function ParentComponent() { return ( <ThemeContext.Provider value="dark"> <ChildComponent /> </ThemeContext.Provider> ); } function ChildComponent() { return <p>Child Component</p>; }

It will display "Child Component"

What will happen if you try to use useContext() inside a class component? JavaScript const ThemeContext = React.createContext("light"); class ChildComponent extends React.Component { render() { const theme = useContext(ThemeContext); // Incorrect usage return <p>{theme}</p>; } }

Error: Hooks can’t be called inside class components

It will work and return 'light'

It will work and return the current context value

Tutorials
Courses

Context API

Here we will cover all the basic concepts of ReactJS like Context API, Passing data and much more.

Last Updated :

Discuss

Comments

Question 1

What is the purpose of the `useContext` hook in React?

To manage component state
To access context values in functional components
To handle side effects in functional components
To create reusable custom hooks

Discuss it

Question 2

In React, when is it appropriate to use the `useContext` hook?

When managing local component state
When sharing data between components deeply nested in the component tree
When handling asynchronous actions
When rendering lists of data

Discuss it

Question 3

What does the `useContext` hook return?

The current value of the context
A function to update the context value
The context provider component
The context consumer component

Discuss it

Question 4

How do you create a context in React?

By using the `useState` hook
By defining a class component
By using the `createContext` function from React
By importing it from a third-party library like Redux

Discuss it

Question 5

Which component consumes the context value?

Context.Consumer
Context.Provider
useState()
useContext()

Discuss it

Question 6

Given the following code, what is the output of the useContext(UserContext) hook inside ChildComponent?

JavaScript

const UserContext = React.createContext();

const ParentComponent = () => {
    const user = { name: "John", age: 25 };

    return (
        <UserContext.Provider value={user}>
            <ChildComponent />
        </UserContext.Provider>
    );
};

const ChildComponent = () => {
    const user = useContext(UserContext);
    return <p>{user.name}</p>;
};

undefined
null
John
{} (empty object)

Discuss it

Question 7

Given the following code, what will be rendered in the ChildComponent?

JavaScript

const LanguageContext = React.createContext("English");

const ParentComponent = () => {
    return (
        <LanguageContext.Provider value="Spanish">
            <ChildComponent />
        </LanguageContext.Provider>
    );
};

const ChildComponent = () => {
    const language = useContext(LanguageContext);
    return <p>{language}</p>;
};

English
Spanish
undefined
null

Discuss it

Question 8

What is the output when the following code is executed?

JavaScript

const UserContext = createContext();

const App = () => {
    return (
        <UserContext.Provider value={{ name: "Alice" }}>
            <Child />
        </UserContext.Provider>
    );
};

const Child = () => {
    const { name } = useContext(UserContext);
    return <div>Hello, {name}!</div>;
};

Hello, Alice!
Hello, undefined!
Hello, null!
Hello!

Discuss it

Question 9

What happens if a component does not consume context?

JavaScript

const ThemeContext = React.createContext("light");

function ParentComponent() {
    return (
        <ThemeContext.Provider value="dark">
            <ChildComponent />
        </ThemeContext.Provider>
    );
}

function ChildComponent() {
    return <p>Child Component</p>;
}

It will display "dark"
It will display "light"
It will display "Child Component"
It will throw an error

Discuss it

Question 10

What will happen if you try to use useContext() inside a class component?

JavaScript

const ThemeContext = React.createContext("light");

class ChildComponent extends React.Component {
    render() {
        const theme = useContext(ThemeContext); // Incorrect usage
        return <p>{theme}</p>;
    }
}

It will work and return 'light'
It will work and return the current context value
Error: Hooks can’t be called inside class components
Error: useContext is undefined

Discuss it

Tags:

Web Technologies

ReactJS

React Quiz

There are 10 questions to complete.

Take a part in the ongoing discussion