Transcript

Lecturer: 0:00 Let's get into some side effects here. Every application eventually needs to do something to the outside world. We don't want to do that directly in the render function or in this function for our function components, so how do we do things like interact with local storage or make HTTP requests? We do that using the useEffect hook.

0:19 Feel free to read through this to get an idea of how you go about that. Then in the exercise, we just want to make it so that every time we make a change to the text input, we save that into local storage so that if we do a refresh, we get that same persisted value restored.

0:38 In the final version, if we type a name like Bob, and then we refresh, when we go to the final version again, we're going to see Bob preloaded because it was saved in local storage, and we retrieved it from local storage when we got our state initialized again.

0:54 Go ahead, give that a try and definitely take a look at our extra credits. There are quite a few of them here. Lots of cool ways that we can optimize this and make things a little bit more flexible, especially this flexible local storage hook.

1:06 That one's going to be a little bit more tricky, but feel free to play around with that. Have fun and we'll see you on the other side of the exercise.