Props & useCallback

[00:00:00]
>> Next up, recall that we can pass props down to child components, for example, if we have a user, and the user's name is Mary, we can pass Mary as a prop. And then it will show up here in the structure from your component, and also because we are using TypeScript, we can use User Probe and explicitly type Mary's name as a string.

[00:00:23]
And a useCallback hook, is a react hook for memorizing interactions within a reaction opponents. Now next up, when we save a mood options, you want to also record their timestamps. So let's create a new type for the mood option with the timestamp. So let's open our types file and export another type called mood option with timestamp.

[00:00:50]
And this will have the mood which will be of type, mood option type, and the times stamp would just be a number. Next up in our home screen, we want to use a used data variable to actually store our mode list. So let's in our screens, let's find the home screen.

[00:01:27]
And let's create a used state variable. So we'll do const moodList, setMoodList, and we'll do React .useState, and we'll start with an empty right. Again we need to tell moodList what type this is, so we can do it by passing a moodList mood option with timestamp array. As the type to useState, so now when I hover over moodList is going to tell me what type it is.

[00:02:11]
Next up, we want to add a useCallback hook, to handle when you select a new mode. So in the home file in the home screen, let's do const handleSelectMood and we'll do a React.useCallback. And then this will have the selected mood, which will be of type moodOption. Empty dependencies you are right for now.

[00:02:51]
I will just do setMoodList and remember for useState variables, you can pass in either the new variable, or we can pass in a function takes in the current ones. So current list, and we can append our selected mood to the current list. So we'll return current. So will the current and we'll also need to add the timestamp to our mood, so we'll do mood, which is this selected mood and timestamp, which will be Date.now.

[00:03:31]
And notice that I actually forgot that we created this moodOption, with a timestamp. And because PostScript I immediately knew that I messed up, so that saved me some debugging time. Now let's pass handleSelectMood into our MoodPicker. And if we open our MoodPicker, this is now a property of MoodPicker.

[00:03:58]
So we'll create a type for the props. So we'll do type MoodPickerProps equals, and we'll do handleSelectMood. So this takes in the mood, which will be off type MoodOptionType. I think this was MoodOption, and then it returns nothing, so we use void. Now we'll pass this type into React.FC.

[00:04:33]
And we can also D structure, handleSelectMood from here, and now on our button so our Choose button, we can do OnPress and we'll do handleSelectMood, and we'll pass in. Select the mood, okay. Now this is telling me that argument with type MoodOptionType or undefined is not assignable primary to MoodOptionType.

[00:05:05]
And this is because this function is saying, okay, we definitely need a MoodOption, but notice that selected could be undefined. So this is another thing with TypeScript tells me that, okay ,what about if someone calls this function, but SelectedMood is undefined, what should I do then? So I'm actually going to pull this out to a useCallback, so, let's, well, actually not.

[00:05:31]
So, we can do is here we'll turn this into a proper function, And we'll do, if selected so if this is not undefined, only then we'll call it and notice the TypeScript now knows that this is undefined. This is not going to be undefined in here cuz it's passed this if statement and this will work.

[00:05:58]
And lastly in our home, let's also print out the MoodList just so we see what's being added. So let's import text, and underneath the MoodPicker, let's just do MoodList.map item. And lets do Text and item.mood, and let's also add the timestamps. Let's do item.timestamp, it's called new date on it, cuz it's just going to be a number, and then we need to also call to string to string so it will be something that we can look at.

[00:06:47]
And let's add a key to text so whenever you map over anything, you need to add in a key. So we'll do item.timestamp, so item.mood is an object, so I need to do item.mood.emoji. There we go, so now when added, you'll see that I'll get to the emoji and also the timestamp.

[00:07:09]
So what we'd also like is once you've selected a mood, it should deselect the background. So let's in the MoodPicker component, let's pull this on press out into a useCallback. So let's do it, const Let me just check what I called it, sorry, handleSelect. So, let's do const handleSelect = React.useCallback.

[00:07:47]
And let's copy this OnPress and select, so put that in here. So we'll set SelectedMood and also let's set it to undefined so we'll unset the selectedState. So let's do, set SelectedMood and undefined, and we'll also want to update dependencies array. All right, so now when we select it, it will deselect the state

[00:08:26]
>> Can you please explain the use of useCallback here?
>> So I tend to wrap all the functions that are inside React components into useCallback,
>> Really therefore memorizing the functions, so that basically obviously for React component. Every time something changes, like instantly React components or props change, then the whole component gets run.

[00:08:51]
So if you have a bunch of things here, a bunch of functions, every single function that you have gets re initialized if you're using arrow functions. So for useCallback and use my own all of those hooks like the purpose of them, is that if none of these dependencies changed, then don't re initialize it.

[00:09:10]
So when you have lots of complicated things, it will just be a performance enhancement