Zoo stand is incredibly simple to get started with it's unopinionated but I'm going to show you my favorite best practices when using it that will help keep it simple and maintainable as your app grows the first one is how to pronounce it zand personally though I'm in cam zand if you don't know yet zustand is a state manager that makes Global State effortless and only cost your bundle around a kilobyte it really is the bare necessities for State Management in react but it's still powerful and allows you to enhance it with tools like middlewares to learn the best practices we're going to need a zoo store if you haven't use zoan before these next 20 seconds are going to be everything you need to get started first we need to create a hook used to do store to do this we use the create function from zoan which we immediately invoke with a state Setter function inside in here we Define our initial state in my case that's going to be an empty to-do array and it isubscribe Boolean please go ahead and make that true and then we have our set to do action that uses the setter to immutably update the state with our new hook any component can access and update this shared State making it incredibly easy to manage our todos across our entire ire application without prop drilling context overhead or any providers now in the code that we just set up I've already made a few mistakes according to my best practices the first best practice is to only export custom hooks instead of using my used to-do store hook to get the list of todos instead I should create a new hook that encapsulates my selector logic and then uses this hook where I need to get the todos this makes it cleaner and also means I don't have to repeat myself everywhere that I need the todos list and it means I only have one place to modify the code if I want to change this selector logic to enforce this we're going to remove the export on the used to-do store hook this also ensures we can never accidentally subscribe to the entire store you might think this code here is an efficient way to get the todos from the original hook the problem is your component will now render on any state change not just the todos even if they didn't change my next best practice is to use Atomic stable selectors when you have multiple State values one practice that might be coming from Redux users is to construct an object object selector this means in our hook we extract all of the state that we need for a component in a newly constructed object like the todos an is subscribed don't do this zustan uses stricter quality to detect changes the trouble is this selector thanks to the way the JavaScript Works creates a completely new object in memory every store update failing that stricter quality check and causing unnecessary renders even when neither todos or the is subscribed value has changed that's why I prefer to just use two hooks so I'll create you subscribed to obtain that value now if you really want object selectors you can use the U shallow hook wrapping this around our selector means that Zoo stand performs a shallow comparison it checks if the individual properties of the object have changed rather than comparing object references personally though I prefer to just keep it Atomic well until we come to our actions in this next tip this tip is to keep your store organized by separating actions from State actions are our functions that modify State these are static they don't change so we can create a single actions object on our store to hold all of them I would even go as far as separating the typescript types and then combining them into a single store type now to use these functions I would break that previous best practice for using Atomic selectors and instead expose a single actions hook then when I want to use an action I can just destructure it used to do actions returns an object so it sort of breaks our previous Atomic rule this is okay though in this one case because the actions object should never change it's referentially stable so even when we do use the destructuring pattern State updates won't cause range ERS for unrelated State changes as the selector is only looking at our actions object and that should be stable overall these tips just help keep things nice and clean talking of our actions another tip is to ensure that actions are modeled as events this is true of nearly every state manager what this means is we don't simply make a set Todo action and then perform our business logic in our components instead we have the actions hold our business logic so we have actions like add to-do remove to-do and toggle is subscribed there we go my to-do store is cleaned up what happens when my app grows though easy just create another store for the best experience ensure all of your stores are small and focused in this case I probably wouldn't even store the is subscribed value in the to-do store I'd create a separate one this keeps us organized cuts down on errors from accidental rerenders and makes testing easier now there is a guide on having one store and utilizing separate slices instead for a slice you don't use the hook you use the set a function inside of the hook you create a few of these and then we apply them to a single bound store I personally just prefer separated stores my final bonus tip is to look into middleware you can use imma to help cut down on messy destructuring in your stores you can use persist to automatically set up a local storage and you can use Dev tools to use Zoo stand in Redux Dev Tools in Chrome there we go let me know in the comments if you have any of your own best practices while you're down there subscribe and as always see you in the next one oh