--- title: "Discussion on \"Using React Context API with NextJS\" | Hashnode" description: "Discussion on \"Using React Context API with NextJS\". 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 ..." url: "https://hashnode.com/posts/using-react-context-api-with-nextjs/5f9f3de9de85d46a77d5ebe3" --- [Feed](https://hashnode.com/feed) / Discussion # [Using React Context API with NextJS](https://blog.alanmontgomery.co.uk/using-react-context-api-with-nextjs?utm_source=hashnode&utm_medium=feed) 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 ... Nov 2, 2020 ยท 5 min read ยท blog.alanmontgomery.co.uk Read the article - [#nextjs](https://hashnode.com/tag/nextjs) - [#software-development](https://hashnode.com/tag/software-development) - [#javascript](https://hashnode.com/tag/javascript) - [#reactjs](https://hashnode.com/tag/reactjs) - [#web-development](https://hashnode.com/tag/web-development) ## Written by [Alan Montgomery](https://hashnode.com/@alanmontgomery) @alanmontgomery ยท Belfast, Northern Ireland [View profile](https://hashnode.com/@alanmontgomery) Frontend Development Lead Hello, there ๐Ÿ‘‹ I'm Alan! I love teaching people how to code, and making coding tutorials, one of my big passions is transferring my web development/coding skills and knowledge on to people like you! ๐Ÿ”ฅ ...I'm a 29-year-old Software Developer based in Belfast in Northern Ireland. My current full-time role is Frontend Development Lead where I lead and oversee all the frontend development for our new platform and framework, built in NextJS, React TailwindCSS bundled in a NX mono-repo. I am also the Mobile Team Lead where I develop apps for our company using the Ionic Framework and React javascript. Throughout this blog, expect to see How to posts about coding on all aspects of HTML, CSS, Javascript (JS), ReactJS, NodeJS, PHP, and even the odd review of cool UI Frameworks or libraries that I've found. ๐Ÿ”” Be sure to subscribe to my YouTube channel if you want to catch my quick, easy to follow coding tutorials! ๐Ÿ”” ## Responses 2 Markdown supported ยท โŒ˜โ†ต to post [Isaac Way](https://hashnode.com/@idoubleu) [Jan 18, 2021](https://hashnode.com/posts/using-react-context-api-with-nextjs/5f9f3de9de85d46a77d5ebe3/comment/6005a6ab7b30c23b714ab5ff) 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 to redirect instead of vanilla tag. Maybe include that in the article for future dummies? [Alan Montgomery](https://hashnode.com/@alanmontgomery) [Jan 18, 2021](https://hashnode.com/posts/using-react-context-api-with-nextjs/5f9f3de9de85d46a77d5ebe3/comment/6005a6ab7b30c23b714ab5ff#reply-6005b2467b30c23b714ab6dd) 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. [Pablo Bernal](https://hashnode.com/@bernalmurcia) [Jan 18, 2021](https://hashnode.com/posts/using-react-context-api-with-nextjs/5f9f3de9de85d46a77d5ebe3/comment/6005a6ab7b30c23b714ab5ff#reply-6005d5e1848f4c3b9a0f1d57) 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](https://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](https://hashnode.com/@dinmon) [Nov 2, 2020](https://hashnode.com/posts/using-react-context-api-with-nextjs/5f9f3de9de85d46a77d5ebe3/comment/5f9f9b4fde85d46a77d5ee8e) 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](https://hashnode.com/@alanmontgomery) [Nov 2, 2020](https://hashnode.com/posts/using-react-context-api-with-nextjs/5f9f3de9de85d46a77d5ebe3/comment/5f9f9b4fde85d46a77d5ee8e#reply-5f9fbab5de85d46a77d5f05b) Yeah a definite valid point.