Why is useContext() not returning the Provider value instead returning the initial value?

Question

import React, { useContext, createContext } from "react";

const messageContext = createContext("Hello");

const Context = () => {

    const message = useContext(messageContext);

    return (
        <messageContext.Provider value="Hi">

            <div style={{ marginTop: 1000 }}>{message}</div> 
            {/* Result: Hello */}

            <messageContext.Consumer>
                {message => {
                    return <div style={{ marginTop: 1000 }}>{message}</div>;
                }}
            </messageContext.Consumer>
            {/* Result: Hi */}

        </messageContext.Provider>
    );
};
export { Context };

I want to use the useContext() hook but it always returns the initial value which is "Hello".

Using <messageContext.Consumer> has no problem. It returns "Hi" but i want to use the useContext hook.

score 2 · Accepted Answer · answered Aug 07 '20 at 01:49

When you grab something from context, you get it from the nearest provider up the component tree. Since you called useContext inside the Context component, it will look for a provider higher up the tree than Context. None exists, so you get the default value instead. Your example with the messageContext.Consumer is inside a provider, so it can see that value.

There's little reason to consume a value in the exact same component where you provide it. In order to provide the value you presumably have some logic which results in a local variable, and you can reuse that same local variable for any other parts of the component that need it.

Why is useContext() not returning the Provider value instead returning the initial value?

1 Answers1