Summarizing State Management Options in Next.js App Router

So you might be asking yourself, with the App Router, do I even need a state manager in the first place? That's a great question to ask because the model has changed. We no longer have a Redux store that has all the data in it, both immutable data and mutable data all in the same place.

We now have just the mutable data on the client, and so the volume of data is a lot less. You might not need a state manager to manage that volume. In fact, you could just get by with the basic React Hooks, and that's saying a lot actually because React Hooks are really powerful.

You've got state management stuff in useState, useReducer, useRef. You've got useEffect, useMemo, and useCallback to look for changes in that state. So that's a full-on state management mechanism baked right into React in the first place.

If you take that and then add on something like React Query, or SWR to manage your queries, that's a really powerful combination. If you have a state that is more state machine-based, you could use something like XState and add that in there and

create a powerful set of just hooks-based management. Now, the other part of why we are bringing in a state manager is to manage the complexity of the state. To do that, you might be able to get away with just using a custom hook where you bring together those primitive hooks into a larger hook that you can

test independently and that encapsulates your business logic. But if you're not satisfied with that, there's four different categories of state manager that you might want to take a look at. There are unidirectional state managers like Redux and Sustand. There are bidirectional state managers like MobX and Valcio.

They make it easy just to get and set the data directly, and some people prefer that developer experience. There are event-based state managers like Effector that use events to manage data, and oftentimes use things like Rx, like RxJS.

Then finally, there are atomic managers like Recoil and what we just used, Jotai. There are a bunch of different options and you should actually evaluate them before you pick one in your application to make sure that you're using the model that's right for your application. Well, I hope you enjoyed this tutorial and you now feel

more confident using either React Hooks or state managers to manage mutable state in the client side of your Next.js App Writer application.

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 and Zustand that we worked with in this tutorial.
Bidirectional State Managers, like MobX.
Event-based State Managers like Effector, often used with RxJS.
Atomic State Managers: Like Recoil and 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.

more confident using either React Hooks or state managers to manage mutable state in the client side of your Next.js App Writer application.

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.

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 and Zustand that we worked with in this tutorial.
Bidirectional State Managers, like MobX.
Event-based State Managers like Effector, often used with RxJS.
Atomic State Managers: Like Recoil and Jotai, which was covered in a previous lesson.

State Management with React Context

Redux for State Management

Zustand for State Management

Jotai for State Management

Outro

Transcript

Summarizing State Management Options in Next.js App Router

Categories of State Managers

Conclusion

Transcript

Summarizing State Management Options in Next.js App Router

Categories of State Managers

Conclusion