State Management in Pure React, v2 setState & Helper Function
This course has been updated! We now recommend you take the React Performance course.
Transcript from the "setState & Helper Function" Lesson
>> All right, so I'm gonna make a little bit of a helper function real quick here. And this is not one that you should use in production because it's got a lot of edge cases, but it'll do the trick. All right, so we've got getStateFromLocalStorage and we'll just say const storage = localStorage.getItem, we'll call it counterState.
[00:00:28] And then, so the way local storage works is it's effectively you can store at a given key, you can store a string, now, we wanna store an object, I could just store the string value. We're gonna store an object, which means that we will need to JSON parse it when it comes out.
[00:00:46] JSON parse gets real angry if you pass it undefined or null, so we'll check to see if it exists. For our storage, and if nothing came out of there, if we didn't hit that conditional, then give me that default count of 0, all right? So if there's nothing in local storage, give me 0.
[00:01:36] We'll do it in line first actually, I've decided will say, local storage, dot set item, counter storage JSON stringify. This.state. All right, so that should do the trick. Go ahead and increment. No. Counter storage, That's just gonna be a function that will take some props now we know this one got Max and step passed in.
[00:02:30] So I'll hold on to those for a second. I use them immediately. But and so we know that in this case Cool, the setter function gets a copy of the state and the props, right. And we saw that we can pull it out into increment, and that was super cool.
[00:02:45] This one doesn't actually get any arguments, right. So trying to say, all right, I'm gonna do this, and then instead of doing this.state, so you could pull it out, will not work. You do have a few options for how you wanna handle this. You could For instance, if you wanted to make it a function that was totally separate, not using arrow functions in this case will do the trick so you could do something like, store state and local storage.
[00:03:35] Actually, I could bind it up there like we saw before. I'm pretty sure I can also just keep it inside of an arrow function, we're all gonna find out together. No, so you just store state in local storage, That should do the trick. All right, so that'll work.
[00:04:07] That doesn't feel great. The other option is to just make it a method on the class and do exactly what we did up here with .bind(this). The point is if you get confused on, yeah, I know in the I gotta copy the state and the props, and then I go in there to do it.
[00:04:22] This has definitely bit me before, and it's like you don't get those arguments in there. So you can Put it on the class and bind it. You can bind it on the fly here as well. It's really up to you. Or you might just consider putting in line.
[00:04:34] But there is a subtle difference in the way that the center function works and the way that the callback function works. It is not my favorite API choice, but it is one that exists in this case. The other option of course is you could theoretically, if we wanted to make this an r function, if we really felt strongly, and we don't wanna have to remember to bind it cuz that is a little tricky, we could make a function where the person passes it in.
[00:05:02] And now we could say, pass in. Alright, so there's a little gotcha in there. Let's just verify that that works decrement still goes down by one and doesn't save anything. So because we only wrote in the increment function. Alright, so We now know we can have call backs, we've know that it behaves a little bit differently than the setter, which is unfortunate and will bite you at least once, nine months from now, when you forgot that I said that.
[00:05:35] And then you remember that I said it, you'd be like, he's very smart. It's only that I was very stupid before hand. And so that's how that's how knowledge transfer works. I'm told.