React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

Zustand is a state management library aimed at staying simple and un-opinionated so that you as the developer can build your application as you see fit. To do this it creates a store (module of state) that you can subscribe components to read and update data from.

Zustand leans on hooks as the primary way to interact with your state. This means you get less boilerplate and a centralized, action-based state management solution that scales with the complexity of your app.

Daishi, a core contributor of Zustand, will show you the inner workings of the library by creating a small version of it. You learn how Zustand's API came to be and gain a better understanding of it by the end of this course.

There are many cases where you want to share state between components in React. A lot of popular state management libraries implement this ‘module state’ for you such as Zustand.

We will implement a naive version of a `createStore` function that allows you to share your state between components in React.

`createStore` has a few functions that we return from it: `getState`, `setState`, and `subscribe`. Just like with React Hooks, we can get and set state within components. Because this is shared state, we need to give components a mechanism for updating when state changes in a separate component, that is where `subscribe` comes in. With the combination of these 3 functions, we can display and update a shared value between multiple components in React.

Share Module State Between Components in React Similar to Zustand

We have two components that use the same store. They display the data and update the store when a button is clicked. The logic in each component is the same and can be extracted into a custom hook

In this lesson, we'll extract the store logic into a `useStore` hook and use that custom hook like you would any other React hook. Then we'll extend the behavior of the hook to accept a function to update the previous state value.


Extract Module Logic (like Zustand) into a Custom React Hook

We have to functions right now. `createStore` that creates module state and `useStore` that consumes the module state that we created.

The logic is working as expected. State is being properly shared to the components that need it while still isolated from the rest of the app. The issue now is that we have extra re-renders in our application. Each component will rerender when any state changes

To fix this, we'll implement a selector function that will peek the value that you need out of state. This way only the components that depend on the value that is changed will re-render.


Implement Zustand State Selectors in React to Prevent Unneeded Rerenders

At this point in our code, we have working module state that is similar to Zustand. If you look closely at the code you’ll notice that we are defining actions in our components. This works for some but you might want to define those actions when you create a store.

We will modify `createStore` to accept a `createState` function and use that function to initialize and update our state. This allows us to define actions while creating a store. We can use those defined actions in our components without having to implement any logic inline.

Define Actions in a Zustand-like Store to Modify React State

[Screen tearing](https://github.com/reactwg/react-18/discussions/69) is an issue that can crop up when you introduce concurrent rendering into your application. With React 18 coming out, you'll want to know how to handle this issue.

The React team has given us a solution for tearing with `useSyncExternalStore`. When we import his, we just need to pass our store's subscribe and selector functions to solve this issue. The added benefit here is that we can remove our uses of `useCallback` throughout our application.


Create a Zustand-like Module State Library

Daishi Kato

Course Content