Discussion on "Using React Context API with NextJS"

Alan Montgomery · 2020-11-02T21:49:17.000Z

One huge pain point in React (and NextJS) is having to pass props through multi-level components. The bigger the application or project gets, the more painful this becomes. This is because of how React is structured, in a tree like fashion with data ...

Isaac Way

Jan 18, 2021

This is well written but it feels like it's half of a tutorial. The above implementation is completely unusable because the value of the context is going to be reset any time the user. I'm sorry but I'm just so frustrated. Every. Single. Tutorial about Contexts and NextJS is like this. I keep searching and searching for an example of actually using these things but all I get is articles like this one, where you're just using the context as a place to store data for a single page.

Contexts are useful because they allow components and pages to share state, right? Well then, what is the point of using one if your state is just going to be reset whenever you redirect? What is the point of having login data that disappears when you change pages? Am I missing something here? I do not understand how the above example is useful in any way if the context is just reset to the default value every time you redirect to a new page.

Edit: Yeah I was missing something. Sorry lol. I just needed to use <Link> to redirect instead of vanilla <a> tag. Maybe include that in the article for future dummies?

Alan Montgomery

Jan 18, 2021

Yeah definitely could include that for people who are confused about modern-day SPA that don't actually "redirect" or "reset". I guess I just assumed that readers would understand the architecture and structure of Next (and React in that case) in terms of links and how you should not refresh your app, because of course, you will lose your state. The state is always available in any case until the page is refreshed.

Hopefully, this tutorial was then slightly helpful after all, and sorry if you found it unusable, however, I did try to cover what was needed.

I'm still confused about how the state is stored across navigations. I'd think either you don't perform a full navigation or you store state in local/session storage. Which is it when using Context API on the app component?

Is the Context API somehow using local storage under the hood, abstracted from us, or does this only work when using NextJS as CSR and not when using SSG?

Edit: I understand now! The key is that even for SSG Nextjs actually performs a client-side navigation when using the Link component, instead of a full page refresh, as they mention in the docs for routing:

nextjs.org/docs/routing/introduction

"The Next.js router allows you to do client-side route transitions between pages, similar to a single-page application.

A React component called Link is provided to do this client-side route transition."

Dinys Monvoisin

Nov 2, 2020

The issue I found using React Context API is that the number of nested components increase as your props increase.

People should determine at first hand how complex their project would be to decide using React Context API or a state management library like Redux.

Alan Montgomery

Yeah a definite valid point.

Using React Context API with NextJS

Written by

Responses2

Search Hashnode

Using React Context API with NextJS

Written by

Responses2