Which components re-render when the context value changes?<MyContext.Provider value={count}> <Child1 /> <Child2 /></MyContext.Provider>

Both Child1 and Child2 if they use useContext(MyContext)

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

Earn Google Badge

Full Stack Dev CourseExplore

Context API

Last Updated :

Discuss

Comments

Question 1

Which function is used to create a context in React?

A
React.useContext()
B
React.createContext()
C
React.createProvider()
D
React.useState()

Question 2

What will the following render?

const MyContext = React.createContext("Guest");

const Child = () => {

const user = useContext(MyContext);

return <h3>{user}</h3>;

};

const App = () => {

return <Child />;

};

A
undefined
B
Guest
C
null
D
Throws error

Question 3

Which components re-render when the context value changes?

<MyContext.Provider value={count}>

</MyContext.Provider>

A
Only Child1
B
Only Child2
C
Both Child1 and Child2 if they use useContext(MyContext)
D
None of them

Question 4

How do you create a context in React?

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

Question 5

Which component consumes the context value?

A
Context.Consumer
B
Context.Provider
C
useState()
D
useContext()

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>;
};

A
undefined
B
null
C
John
D
{} (empty object)

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>;
};

A
English
B
Spanish
C
undefined
D
null

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>;
};

A
Hello, Alice!
B
Hello, undefined!
C
Hello, null!
D
Hello!

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>;
}

A
It will display "dark"
B
It will display "light"
C
It will display "Child Component"
D
It will throw an error

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>;
    }
}

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

Tags:

Web Technologies

ReactJS

React Quiz

There are 10 questions to complete.

Take a part in the ongoing discussion