DEV Community

Cover image for Gatsby.js Global State w/ React Context & useReducer
Hunter Chang
Hunter Chang

Posted on • Updated on • Originally published at codebushi.com

Gatsby.js Global State w/ React Context & useReducer

This article was originally published at codebushi.com

In this video, we'll explore Global State and how to make it persist between pages when working with a Gatsby.js website. We'll first create our global state using React's useReducer hook and Context API. I'll then show you how to incorporate our global state with Gatsby and their wrapRootElement functions.

TLDR: In order to get state to persist between pages with Gatsby, you'll need to add wrapRootElement to both gatsby-ssr.js and gatsby-browser.js. Do not try to wrap it around any <Layout> components.

*Edit: The part about gatsby-ssr.js in the video, I left out the .default when requiring GlobalContextProvider, it should look like this:

// gatsby-ssr.js
const React = require('react');
const GlobalContextProvider = require('./src/context/GlobalContextProvider').default;

exports.wrapRootElement = ({ element }) => {
  return <GlobalContextProvider>{element}</GlobalContextProvider>;
};
Enter fullscreen mode Exit fullscreen mode

If you like the YouTube content, please support it by subscribing to the channel!

GitHub Repo: https://github.com/codebushi/gatsby-global-state

Top comments (14)

Collapse
 
kowalus23 profile image
Patryk Kowalski

Great Job, it helped me!, but have one more question, since i'm kinda new with React and global states, what about if i would like to add some state from Component X to this global one? on this tutorial we have hardcoded values that we switch between

Collapse
 
kowalus23 profile image
Patryk Kowalski

actually wans't that hard i found solution :) changed hardcoded ternary operator to dynamic state with initial [], then i push to the array what ever i wanted to, and now i store all my neccessary stuff in array, also you can do that with object, and deeper deeper stuff, or do seperate cases like in redux, for every single thing you want to do, instead o keeping one huge object with all states inside.

The question is, is the performance good? because i guess that every single component change/route in the project will rerender this state, in redux it's rerendered when it's used

Collapse
 
syedkamal3262 profile image
Syed Kamal

wrapping a root element in Gatsby is something i am searching from a long time ! thank you

Collapse
 
makingthings profile image
James Grubb

A great walk through, thank you

Collapse
 
changoman profile image
Hunter Chang

Thanks!

Collapse
 
vmuthabuku profile image
vincent muthabuku

Exactly what I needed good job Chang

Collapse
 
changoman profile image
Hunter Chang

Thank you!

Collapse
 
anthonyg56 profile image
anthonyg56

Simple and easy to use, thank you!

Collapse
 
ovchinnikovdev profile image
Konstantin

Great one!

Collapse
 
rolandkrinner profile image
Roland-Krinner

Well explained, this really helped me!

Collapse
 
changoman profile image
Hunter Chang

Thanks! Glad you enjoyed it.

Collapse
 
gussalvador profile image
Andy Boehm

Hmm...this isn't working for me for some reason. I've setup gatsby-browser and gatsby-ssr but my state does not persist. Has anything changed recently I should be aware of?

Collapse
 
gussalvador profile image
Andy Boehm • Edited

I figured this out. Manually changing the URL or using href was the problem. I needed to navigate using Link to or navigate helper function so the state is persisted.

Collapse
 
bnjmnmyers profile image
Benjamin Myers

Hunter, great video! This is exactly what I needed. I've been struggling for some time with global context within a Gatsby environment and you made it so easy and clear. Thank you!