This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "Hooks Q&A" Lesson
[00:00:00]
>> So that's kind of state hooks in a nutshell, that's your baby's first hook, right? [LAUGH] Hopefully that was helpful to you. Then you have any questions about like use state in particular that they wanna ask right now, before we get into effects, which is the next hook that we're going to lose, or lose or use up to you, but hopefully use.
[00:00:24]
>> How do we define a default value for select using the use state like we have for location?
>> Or do you want it to be like preselected?
>> Yeah.
>> Sure, good question. So the question is, is we have a predefined value of Seattle, Washington there for the location.
[00:00:40] What happens if you want a dog to be the preselected value for animal? It's really just as easy as coming to animal and typing dog and save. If we go back over here now dog will be the default value for that. Let's talk about why that is. So you state, and then I give it a default value.
[00:01:00] So now for the very first render animal is going to default to being dog. And then if I go down to my animal selector, the value is equal to animal, right? So it's going to be dog on first reminder. And then after that it just ignores it, right?
[00:01:15] Because then it's not the default value anymore.
>> Is there any difference if you set these states all in one object instead of having them separately like this?
>> Good question. I mean, you kind of probably thinking more like Redux, right? We had a big state object or state tree as they like to refer to it.
[00:01:33] Is that more beneficial or less beneficial than having all these individual ones? I prefer this because it's really easy for me to use and I don't have to do all the Redux set or a object of the sign stuff to preserve old state. So to really answer your question, you can absolutely do it that way.
[00:01:54] And there are people that do it that way. And there's actually even a thing called use reducer, which is a hook that does a reducer. And I will show you that again, an intermediate react. There's no performance penalty or anything like that, and lots of people prefer it.
[00:02:10] I just find this for simple use cases a state for it to be better for me. But that's up to you. You can definitely do it other ways as well.
>> Safe to use use state for animation.
>> Is it safety is you stay for animations? Yeah, definitely.
[00:02:28] You can definitely do animations with state.
>> Is the best practice?
>> Depends what you're doing. I suppose every time that you modify a state, it's going to kick off a rerender. And if you're doing that every millisecond, you might have some issues with clogging up the main thread.
[00:02:45] But if you're using it judiciously and only updating your state less frequently than every millisecond. Like you wouldn't want to update your state in every request animation frame. But if you're doing it like every second, yeah, you'll be just fine. There's like, you can use react with things like framer or green sock and it does really cool stuff.
[00:03:10] Or D3 for that matter. Question is can you use state with objects instead of simple strings? You can use state with literally anything. And you can use it with functions. You can use it with objects. You can use it with classes. There's all sorts of stuff that you can use it for.
[00:03:26] So we're using it with simple strings. We can, we're gonna use it with numbers here in a little bit. Use state you can think of as just a container. It can contain whatever you throw into it. But, yeah, I prefer simple smaller pieces of state. So in this case strings, but we could have put all three of these into one.
[00:03:44] And that would have been fine. Yeah, so you can see here this is the function definition. I know this reads a little technical, but bear with me for a second. UseState, and then a type here is S, which basically just means some generic other thing. But basically what it's saying is, whatever you put into it, I expect to get out of it.
[00:04:01] And that's really all it cares about is like if I'm going to give it a number, I expect to get a number back out of it. So in other words, if I give it a string here, it expects animal whenever you call set animal to also be a string.
[00:04:13] Now reacts to actually not going to enforce that. But if you're using TypeScript, which we will in intermediate react, it will actually force you into that practice.