Context API

Last Updated :
Discuss
Comments

Question 1

Which function is used to create a context in React?

  • React.useContext()

  • React.createContext()

  • React.createProvider()

  • 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 />;

};

  • undefined

  • Guest

  • null

  • Throws error

Question 3

Which components re-render when the context value changes?

<MyContext.Provider value={count}>

<Child1 />

<Child2 />

</MyContext.Provider>

  • Only Child1

  • Only Child2

  • Both Child1 and Child2 if they use useContext(MyContext)

  • None of them

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

Question 5

Which component consumes the context value?

  • Context.Consumer

  • Context.Provider

  • useState()

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



  • undefined

  • null

  • John

  • {} (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>;
};


  • English

  • Spanish

  • undefined

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


  • Hello, Alice!

  • Hello, undefined!

  • Hello, null!

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


  • It will display "dark"

  • It will display "light"

  • It will display "Child Component"

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


  • 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

There are 10 questions to complete.

Take a part in the ongoing discussion