The easiest React global state management library - no context/providers!

hey how's it going it's lee halliday and today we're looking at valtteo which is a new state management tool that makes it really really simple to share your state globally without having to use the use context hook or providers or any of that stuff and if you go to their home page what you see is two pieces of state essentially this counter that's just counting up forever in the top left and this big number in the middle that's controlled by this button on the bottom right so we're going to build something like that here's where we've got so far uh the times and then the button we will click in the center to just increment so let's look at the code this is a react app inside of next.js nothing to do with nextgs i just like it as my go-to react setup and what we've got here is importing proxy and used snapshot from vaultio and then we've got our component which is rendering a times component to show that top left times counter and then the button in the middle which will show the the count so let's declare our state we'll say con state is equal to proxy and we pass an object in and then we've got times at zero and count at zero okay state declared that's all there is to it and the way you actually use and interact with this state is through a hook called use snapshot so const snap equals use a snapshot of the state and a rule of thumb is you actually write directly to this state and then you read from the snapshot so snap is for reading state from this proxy is for writing and we're going to use effect to basically set up an interval that is going to just add a number every second so in here we'll say const interval is equal to set interval and then we've got our interval function every one second and so inside of here what we're going to do is just state dot times is equal to just add one to it every time so let's do our cleanup function from use effect so when this component unmounts what we'll call is clear interval on the interval okay and then we need to just show now this times so remember you write to state and you read from snapshot so we'll do snap dot times seconds and let's just see if it's working okay zero cool i don't know why it wasn't working before it is now so you can see it's counting up six seven whatever it's great so now let's move on to this button so what we're going to do in the button is just show the snap dot count so remember read from snap and right on click we are going to simply um take our state and increment the count by one oh silly me we need our snapshot okay so this is counting up and so is this when you click it they're independent and the way i'm going to show that they're independent is because i can add a console.log here of the snap.count and when we come into here you'll see that it rendered a bit at the beginning while it was initializing but now when i reset we've got this incrementing but it's not going up as this thing increments so it's only when it's causing this component to re-render so what is happening internally is that this snap object is basically listening for which properties you read from inside of this component and it's only listening for events when that property updates so even though it's one piece of state with two properties each component knows which properties are being read from and then only when those change is it causing the component to re-render so that's a pretty cool feature of valtio and um another cool thing is that you can actually you don't even need to use this in react so what it comes with is a function called subscribe so you can import that and then you can subscribe to changes in the state so you can use this in vanilla js and basically have this state proxy object subscribe to changes all over your app and it will basically call essentially a re-render anytime that state changes so we're not going to do that today but what i did want to show is basically like lee this is all in one file this is ridiculous this isn't how a react app would actually be so we're just going to split this up to show how you would use this in sort of a real application so i've got a source folder with components we're going to move our components in there so times.jsx and count.jsx and we'll just copy those in there so get this one out bring it in and this one needs use snapshot from valteo and it is also going to need access to the state which will import state from state which we will go and define right now actually it will be up a level so we'll go in here and we'll say state.js and we'll move our state into there so const state export state import proxy from valteo okay so this one's good to go i think this one's good to go if i were to export the component and now we need to go set up count so we'll cut that out move it into count and it also needs state from our state file and it needs use snapshot from valtteo oops valtio and then we need to export it so export default count cool so i think these are good i'm not using typescript here so i'm sort of winging it but what we can do oh it wouldn't have worked we needed use effect in times as well like that but now what we can do is we can just import times from src components times and then import count from here let's go see if we have any errors it doesn't look like it so somehow i made that work wicked so now what you can see here is we've got our home page our home component rendering two components that are sort of importing the state just from a file that uh declared the state and exported it and then they're you bringing in use snapshots so they can take a read of that state and then we did the same thing for count over here so now we've split everything up into nice separate files our state in one our two components in another and we have global state shared across components they're rendering independently and we didn't even need to use use context or a provider hope you enjoyed the video check out baltio it's pretty cool and uh have a great day peace

Channel: Leigh Halliday

Views: 5,007

Rating: 4.974359 out of 5

Keywords: react, state management, valtio, proxies

Id: p8l9LiWyQJs

Length: 8min 25sec (505 seconds)

Published: Thu Jul 22 2021