https://github.com/hugocruzlfc/nextjs-state-management

This tutorial is all about how to manage mutable data no matter what state management system you use. We'll look at examples with React Hooks and Context, as well as global management systems like Redux, Zustand, and Jotai.
https://github.com/hugocruzlfc/nextjs-state-management

app-router jotai nextjs14 react-context redux-toolkit state-management typescript zustand

Last synced: about 12 hours ago
JSON representation

This tutorial is all about how to manage mutable data no matter what state management system you use. We'll look at examples with React Hooks and Context, as well as global management systems like Redux, Zustand, and Jotai.

• Host: GitHub
• URL: https://github.com/hugocruzlfc/nextjs-state-management
• Owner: hugocruzlfc
• Created: 2024-05-02T14:56:25.000Z (8 months ago)
• Default Branch: main
• Last Pushed: 2024-05-04T08:14:54.000Z (8 months ago)
• Last Synced: 2024-05-05T01:40:49.872Z (8 months ago)
• Topics: app-router, jotai, nextjs14, react-context, redux-toolkit, state-management, typescript, zustand
• Language: TypeScript
• Homepage:
• Size: 553 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## Quick Start

### Initialize the project

Clone the project and install the dependencies for each example.

### Summarizing State Management Options in Next.js App Router

The state management model has changed with the advent of Next.js App Router.

The traditional Redux store, which held both immutable and mutable data, has been replaced.

Now, the mutable data only resides on the client, which means that the volume of data is much less. As a result, you may find that you can get by with just the basic React Hooks.

You can handle state with useState, useReducer, and useRef, and watch for changes with useEffect, useMemo, and useCallback. Pairing these hooks with query libraries like React Query or SWR can take you even further.

### Categories of State Managers

If you need more than what React Hooks offer, there are four categories of state managers to consider:

- Unidirectional State Managers, such as [Redux](https://github.com/reduxjs/redux) and [Zustand](https://github.com/pmndrs/zustand) that we worked with in this tutorial.

- Bidirectional State Managers, like [MobX](https://github.com/mobxjs/mobx).

- Event-based State Managers like [Effector](https://github.com/effector/effector), often used with RxJS.

- Atomic State Managers: Like [Recoil](https://github.com/facebookexperimental/Recoil) and [Jotai](https://github.com/pmndrs/jotai), which was covered in a previous lesson.

### Conclusion

State management has evolved. There are a lot of different options out there, so it's important to evaluate them before you pick one for your application. Choose wisely to ensure that you're using the most appropriate model for your specific use case.