Learn from useContext to useReducer - As Easy As Possible!

Professional learning NextJs useContext in the easiest possible way for those who have tried any other ways.

1. Create Project

$ npx create-next-app@latest source: https://nextjs.org

2. Setup Project

✔ What is your project named?learn_usecontext ✔ Would you like to use TypeScript? [Yes] ✔ Would you like to use ESLint? [Yes] ✔ Would you like to use Tailwind CSS? [Yes] ✔ Would you like to use src/ directory? [Yes] ✔ Would you like to use App Router? (recommended) [Yes] ✔ Would you like to customize the default import alias (@/*)? [No]

3. Insatll Dependencies

$ cd learn_useContext $ npm i

4. Run Projct

npm run dev http://localhost:3000

Thanks to

https://github.com/Medic1111/monstera-shop-client-only-typescript

Challenges

problem:

what is use client?

solution:

https://react.dev/reference/react/use-client https://nextjs.org/docs/app/building-your-application/rendering/client-components

problem:

useContext values gets cleared during page refresh and logout!

solution:

https://stackoverflow.com/questions/62420064/usecontext-values-gets-cleared-during-page-refresh-and-logout

problem:

How to instantly update state when any changes into the localstorage in React.js?

solution:

https://stackoverflow.com/questions/62896954/how-to-instantly-update-state-when-any-changes-into-the-localstorage-in-react-js

problem:

How to Fix "localStorage is not defined" in Next.js?

solution:

https://stackoverflow.com/questions/52474208/react-localstorage-is-not-defined-error-showing https://developer.school/snippets/react/localstorage-is-not-defined-nextjs

problem:

Why we need to pass a function to React setState() method?

solution:

https://iq.js.org/questions/react/why-we-need-to-pass-a-function-to-setstate

problem:

using useContext with custom hooks vs useContext + useReducer

solution:

https://dev.to/clickpesa/react-manage-state-using-context-api-with-usestate-or-usereducer-hooks-d5l https://stackoverflow.com/questions/70455690/using-usecontext-with-custom-hooks-vs-usecontext-usereducer

problem:

useContext + useReducer

solution:

https://designcode.io/react-hooks-handbook-usereducer-with-usecontext-1 https://designcode.io/react-hooks-handbook-usereducer-with-usecontext-2

problem:

useReducer vs Redux

solution:

https://blog.saeloun.com/2023/08/31/react-state-management-usereducer-vs-redux/