useContext() react hook doesn't return the correct value

Question

I wrap my Home component in the following layout:

export const DataContext = React.createContext({});

const Layout: React.FunctionComponent = (props) => {
  const data = {title: "abc", description: "def"};
  
  return (
    <DataContext.Provider value={data}>
        {props.children}
    </DataContext.Provider>
  );
};

I would like to use useContext hook in my Home component, but it returns an empty object:

const Home: React.FunctionComponent = () => {
  const content = React.useContext(DataContext);

  return (
    <Layout>
       // content data goes here
    </Layout>
  );
};

I suspected that this is because I define context variable outside of Layout wrapper, which contains context provider, so it falls back to the default value of the context that I defined (an empty object). However, even if I console log the useContext hook inside the layout provider, it also returns an empty object:

const Home: React.FunctionComponent = () => {
  const content = React.useContext(DataContext);

  return (
    <Layout>
      {console.log(React.useContext(DataContext))}
    </Layout>
  );
};

Any idea why?

Please make those Stack Snippets runnable (here's how), or just use code blocks. Don't use Stack Snippets as code blocks. — T.J. Crowder
– T.J. Crowder, Commented Feb 19, 2019 at 18:34

Tholle · Accepted Answer · 2019-02-19 18:42:48Z

useContext will get the value from the Provider closest to it up the tree. Your Layout is inside Home, which will make the Provider below it in the tree.

You could make Home a child to Layout instead to see it working.

Example

const DataContext = React.createContext({});

const Layout = props => {
  const data = { title: "abc", description: "def" };

  return (
    <DataContext.Provider value={data}>{props.children}</DataContext.Provider>
  );
};

const Home = () => {
  const content = React.useContext(DataContext);

  return <div>{JSON.stringify(content)}</div>;
};

function App() {
  return (
    <Layout>
      <Home />
    </Layout>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root"></div>

Shubham Khatri · Accepted Answer · 2019-02-19 18:50:34Z

3

Your Hypothesis that useContext provides an empty object when used outside of Layout is indeed correct. If there is no Provider in the hierarchy then useContext returns the default value provided to React.createContext

Also you can only use React hooks at the start of functional components and not within rendering. So if you write your code like below you will be able to correctly log context value

const Content: React.FunctionComponent = () => {
   const content = React.useContext(DataContext);
   console.log(content);
   return (
      <div>Content</div>
   )
}
const Home: React.FunctionComponent = () => {

  return (
    <Layout>
      <Content />
    </Layout>
  );
};

Working demo

edited Feb 19, 2019 at 18:50

answered Feb 19, 2019 at 18:36

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

Comments

Yogesh Singh Rajpurohit · Accepted Answer · 2021-05-14 04:33:30Z

1

Well, I was facing same kind of issue and after a lot of googling I find out that whenever our page refreshes it set the context value to its default.

So if you are using tag or somthing like that for navigation or something which refreshes the page then use tag from react-router-dom or instead.

This works for me.

answered May 14, 2021 at 4:33

Yogesh Singh Rajpurohit

411 silver badge2 bronze badges

Collectives™ on Stack Overflow

useContext() react hook doesn't return the correct value

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related