Outro 0 exercises

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 th

Loading lesson


00:00 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.

00:17 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.

00:36 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.

00:53 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

01:09 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

01:28 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.

01:47 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.

02:05 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

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