React hooks provide a highly-efficient was to tap into framework features and organize reactive logic. Learn how use every built-in React hook https://fireship.io/courses/react-next-firebase/

00:00 Why React Hooks?
02:20 useState
03:50 useEffect
05:55 useContext
06:58 useRef
07:58 useReducer
09:27 useMemo
10:12 useCallback
10:40 useImperativeHandle
11:18 useLayoutEffect
11:43 useDebugValue & Custom Hooks

#webdev #js #react

Install the quiz app 🤓

iOS https://itunes.apple.com/us/app/fireship/id1462592372?mt=8
Android https://play.google.com/store/apps/details?id=io.fireship.quizapp

Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment. 

My VS Code Theme

- Atom One Dark 
- vscode-icons
- Fira Code Font
2024-02-04T14:20:25.007Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
13b123df-3d48-45e8-988a-cd899d1e6bfe
17ebf9307294fedaaacbd9c8233ba3158e7860948bf7a8d7d4efc45a0b87ba72
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
React Hooks.
Use features of the React framework by calling special hook functions from within a component.
We can build static or dump components in React by writing functions.
However, UI components are often dynamic.
They may need to change the state of their data, react to life cycle events, access elements from the DOM, among many or things.
But prior to React version 16.8, developers were required to write classes to take advantage of certain React features.
Now you can still use classes in React, but hooks generally provide a more ergonomic way to build components because you can reuse stateful logic without changing your component hierarchy.
React has 10 built in hooks, and you'll understand what every single one of them does by the end of today's video.
In addition, you'll learn how to build your own hooks from scratch to extract your own component logic into reusable functions.
If you're new here, like and subscribe, and consider becoming a pro member at FireShip IO to get access to my upcoming next to Firebase course.
If you're new to React, it's helpful to understand why hooks exist in the first place.
In the past, stateful logic or data that Changes within the application was tightly coupled to a class based component.
That means in order to work with reactive data, you needed to create a component.
That seems reasonable, but what it led to in reality was a complex tree of nested components.
No.
Don't like that.
And this is where I have to admit that I used to really dislike React because sharing any logic required some frustrating jujitsu, like higher order components and render props, which are patterns that have you passing components as arguments to other components, and that just always felt way more complex to me than patterns you find in other frameworks like Angular.
Fortunately, hooks changed everything by giving you access to lower level features of React outside of the context of a component.
When you work with hooks, You can think of them like low level primitives of the React framework that give you special abilities that you wouldn't otherwise have in vanilla JavaScript.
The hooks themselves are functions which always start with the name of use because you're using the superpowers of the React framework.
Now before you start using hooks, there's really just one rule you should be aware of, and that's to only call them at the top level of a functional component.
They don't work inside of regular JavaScript functions, nested functions, loops, or anything like that.
The only exception to this rule is when building your own custom hooks, which we'll look at towards the end of the video.
Now the question becomes, what do these primitives or hooks actually do?
Let's break them down 1 by 1, starting with use state.
Use state is easily the most important and often used hook.
To import it in your React app, type use into the IDE, and that should give you a list of all the hooks that are available to you.
Highlight use state, then hit enter to automatically import it from React.
The purpose of use state is to handle reactive data.
Any data that changes in the application is called state.
And when the state changes, you want React to update the UI so the latest changes are reflected to the end user.
The hook takes one optional argument, which is the default state, which we'll go ahead and set to 0.
The function then returns an array that contains 2 values you can use within your component.
The reason they're returned in an array is because we can destructure them with JavaScript to easily assign the values to local variables that we can name whatever we want.
The first value is the reactive data or state.
If we then reference it in the UI and its value changes in the future, React will automatically rebuild the UI to show the latest value.
It'll start with a value of 0, our default in the hook, but how do we then change its value in the future?
The second element in the array is a setter function.
For example, we might listen to the on click event on the button, and when clicked, we'll call the set count function to increment the count by 1.
If we compare this code to a class based component, you can see it's far more complex.
We need a class to extend a React component, then a constructor to initialize the state, and also notice how we're required to reference the this keyword all over the place.
Use state, in my opinion, is a much cleaner solution.
Now we're ready to tackle the second most important hook, useEffect, which also happens to be one of the most confusing.
And in order to understand it, you first need to understand the component life cycle.
Here in our old class component, We're implementing methods to handle different life cycle events.
Here's a simplified breakdown of the component life cycle.
The component is added to the UI or mounted, which can only happen once, then reactive data on the component can change or it's updated, which can happen multiple times.
Then finally, at some point, the component will be removed from the UI or unmounted.
Now keep these 3 life cycle events or side effects in mind as we talk about the useEffect hook, which allows us to implement logic for all of them from within a single function API.
Use effect is a function that takes a function you define as its first argument.
React will then run your function or a side effect after it has updated the DOM.
With the current implementation, it will run this function anytime stateful data changes on the component.
That means it'll run once when the component is initialized with the default value, then run again each time the state or count is updated.
In most cases, though, you'll likely want more fine grained control over that behavior.
For example, imagine we need to fetch data when the component is first initialized, then update the state asynchronously after the data has been fetched.
This code would result in an infinite loop because every time we do the fetch, we then update the state, which then triggers another fetch and so on forever.
The way we address this is by adding a second argument to useEffect, which is an array of dependencies.
If you add an empty array, it means there are no dependencies, which means it will only run once when the component is first initialized.
But in other cases, You might want to rerun the function anytime certain staple data has changed.
You can do that by adding the state to the dependencies array.
Now React will track that value, and anytime it changes, it will rerun this function.
Now one last thing you might wanna do with useEffect is run some tear down code when the component is destroyed.
The way we implement a teardown function is to return a function from our useEffect callback.
React will take the function returned here, then call it when the component is destroyed.
And with that, let's move on to our next hook, use context.
This hook allows you to work with React's context API, which itself is a mechanism that allows you to share or scope values throughout the entire component tree.
Let's imagine we have an object called moods that can be happy or sad.
To share the current mood across multiple disconnected components, we can create a context.
One part of the application might be happy, so we use a context provider to scope the happy mood there.
Now any child component inside of it can inherit that value without needing to pass props down to the children.
And that finally brings us to the use context hook.
It allows us to access or consume the current value from the context provider, which might live many levels higher in the component tree.
Reading a parent value with use context is much easier than passing props down through multiple children.
Now if the mood changes from happy to sad in the parent provider, the value here will be updated automatically.
Now if you've ever used React context in Past, you've likely used the consumer component.
The use context hook is basically a cleaner replacement for the consumer.
And now let's switch gears to use ref.
And this hook allows you to create a mutable object that will keep the same reference between renders.
It can be used when you have a value that changes, kind of like set state, but the difference being that it doesn't trigger a rerender when the value changes.
For example, if we try to build a counter button with use ref, we could reference the current count by calling count dot current.
However, when we click the button, The count would never change in the UI because use ref doesn't trigger a rerender like set state does.
So that can be useful when you need a mutable value.
But a more common use case for use ref is to grab HTML elements from the DOM.
We can start by creating a null reference called my button, then connect it to the raw HTML button using the ref attribute.
From there, we could reference the HTML button in a function to call native DOM APIs like click in this example, which would programmatically click the button.
The bottom line is that when you need to grab an element from the dom, use ref is the hook you're looking for.
The next hook we'll look at is a pretty scary one, use reducer.
But what it does is actually very similar to set state.
It just goes about it in a different way using the Redux pattern, which works like this.
Instead of updating the state directly, you dispatch actions that go to a reducer function, and that reducer function determines how to compute the next state.
Now just like use state, use reducer returns an array of 2 values with the first value being the reactive state that you want to show in the UI.
The second value is where things get different.
Instead of a function that updates the state, you're given a function that can dispatch an action.
An action is just an object that has a type, which can be any string you want, and an optional data payload.
You might dispatch an action when a button is clicked, which will trigger your reducer function.
The reducer function is something you define and pass as the argument to the use reducer hook.
The function takes the current state and the action as arguments and uses these two values to compute the next state, which is usually handled inside of a switch statement.
In this example, if the action is increment, we add 1.
If it's decrement, we subtract 1.
And lastly, I'll point out the hook also takes the initial state as its second argument.
Now you may be wondering why you'd ever wanna use code like this because it looks way more complex than just using set state.
The answer, which not everyone will agree with, is that it helps your code manage complex as it grows.
As you add more components to your app, it becomes more difficult to manage state in a reliable and predictable way, and the Redux pattern can help with that.
Now we're ready to move on to the use memo hook, which can help you optimize computation cost for improved performance.
But keep in mind that you don't want to prematurely to really optimize performance.
So think of this hook as an opt in tool to deal with expensive computations that you know are hurting performance.
Let's imagine we have a counter again, but then we compute an additional property after that called expensive count that requires some kind of expensive computation.
Instead of recomputing on every render, we can memoize the value.
We write a function that returns the computed value.
Then as a second argument, We add the dependencies to determine when this computation should be run, which in this case would be whenever the count changes.
That's great for memoizing return values, But in other cases, you may want to memoize an entire function, in which case, you're looking for the useCallback hook.
When you define a function in a component, A new function object is created each time the component is rerendered.
Usually, this isn't a big deal for performance, but in some cases, You may want to memoize the function.
A common use case is when you pass the same function down to multiple child components.
By wrapping the function in useCallback, We can prevent unnecessary rerenders of the children because they'll always be using the same function object.
Now let's switch gears to one of the more confusing hooks, Use imperative handle.
If you build a reusable component library in React, you may need to get access to the underlying dom element and then forward it so it can be accessed by the consumers of your component library.
You can access a native DOM element with the use ref hook that we showed earlier.
Then you can wrap the component in forward ref to make that ref available when someone uses this component.
Now use imperative handle comes in if you want to change the behavior of the post ref.
You might want to modify the methods on the native element, but in reality, the need for this hook is probably pretty rare.
And speaking of rare, another hook that you'll rarely need is use layout effect.
It works just like the use effect hook with one small difference.
Your callback will run after rendering the component, but before the actual updates have been painted to the screen.
That means React will wait for your code to finish running before it updates the UI for the end user, but there may be situations where you need to calculate a scroll position or something else in the UI before the DOM is visually updated.
And with that, we've reached the final built in hook, use debug value.
But this hook won't make a lot of sense until you start building your own custom hooks from scratch.
If you pull up your app in the browser, then open React dev tools, you'll notice that every component in the tree will tell you a little bit about the hooks that are defined there.
The purpose of use debug value is to make it possible to define your own custom labels here in React dev tools when you start building custom hooks.
Let's go ahead and build a custom hook now to see that in action.
Notice how our component is using 2 hooks together.
We have use state to define a display name for the user and then use effect to fetch that username from the database somewhere.
Now let's imagine we have 10 other components that need to implement the same exact logic.
The great thing about hooks is that we can easily do that by defining our own function called the use display name.
It's just a regular JavaScript function that implements the same code we had in our component.
The only difference is that we now want to return the display name from this function so we can use it elsewhere in the application, and we can now put it to use in multiple components.
One final touch here is to add use debug value to our custom hook.
The argument passed to the hook will be the value shown in React Dev Tools.
As you can see here, it shows the display name label along with the value as well as a breakdown of the primitive hooks that went into this custom hook.
And with that, we've looked at every single built in React hook.
If this video helped you, please like and subscribe, and consider becoming a pro member to get access to the upcoming React Firebase course.
Thanks for watching, and I will see you in the next one.

Speaker 0: React Hooks. Use features of the React framework by calling special hook functions from within a component. We can build static or dump components in React by writing functions. However, UI components are often dynamic. They may need to change the state of their data, react to life cycle events, access elements from the DOM, among many or things.

But prior to React version 16.8, developers were required to write classes to take advantage of certain React features. Now you can still use classes in React, but hooks generally provide a more ergonomic way to build components because you can reuse stateful logic without changing your component hierarchy. React has 10 built in hooks, and you'll understand what every single one of them does by the end of today's video. In addition, you'll learn how to build your own hooks from scratch to extract your own component logic into reusable functions. If you're new here, like and subscribe, and consider becoming a pro member at FireShip IO to get access to my upcoming next to Firebase course.

If you're new to React, it's helpful to understand why hooks exist in the first place. In the past, stateful logic or data that Changes within the application was tightly coupled to a class based component. That means in order to work with reactive data, you needed to create a component. That seems reasonable, but what it led to in reality was a complex tree of nested components. No.

Don't like that. And this is where I have to admit that I used to really dislike React because sharing any logic required some frustrating jujitsu, like higher order components and render props, which are patterns that have you passing components as arguments to other components, and that just always felt way more complex to me than patterns you find in other frameworks like Angular. Fortunately, hooks changed everything by giving you access to lower level features of React outside of the context of a component. When you work with hooks, You can think of them like low level primitives of the React framework that give you special abilities that you wouldn't otherwise have in vanilla JavaScript. The hooks themselves are functions which always start with the name of use because you're using the superpowers of the React framework.

Now before you start using hooks, there's really just one rule you should be aware of, and that's to only call them at the top level of a functional component. They don't work inside of regular JavaScript functions, nested functions, loops, or anything like that. The only exception to this rule is when building your own custom hooks, which we'll look at towards the end of the video. Now the question becomes, what do these primitives or hooks actually do? Let's break them down 1 by 1, starting with use state.

Use state is easily the most important and often used hook. To import it in your React app, type use into the IDE, and that should give you a list of all the hooks that are available to you. Highlight use state, then hit enter to automatically import it from React. The purpose of use state is to handle reactive data. Any data that changes in the application is called state.

And when the state changes, you want React to update the UI so the latest changes are reflected to the end user. The hook takes one optional argument, which is the default state, which we'll go ahead and set to 0. The function then returns an array that contains 2 values you can use within your component. The reason they're returned in an array is because we can destructure them with JavaScript to easily assign the values to local variables that we can name whatever we want. The first value is the reactive data or state.

If we then reference it in the UI and its value changes in the future, React will automatically rebuild the UI to show the latest value. It'll start with a value of 0, our default in the hook, but how do we then change its value in the future? The second element in the array is a setter function. For example, we might listen to the on click event on the button, and when clicked, we'll call the set count function to increment the count by 1. If we compare this code to a class based component, you can see it's far more complex.

We need a class to extend a React component, then a constructor to initialize the state, and also notice how we're required to reference the this keyword all over the place. Use state, in my opinion, is a much cleaner solution. Now we're ready to tackle the second most important hook, useEffect, which also happens to be one of the most confusing. And in order to understand it, you first need to understand the component life cycle. Here in our old class component, We're implementing methods to handle different life cycle events.

Here's a simplified breakdown of the component life cycle. The component is added to the UI or mounted, which can only happen once, then reactive data on the component can change or it's updated, which can happen multiple times. Then finally, at some point, the component will be removed from the UI or unmounted. Now keep these 3 life cycle events or side effects in mind as we talk about the useEffect hook, which allows us to implement logic for all of them from within a single function API. Use effect is a function that takes a function you define as its first argument.

React will then run your function or a side effect after it has updated the DOM. With the current implementation, it will run this function anytime stateful data changes on the component. That means it'll run once when the component is initialized with the default value, then run again each time the state or count is updated. In most cases, though, you'll likely want more fine grained control over that behavior. For example, imagine we need to fetch data when the component is first initialized, then update the state asynchronously after the data has been fetched.

This code would result in an infinite loop because every time we do the fetch, we then update the state, which then triggers another fetch and so on forever. The way we address this is by adding a second argument to useEffect, which is an array of dependencies. If you add an empty array, it means there are no dependencies, which means it will only run once when the component is first initialized. But in other cases, You might want to rerun the function anytime certain staple data has changed. You can do that by adding the state to the dependencies array.

Now React will track that value, and anytime it changes, it will rerun this function. Now one last thing you might wanna do with useEffect is run some tear down code when the component is destroyed. The way we implement a teardown function is to return a function from our useEffect callback. React will take the function returned here, then call it when the component is destroyed. And with that, let's move on to our next hook, use context.

This hook allows you to work with React's context API, which itself is a mechanism that allows you to share or scope values throughout the entire component tree. Let's imagine we have an object called moods that can be happy or sad. To share the current mood across multiple disconnected components, we can create a context. One part of the application might be happy, so we use a context provider to scope the happy mood there. Now any child component inside of it can inherit that value without needing to pass props down to the children.

And that finally brings us to the use context hook. It allows us to access or consume the current value from the context provider, which might live many levels higher in the component tree. Reading a parent value with use context is much easier than passing props down through multiple children. Now if the mood changes from happy to sad in the parent provider, the value here will be updated automatically. Now if you've ever used React context in Past, you've likely used the consumer component.

The use context hook is basically a cleaner replacement for the consumer. And now let's switch gears to use ref. And this hook allows you to create a mutable object that will keep the same reference between renders. It can be used when you have a value that changes, kind of like set state, but the difference being that it doesn't trigger a rerender when the value changes. For example, if we try to build a counter button with use ref, we could reference the current count by calling count dot current.

However, when we click the button, The count would never change in the UI because use ref doesn't trigger a rerender like set state does. So that can be useful when you need a mutable value. But a more common use case for use ref is to grab HTML elements from the DOM. We can start by creating a null reference called my button, then connect it to the raw HTML button using the ref attribute. From there, we could reference the HTML button in a function to call native DOM APIs like click in this example, which would programmatically click the button.

The bottom line is that when you need to grab an element from the dom, use ref is the hook you're looking for. The next hook we'll look at is a pretty scary one, use reducer. But what it does is actually very similar to set state. It just goes about it in a different way using the Redux pattern, which works like this. Instead of updating the state directly, you dispatch actions that go to a reducer function, and that reducer function determines how to compute the next state.

Now just like use state, use reducer returns an array of 2 values with the first value being the reactive state that you want to show in the UI. The second value is where things get different. Instead of a function that updates the state, you're given a function that can dispatch an action. An action is just an object that has a type, which can be any string you want, and an optional data payload. You might dispatch an action when a button is clicked, which will trigger your reducer function.

The reducer function is something you define and pass as the argument to the use reducer hook. The function takes the current state and the action as arguments and uses these two values to compute the next state, which is usually handled inside of a switch statement. In this example, if the action is increment, we add 1. If it's decrement, we subtract 1. And lastly, I'll point out the hook also takes the initial state as its second argument.

Now you may be wondering why you'd ever wanna use code like this because it looks way more complex than just using set state. The answer, which not everyone will agree with, is that it helps your code manage complex as it grows. As you add more components to your app, it becomes more difficult to manage state in a reliable and predictable way, and the Redux pattern can help with that. Now we're ready to move on to the use memo hook, which can help you optimize computation cost for improved performance. But keep in mind that you don't want to prematurely to really optimize performance.

So think of this hook as an opt in tool to deal with expensive computations that you know are hurting performance. Let's imagine we have a counter again, but then we compute an additional property after that called expensive count that requires some kind of expensive computation. Instead of recomputing on every render, we can memoize the value. We write a function that returns the computed value. Then as a second argument, We add the dependencies to determine when this computation should be run, which in this case would be whenever the count changes.

That's great for memoizing return values, But in other cases, you may want to memoize an entire function, in which case, you're looking for the useCallback hook. When you define a function in a component, A new function object is created each time the component is rerendered. Usually, this isn't a big deal for performance, but in some cases, You may want to memoize the function. A common use case is when you pass the same function down to multiple child components. By wrapping the function in useCallback, We can prevent unnecessary rerenders of the children because they'll always be using the same function object.

Now let's switch gears to one of the more confusing hooks, Use imperative handle. If you build a reusable component library in React, you may need to get access to the underlying dom element and then forward it so it can be accessed by the consumers of your component library. You can access a native DOM element with the use ref hook that we showed earlier. Then you can wrap the component in forward ref to make that ref available when someone uses this component. Now use imperative handle comes in if you want to change the behavior of the post ref.

You might want to modify the methods on the native element, but in reality, the need for this hook is probably pretty rare. And speaking of rare, another hook that you'll rarely need is use layout effect. It works just like the use effect hook with one small difference. Your callback will run after rendering the component, but before the actual updates have been painted to the screen. That means React will wait for your code to finish running before it updates the UI for the end user, but there may be situations where you need to calculate a scroll position or something else in the UI before the DOM is visually updated.

And with that, we've reached the final built in hook, use debug value. But this hook won't make a lot of sense until you start building your own custom hooks from scratch. If you pull up your app in the browser, then open React dev tools, you'll notice that every component in the tree will tell you a little bit about the hooks that are defined there. The purpose of use debug value is to make it possible to define your own custom labels here in React dev tools when you start building custom hooks. Let's go ahead and build a custom hook now to see that in action.

Notice how our component is using 2 hooks together. We have use state to define a display name for the user and then use effect to fetch that username from the database somewhere. Now let's imagine we have 10 other components that need to implement the same exact logic. The great thing about hooks is that we can easily do that by defining our own function called the use display name. It's just a regular JavaScript function that implements the same code we had in our component.

The only difference is that we now want to return the display name from this function so we can use it elsewhere in the application, and we can now put it to use in multiple components. One final touch here is to add use debug value to our custom hook. The argument passed to the hook will be the value shown in React Dev Tools. As you can see here, it shows the display name label along with the value as well as a breakdown of the primitive hooks that went into this custom hook. And with that, we've looked at every single built in React hook.

If this video helped you, please like and subscribe, and consider becoming a pro member to get access to the upcoming React Firebase course. Thanks for watching, and I will see you in the next one.
React Hooks. Use features of the React framework by calling special hook functions from within a component. We can build static or dump components in React by writing functions. However, UI components are often dynamic. They may need to change the state of their data, react to life cycle events, access elements from the DOM, among many or things.
But prior to React version 16.8, developers were required to write classes to take advantage of certain React features. Now you can still use classes in React, but hooks generally provide a more ergonomic way to build components because you can reuse stateful logic without changing your component hierarchy. React has 10 built in hooks, and you'll understand what every single one of them does by the end of today's video.
software development
In addition, you'll learn how to build your own hooks from scratch to extract your own component logic into reusable functions. If you're new here, like and subscribe, and consider becoming a pro member at FireShip IO to get access to my upcoming next to Firebase course. If you're new to React, it's helpful to understand why hooks exist in the first place. In the past, stateful logic or data that Changes within the application was tightly coupled to a class based component. That means in order to work with reactive data, you needed to create a component. That seems reasonable, but what it led to in reality was a complex tree of nested components. No. Don't like that. And this is where I have to admit that I used to really dislike React because sharing any logic required some frustrating jujitsu, like higher order components and render props, which are patterns that have you passing components as arguments to other components, and that just always felt way more complex to me than patterns you find in other frameworks like Angular. Fortunately, hooks changed everything by giving you access to lower level features of React outside of the context of a component. When you work with hooks, You can think of them like low level primitives of the React framework that give you special abilities that you wouldn't otherwise have in vanilla JavaScript. The hooks themselves are functions which always start with the name of use because you're using the superpowers of the React framework. Now before you start using hooks, there's really just one rule you should be aware of, and that's to only call them at the top level of a functional component. They don't work inside of regular JavaScript functions, nested functions, loops, or anything like that. The only exception to this rule is when building your own custom hooks, which we'll look at towards the end of the video. Now the question becomes, what do these primitives or hooks actually do? Let's break them down 1 by 1, starting with use state. Use state is easily the most important and often used hook.
To import it in your React app, type use into the IDE, and that should give you a list of all the hooks that are available to you. Highlight use state, then hit enter to automatically import it from React. The purpose of use state is to handle reactive data.
programming
Any data that changes in the application is called state. And when the state changes, you want React to update the UI so the latest changes are reflected to the end user. The hook takes one optional argument, which is the default state, which we'll go ahead and set to 0. The function then returns an array that contains 2 values you can use within your component. The reason they're returned in an array is because we can destructure them with JavaScript to easily assign the values to local variables that we can name whatever we want. The first value is the reactive data or state. If we then reference it in the UI and its value changes in the future, React will automatically rebuild the UI to show the latest value. It'll start with a value of 0, our default in the hook, but how do we then change its value in the future? The second element in the array is a setter function. For example, we might listen to the on click event on the button, and when clicked, we'll call the set count function to increment the count by 1. If we compare this code to a class based component, you can see it's far more complex. We need a class to extend a React component, then a constructor to initialize the state, and also notice how we're required to reference the this keyword all over the place.
Use state, in my opinion, is a much cleaner solution. Now we're ready to tackle the second most important hook, useEffect, which also happens to be one of the most confusing. And in order to understand it, you first need to understand the component life cycle. Here in our old class component, We're implementing methods to handle different life cycle events.
policy
systems
debate
Here's a simplified breakdown of the component life cycle. The component is added to the UI or mounted, which can only happen once, then reactive data on the component can change or it's updated, which can happen multiple times. Then finally, at some point, the component will be removed from the UI or unmounted. Now keep these 3 life cycle events or side effects in mind as we talk about the useEffect hook, which allows us to implement logic for all of them from within a single function API. Use effect is a function that takes a function you define as its first argument. React will then run your function or a side effect after it has updated the DOM. With the current implementation, it will run this function anytime stateful data changes on the component. That means it'll run once when the component is initialized with the default value, then run again each time the state or count is updated. In most cases, though, you'll likely want more fine grained control over that behavior. For example, imagine we need to fetch data when the component is first initialized, then update the state asynchronously after the data has been fetched. This code would result in an infinite loop because every time we do the fetch, we then update the state, which then triggers another fetch and so on forever. The way we address this is by adding a second argument to useEffect, which is an array of dependencies. If you add an empty array, it means there are no dependencies, which means it will only run once when the component is first initialized. But in other cases, You might want to rerun the function anytime certain staple data has changed. You can do that by adding the state to the dependencies array. Now React will track that value, and anytime it changes, it will rerun this function. Now one last thing you might wanna do with useEffect is run some tear down code when the component is destroyed. The way we implement a teardown function is to return a function from our useEffect callback. React will take the function returned here, then call it when the component is destroyed. And with that, let's move on to our next hook, use context. This hook allows you to work with React's context API, which itself is a mechanism that allows you to share or scope values throughout the entire component tree. Let's imagine we have an object called moods that can be happy or sad. To share the current mood across multiple disconnected components, we can create a context.
One part of the application might be happy, so we use a context provider to scope the happy mood there. Now any child component inside of it can inherit that value without needing to pass props down to the children. And that finally brings us to the use context hook.
children
parenting
It allows us to access or consume the current value from the context provider, which might live many levels higher in the component tree.
Reading a parent value with use context is much easier than passing props down through multiple children. Now if the mood changes from happy to sad in the parent provider, the value here will be updated automatically. Now if you've ever used React context in Past, you've likely used the consumer component.
parenting
The use context hook is basically a cleaner replacement for the consumer. And now let's switch gears to use ref. And this hook allows you to create a mutable object that will keep the same reference between renders. It can be used when you have a value that changes, kind of like set state, but the difference being that it doesn't trigger a rerender when the value changes. For example, if we try to build a counter button with use ref, we could reference the current count by calling count dot current. However, when we click the button, The count would never change in the UI because use ref doesn't trigger a rerender like set state does. So that can be useful when you need a mutable value. But a more common use case for use ref is to grab HTML elements from the DOM. We can start by creating a null reference called my button, then connect it to the raw HTML button using the ref attribute. From there, we could reference the HTML button in a function to call native DOM APIs like click in this example, which would programmatically click the button. The bottom line is that when you need to grab an element from the dom, use ref is the hook you're looking for. The next hook we'll look at is a pretty scary one, use reducer.
But what it does is actually very similar to set state. It just goes about it in a different way using the Redux pattern, which works like this. Instead of updating the state directly, you dispatch actions that go to a reducer function, and that reducer function determines how to compute the next state.
systems
Now just like use state, use reducer returns an array of 2 values with the first value being the reactive state that you want to show in the UI.
The second value is where things get different. Instead of a function that updates the state, you're given a function that can dispatch an action. An action is just an object that has a type, which can be any string you want, and an optional data payload. You might dispatch an action when a button is clicked, which will trigger your reducer function.
operations
The reducer function is something you define and pass as the argument to the use reducer hook. The function takes the current state and the action as arguments and uses these two values to compute the next state, which is usually handled inside of a switch statement.
In this example, if the action is increment, we add 1. If it's decrement, we subtract 1. And lastly, I'll point out the hook also takes the initial state as its second argument. Now you may be wondering why you'd ever wanna use code like this because it looks way more complex than just using set state. The answer, which not everyone will agree with, is that it helps your code manage complex as it grows. As you add more components to your app, it becomes more difficult to manage state in a reliable and predictable way, and the Redux pattern can help with that.
programming
software development
Now we're ready to move on to the use memo hook, which can help you optimize computation cost for improved performance. But keep in mind that you don't want to prematurely to really optimize performance. So think of this hook as an opt in tool to deal with expensive computations that you know are hurting performance. Let's imagine we have a counter again, but then we compute an additional property after that called expensive count that requires some kind of expensive computation. Instead of recomputing on every render, we can memoize the value. We write a function that returns the computed value. Then as a second argument, We add the dependencies to determine when this computation should be run, which in this case would be whenever the count changes. That's great for memoizing return values, But in other cases, you may want to memoize an entire function, in which case, you're looking for the useCallback hook. When you define a function in a component, A new function object is created each time the component is rerendered. Usually, this isn't a big deal for performance, but in some cases, You may want to memoize the function.
programming
A common use case is when you pass the same function down to multiple child components. By wrapping the function in useCallback, We can prevent unnecessary rerenders of the children because they'll always be using the same function object. Now let's switch gears to one of the more confusing hooks, Use imperative handle. If you build a reusable component library in React, you may need to get access to the underlying dom element and then forward it so it can be accessed by the consumers of your component library. You can access a native DOM element with the use ref hook that we showed earlier. Then you can wrap the component in forward ref to make that ref available when someone uses this component. Now use imperative handle comes in if you want to change the behavior of the post ref. You might want to modify the methods on the native element, but in reality, the need for this hook is probably pretty rare. And speaking of rare, another hook that you'll rarely need is use layout effect. It works just like the use effect hook with one small difference. Your callback will run after rendering the component, but before the actual updates have been painted to the screen. That means React will wait for your code to finish running before it updates the UI for the end user, but there may be situations where you need to calculate a scroll position or something else in the UI before the DOM is visually updated. And with that, we've reached the final built in hook, use debug value. But this hook won't make a lot of sense until you start building your own custom hooks from scratch. If you pull up your app in the browser, then open React dev tools, you'll notice that every component in the tree will tell you a little bit about the hooks that are defined there. The purpose of use debug value is to make it possible to define your own custom labels here in React dev tools when you start building custom hooks.
Let's go ahead and build a custom hook now to see that in action. Notice how our component is using 2 hooks together. We have use state to define a display name for the user and then use effect to fetch that username from the database somewhere. Now let's imagine we have 10 other components that need to implement the same exact logic. The great thing about hooks is that we can easily do that by defining our own function called the use display name. It's just a regular JavaScript function that implements the same code we had in our component.
programming
The only difference is that we now want to return the display name from this function so we can use it elsewhere in the application, and we can now put it to use in multiple components. One final touch here is to add use debug value to our custom hook. The argument passed to the hook will be the value shown in React Dev Tools. As you can see here, it shows the display name label along with the value as well as a breakdown of the primitive hooks that went into this custom hook. And with that, we've looked at every single built in React hook. If this video helped you, please like and subscribe, and consider becoming a pro member to get access to the upcoming React Firebase course. Thanks for watching, and I will see you in the next one.
React Hooks. Use features of the React framework by calling special hook functions from within a component. We can build static or dump components in React by writing functions. However, UI components are often dynamic. They may need to change the state of their data, react to life cycle events, access elements from the DOM, among many or things. But prior to React version 16.8, developers were required to write classes to take advantage of certain React features. Now you can still use classes in React, but hooks generally provide a more ergonomic way to build components because you can reuse stateful logic without changing your component hierarchy. React has 10 built in hooks, and you'll understand what every single one of them does by the end of today's video. In addition, you'll learn how to build your own hooks from scratch to extract your own component logic into reusable functions. If you're new here, like and subscribe, and consider becoming a pro member at FireShip IO to get access to my upcoming next to Firebase course. If you're new to React, it's helpful to understand why hooks exist in the first place. In the past, stateful logic or data that Changes within the application was tightly coupled to a class based component. That means in order to work with reactive data, you needed to create a component. That seems reasonable, but what it led to in reality was a complex tree of nested components. No. Don't like that. And this is where I have to admit that I used to really dislike React because sharing any logic required some frustrating jujitsu, like higher order components and render props, which are patterns that have you passing components as arguments to other components, and that just always felt way more complex to me than patterns you find in other frameworks like Angular. Fortunately, hooks changed everything by giving you access to lower level features of React outside of the context of a component. When you work with hooks, You can think of them like low level primitives of the React framework that give you special abilities that you wouldn't otherwise have in vanilla JavaScript. The hooks themselves are functions which always start with the name of use because you're using the superpowers of the React framework. Now before you start using hooks, there's really just one rule you should be aware of, and that's to only call them at the top level of a functional component. They don't work inside of regular JavaScript functions, nested functions, loops, or anything like that. The only exception to this rule is when building your own custom hooks, which we'll look at towards the end of the video. Now the question becomes, what do these primitives or hooks actually do? Let's break them down 1 by 1, starting with use state. Use state is easily the most important and often used hook. To import it in your React app, type use into the IDE, and that should give you a list of all the hooks that are available to you. Highlight use state, then hit enter to automatically import it from React. The purpose of use state is to handle reactive data. Any data that changes in the application is called state. And when the state changes, you want React to update the UI so the latest changes are reflected to the end user. The hook takes one optional argument, which is the default state, which we'll go ahead and set to 0. The function then returns an array that contains 2 values you can use within your component. The reason they're returned in an array is because we can destructure them with JavaScript to easily assign the values to local variables that we can name whatever we want. The first value is the reactive data or state. If we then reference it in the UI and its value changes in the future, React will automatically rebuild the UI to show the latest value. It'll start with a value of 0, our default in the hook, but how do we then change its value in the future? The second element in the array is a setter function. For example, we might listen to the on click event on the button, and when clicked, we'll call the set count function to increment the count by 1. If we compare this code to a class based component, you can see it's far more complex. We need a class to extend a React component, then a constructor to initialize the state, and also notice how we're required to reference the this keyword all over the place. Use state, in my opinion, is a much cleaner solution. Now we're ready to tackle the second most important hook, useEffect, which also happens to be one of the most confusing. And in order to understand it, you first need to understand the component life cycle. Here in our old class component, We're implementing methods to handle different life cycle events. Here's a simplified breakdown of the component life cycle. The component is added to the UI or mounted, which can only happen once, then reactive data on the component can change or it's updated, which can happen multiple times. Then finally, at some point, the component will be removed from the UI or unmounted. Now keep these 3 life cycle events or side effects in mind as we talk about the useEffect hook, which allows us to implement logic for all of them from within a single function API. Use effect is a function that takes a function you define as its first argument. React will then run your function or a side effect after it has updated the DOM. With the current implementation, it will run this function anytime stateful data changes on the component. That means it'll run once when the component is initialized with the default value, then run again each time the state or count is updated. In most cases, though, you'll likely want more fine grained control over that behavior. For example, imagine we need to fetch data when the component is first initialized, then update the state asynchronously after the data has been fetched. This code would result in an infinite loop because every time we do the fetch, we then update the state, which then triggers another fetch and so on forever. The way we address this is by adding a second argument to useEffect, which is an array of dependencies. If you add an empty array, it means there are no dependencies, which means it will only run once when the component is first initialized. But in other cases, You might want to rerun the function anytime certain staple data has changed. You can do that by adding the state to the dependencies array. Now React will track that value, and anytime it changes, it will rerun this function. Now one last thing you might wanna do with useEffect is run some tear down code when the component is destroyed. The way we implement a teardown function is to return a function from our useEffect callback. React will take the function returned here, then call it when the component is destroyed. And with that, let's move on to our next hook, use context. This hook allows you to work with React's context API, which itself is a mechanism that allows you to share or scope values throughout the entire component tree. Let's imagine we have an object called moods that can be happy or sad. To share the current mood across multiple disconnected components, we can create a context. One part of the application might be happy, so we use a context provider to scope the happy mood there. Now any child component inside of it can inherit that value without needing to pass props down to the children. And that finally brings us to the use context hook. It allows us to access or consume the current value from the context provider, which might live many levels higher in the component tree. Reading a parent value with use context is much easier than passing props down through multiple children. Now if the mood changes from happy to sad in the parent provider, the value here will be updated automatically. Now if you've ever used React context in Past, you've likely used the consumer component. The use context hook is basically a cleaner replacement for the consumer. And now let's switch gears to use ref. And this hook allows you to create a mutable object that will keep the same reference between renders. It can be used when you have a value that changes, kind of like set state, but the difference being that it doesn't trigger a rerender when the value changes. For example, if we try to build a counter button with use ref, we could reference the current count by calling count dot current. However, when we click the button, The count would never change in the UI because use ref doesn't trigger a rerender like set state does. So that can be useful when you need a mutable value. But a more common use case for use ref is to grab HTML elements from the DOM. We can start by creating a null reference called my button, then connect it to the raw HTML button using the ref attribute. From there, we could reference the HTML button in a function to call native DOM APIs like click in this example, which would programmatically click the button. The bottom line is that when you need to grab an element from the dom, use ref is the hook you're looking for. The next hook we'll look at is a pretty scary one, use reducer. But what it does is actually very similar to set state. It just goes about it in a different way using the Redux pattern, which works like this. Instead of updating the state directly, you dispatch actions that go to a reducer function, and that reducer function determines how to compute the next state. Now just like use state, use reducer returns an array of 2 values with the first value being the reactive state that you want to show in the UI. The second value is where things get different. Instead of a function that updates the state, you're given a function that can dispatch an action. An action is just an object that has a type, which can be any string you want, and an optional data payload. You might dispatch an action when a button is clicked, which will trigger your reducer function. The reducer function is something you define and pass as the argument to the use reducer hook. The function takes the current state and the action as arguments and uses these two values to compute the next state, which is usually handled inside of a switch statement. In this example, if the action is increment, we add 1. If it's decrement, we subtract 1. And lastly, I'll point out the hook also takes the initial state as its second argument. Now you may be wondering why you'd ever wanna use code like this because it looks way more complex than just using set state. The answer, which not everyone will agree with, is that it helps your code manage complex as it grows. As you add more components to your app, it becomes more difficult to manage state in a reliable and predictable way, and the Redux pattern can help with that. Now we're ready to move on to the use memo hook, which can help you optimize computation cost for improved performance. But keep in mind that you don't want to prematurely to really optimize performance. So think of this hook as an opt in tool to deal with expensive computations that you know are hurting performance. Let's imagine we have a counter again, but then we compute an additional property after that called expensive count that requires some kind of expensive computation. Instead of recomputing on every render, we can memoize the value. We write a function that returns the computed value. Then as a second argument, We add the dependencies to determine when this computation should be run, which in this case would be whenever the count changes. That's great for memoizing return values, But in other cases, you may want to memoize an entire function, in which case, you're looking for the useCallback hook. When you define a function in a component, A new function object is created each time the component is rerendered. Usually, this isn't a big deal for performance, but in some cases, You may want to memoize the function. A common use case is when you pass the same function down to multiple child components. By wrapping the function in useCallback, We can prevent unnecessary rerenders of the children because they'll always be using the same function object. Now let's switch gears to one of the more confusing hooks, Use imperative handle. If you build a reusable component library in React, you may need to get access to the underlying dom element and then forward it so it can be accessed by the consumers of your component library. You can access a native DOM element with the use ref hook that we showed earlier. Then you can wrap the component in forward ref to make that ref available when someone uses this component. Now use imperative handle comes in if you want to change the behavior of the post ref. You might want to modify the methods on the native element, but in reality, the need for this hook is probably pretty rare. And speaking of rare, another hook that you'll rarely need is use layout effect. It works just like the use effect hook with one small difference. Your callback will run after rendering the component, but before the actual updates have been painted to the screen. That means React will wait for your code to finish running before it updates the UI for the end user, but there may be situations where you need to calculate a scroll position or something else in the UI before the DOM is visually updated. And with that, we've reached the final built in hook, use debug value. But this hook won't make a lot of sense until you start building your own custom hooks from scratch. If you pull up your app in the browser, then open React dev tools, you'll notice that every component in the tree will tell you a little bit about the hooks that are defined there. The purpose of use debug value is to make it possible to define your own custom labels here in React dev tools when you start building custom hooks. Let's go ahead and build a custom hook now to see that in action. Notice how our component is using 2 hooks together. We have use state to define a display name for the user and then use effect to fetch that username from the database somewhere. Now let's imagine we have 10 other components that need to implement the same exact logic. The great thing about hooks is that we can easily do that by defining our own function called the use display name. It's just a regular JavaScript function that implements the same code we had in our component. The only difference is that we now want to return the display name from this function so we can use it elsewhere in the application, and we can now put it to use in multiple components. One final touch here is to add use debug value to our custom hook. The argument passed to the hook will be the value shown in React Dev Tools. As you can see here, it shows the display name label along with the value as well as a breakdown of the primitive hooks that went into this custom hook. And with that, we've looked at every single built in React hook. If this video helped you, please like and subscribe, and consider becoming a pro member to get access to the upcoming React Firebase course. Thanks for watching, and I will see you in the next one.
React
react
Hooks.
hooks
Use
use
features
features
of
of
the
the
React
react
framework
framework
by
by
calling
calling
special
special
hook
hook
functions
functions
from
from
within
within
a
a
component.
component
We
we
can
can
build
build
static
static
or
or
dump
dump
components
components
in
in
React
react
by
by
writing
writing
functions.
functions
However,
however
UI
ui
components
components
are
are
often
often
dynamic.
dynamic
They
they
may
may
need
need
to
to
change
change
the
the
state
state
of
of
their
their
data,
data
react
react
to
to
life
life
cycle
cycle
events,
events
access
access
elements
elements
from
from
the
the
DOM,
dom
among
among
many
many
or
or
things.
things
But
but
prior
prior
to
to
React
react
version
version
16.8,
16.8
developers
developers
were
were
required
required
to
to
write
write
classes
classes
to
to
take
take
advantage
advantage
of
of
certain
certain
React
react
features.
features
Now
now
you
you
can
can
still
still
use
use
classes
classes
in
in
React,
react
but
but
hooks
hooks
generally
generally
provide
provide
a
a
more
more
ergonomic
ergonomic
way
way
to
to
build
build
components
components
because
because
you
you
can
can
reuse
reuse
stateful
stateful
logic
logic
without
without
changing
changing
your
your
component
component
hierarchy.
hierarchy
React
react
has
has
10
10
built
built
in
in
hooks,
hooks
and
and
you'll
you'll
understand
understand
what
what
every
every
single
single
one
one
of
of
them
them
does
does
by
by
the
the
end
end
of
of
today's
today's
video.
video
In
in
addition,
addition
you'll
you'll
learn
learn
how
how
to
to
build
build
your
your
own
own
hooks
hooks
from
from
scratch
scratch
to
to
extract
extract
your
your
own
own
component
component
logic
logic
into
into
reusable
reusable
functions.
functions
If
if
you're
you're
new
new
here,
here
like
like
and
and
subscribe,
subscribe
and
and
consider
consider
becoming
becoming
a
a
pro
pro
member
member
at
at
FireShip
fireship
IO
io
to
to
get
get
access
access
to
to
my
my
upcoming
upcoming
next
next
to
to
Firebase
firebase
course.
course
If
if
you're
you're
new
new
to
to
React,
react
it's
it's
helpful
helpful
to
to
understand
understand
why
why
hooks
hooks
exist
exist
in
in
the
the
first
first
place.
place
In
in
the
the
past,
past
stateful
stateful
logic
logic
or
or
data
data
that
that
Changes
changes
within
within
the
the
application
application
was
was
tightly
tightly
coupled
coupled
to
to
a
a
class
class
based
based
component.
component
That
that
means
means
in
in
order
order
to
to
work
work
with
with
reactive
reactive
data,
data
you
you
needed
needed
to
to
create
create
a
a
component.
component
That
that
seems
seems
reasonable,
reasonable
but
but
what
what
it
it
led
led
to
to
in
in
reality
reality
was
was
a
a
complex
complex
tree
tree
of
of
nested
nested
components.
components
No.
no
Don't
don't
like
like
that.
that
And
and
this
this
is
is
where
where
I
i
have
have
to
to
admit
admit
that
that
I
i
used
used
to
to
really
really
dislike
dislike
React
react
because
because
sharing
sharing
any
any
logic
logic
required
required
some
some
frustrating
frustrating
jujitsu,
jujitsu
like
like
higher
higher
order
order
components
components
and
and
render
render
props,
props
which
which
are
are
patterns
patterns
that
that
have
have
you
you
passing
passing
components
components
as
as
arguments
arguments
to
to
other
other
components,
components
and
and
that
that
just
just
always
always
felt
felt
way
way
more
more
complex
complex
to
to
me
me
than
than
patterns
patterns
you
you
find
find
in
in
other
other
frameworks
frameworks
like
like
Angular.
angular
Fortunately,
fortunately
hooks
hooks
changed
changed
everything
everything
by
by
giving
giving
you
you
access
access
to
to
lower
lower
level
level
features
features
of
of
React
react
outside
outside
of
of
the
the
context
context
of
of
a
a
component.
component
When
when
you
you
work
work
with
with
hooks,
hooks
You
you
can
can
think
think
of
of
them
them
like
like
low
low
level
level
primitives
primitives
of
of
the
the
React
react
framework
framework
that
that
give
give
you
you
special
special
abilities
abilities
that
that
you
you
wouldn't
wouldn't
otherwise
otherwise
have
have
in
in
vanilla
vanilla
JavaScript.
javascript
The
the
hooks
hooks
themselves
themselves
are
are
functions
functions
which
which
always
always
start
start
with
with
the
the
name
name
of
of
use
use
because
because
you're
you're
using
using
the
the
superpowers
superpowers
of
of
the
the
React
react
framework.
framework
Now
now
before
before
you
you
start
start
using
using
hooks,
hooks
there's
there's
really
really
just
just
one
one
rule
rule
you
you
should
should
be
be
aware
aware
of,
of
and
and
that's
that's
to
to
only
only
call
call
them
them
at
at
the
the
top
top
level
level
of
of
a
a
functional
functional
component.
component
They
they
don't
don't
work
work
inside
inside
of
of
regular
regular
JavaScript
javascript
functions,
functions
nested
nested
functions,
functions
loops,
loops
or
or
anything
anything
like
like
that.
that
The
the
only
only
exception
exception
to
to
this
this
rule
rule
is
is
when
when
building
building
your
your
own
own
custom
custom
hooks,
hooks
which
which
we'll
we'll
look
look
at
at
towards
towards
the
the
end
end
of
of
the
the
video.
video
Now
now
the
the
question
question
becomes,
becomes
what
what
do
do
these
these
primitives
primitives
or
or
hooks
hooks
actually
actually
do?
do
Let's
let's
break
break
them
them
down
down
1
1
by
by
1,
1
starting
starting
with
with
use
use
state.
state
Use
use
state
state
is
is
easily
easily
the
the
most
most
important
important
and
and
often
often
used
used
hook.
hook
To
to
import
import
it
it
in
in
your
your
React
react
app,
app
type
type
use
use
into
into
the
the
IDE,
ide
and
and
that
that
should
should
give
give
you
you
a
a
list
list
of
of
all
all
the
the
hooks
hooks
that
that
are
are
available
available
to
to
you.
you
Highlight
highlight
use
use
state,
state
then
then
hit
hit
enter
enter
to
to
automatically
automatically
import
import
it
it
from
from
React.
react
The
the
purpose
purpose
of
of
use
use
state
state
is
is
to
to
handle
handle
reactive
reactive
data.
data
Any
any
data
data
that
that
changes
changes
in
in
the
the
application
application
is
is
called
called
state.
state
And
and
when
when
the
the
state
state
changes,
changes
you
you
want
want
React
react
to
to
update
update
the
the
UI
ui
so
so
the
the
latest
latest
changes
changes
are
are
reflected
reflected
to
to
the
the
end
end
user.
user
The
the
hook
hook
takes
takes
one
one
optional
optional
argument,
argument
which
which
is
is
the
the
default
default
state,
state
which
which
we'll
we'll
go
go
ahead
ahead
and
and
set
set
to
to
0.
0
The
the
function
function
then
then
returns
returns
an
an
array
array
that
that
contains
contains
2
2
values
values
you
you
can
can
use
use
within
within
your
your
component.
component
The
the
reason
reason
they're
they're
returned
returned
in
in
an
an
array
array
is
is
because
because
we
we
can
can
destructure
destructure
them
them
with
with
JavaScript
javascript
to
to
easily
easily
assign
assign
the
the
values
values
to
to
local
local
variables
variables
that
that
we
we
can
can
name
name
whatever
whatever
we
we
want.
want
The
the
first
first
value
value
is
is
the
the
reactive
reactive
data
data
or
or
state.
state
If
if
we
we
then
then
reference
reference
it
it
in
in
the
the
UI
ui
and
and
its
its
value
value
changes
changes
in
in
the
the
future,
future
React
react
will
will
automatically
automatically
rebuild
rebuild
the
the
UI
ui
to
to
show
show
the
the
latest
latest
value.
value
It'll
it'll
start
start
with
with
a
a
value
value
of
of
0,
0
our
our
default
default
in
in
the
the
hook,
hook
but
but
how
how
do
do
we
we
then
then
change
change
its
its
value
value
in
in
the
the
future?
future
The
the
second
second
element
element
in
in
the
the
array
array
is
is
a
a
setter
setter
function.
function
For
for
example,
example
we
we
might
might
listen
listen
to
to
the
the
on
on
click
click
event
event
on
on
the
the
button,
button
and
and
when
when
clicked,
clicked
we'll
we'll
call
call
the
the
set
set
count
count
function
function
to
to
increment
increment
the
the
count
count
by
by
1.
1
If
if
we
we
compare
compare
this
this
code
code
to
to
a
a
class
class
based
based
component,
component
you
you
can
can
see
see
it's
it's
far
far
more
more
complex.
complex
We
we
need
need
a
a
class
class
to
to
extend
extend
a
a
React
react
component,
component
then
then
a
a
constructor
constructor
to
to
initialize
initialize
the
the
state,
state
and
and
also
also
notice
notice
how
how
we're
we're
required
required
to
to
reference
reference
the
the
this
this
keyword
keyword
all
all
over
over
the
the
place.
place
Use
use
state,
state
in
in
my
my
opinion,
opinion
is
is
a
a
much
much
cleaner
cleaner
solution.
solution
Now
now
we're
we're
ready
ready
to
to
tackle
tackle
the
the
second
second
most
most
important
important
hook,
hook
useEffect,
useeffect
which
which
also
also
happens
happens
to
to
be
be
one
one
of
of
the
the
most
most
confusing.
confusing
And
and
in
in
order
order
to
to
understand
understand
it,
it
you
you
first
first
need
need
to
to
understand
understand
the
the
component
component
life
life
cycle.
cycle
Here
here
in
in
our
our
old
old
class
class
component,
component
We're
we're
implementing
implementing
methods
methods
to
to
handle
handle
different
different
life
life
cycle
cycle
events.
events
Here's
here's
a
a
simplified
simplified
breakdown
breakdown
of
of
the
the
component
component
life
life
cycle.
cycle
The
the
component
component
is
is
added
added
to
to
the
the
UI
ui
or
or
mounted,
mounted
which
which
can
can
only
only
happen
happen
once,
once
then
then
reactive
reactive
data
data
on
on
the
the
component
component
can
can
change
change
or
or
it's
it's
updated,
updated
which
which
can
can
happen
happen
multiple
multiple
times.
times
Then
then
finally,
finally
at
at
some
some
point,
point
the
the
component
component
will
will
be
be
removed
removed
from
from
the
the
UI
ui
or
or
unmounted.
unmounted
Now
now
keep
keep
these
these
3
3
life
life
cycle
cycle
events
events
or
or
side
side
effects
effects
in
in
mind
mind
as
as
we
we
talk
talk
about
about
the
the
useEffect
useeffect
hook,
hook
which
which
allows
allows
us
us
to
to
implement
implement
logic
logic
for
for
all
all
of
of
them
them
from
from
within
within
a
a
single
single
function
function
API.
api
Use
use
effect
effect
is
is
a
a
function
function
that
that
takes
takes
a
a
function
function
you
you
define
define
as
as
its
its
first
first
argument.
argument
React
react
will
will
then
then
run
run
your
your
function
function
or
or
a
a
side
side
effect
effect
after
after
it
it
has
has
updated
updated
the
the
DOM.
dom
With
with
the
the
current
current
implementation,
implementation
it
it
will
will
run
run
this
this
function
function
anytime
anytime
stateful
stateful
data
data
changes
changes
on
on
the
the
component.
component
That
that
means
means
it'll
it'll
run
run
once
once
when
when
the
the
component
component
is
is
initialized
initialized
with
with
the
the
default
default
value,
value
then
then
run
run
again
again
each
each
time
time
the
the
state
state
or
or
count
count
is
is
updated.
updated
In
in
most
most
cases,
cases
though,
though
you'll
you'll
likely
likely
want
want
more
more
fine
fine
grained
grained
control
control
over
over
that
that
behavior.
behavior
For
for
example,
example
imagine
imagine
we
we
need
need
to
to
fetch
fetch
data
data
when
when
the
the
component
component
is
is
first
first
initialized,
initialized
then
then
update
update
the
the
state
state
asynchronously
asynchronously
after
after
the
the
data
data
has
has
been
been
fetched.
fetched
This
this
code
code
would
would
result
result
in
in
an
an
infinite
infinite
loop
loop
because
because
every
every
time
time
we
we
do
do
the
the
fetch,
fetch
we
we
then
then
update
update
the
the
state,
state
which
which
then
then
triggers
triggers
another
another
fetch
fetch
and
and
so
so
on
on
forever.
forever
The
the
way
way
we
we
address
address
this
this
is
is
by
by
adding
adding
a
a
second
second
argument
argument
to
to
useEffect,
useeffect
which
which
is
is
an
an
array
array
of
of
dependencies.
dependencies
If
if
you
you
add
add
an
an
empty
empty
array,
array
it
it
means
means
there
there
are
are
no
no
dependencies,
dependencies
which
which
means
means
it
it
will
will
only
only
run
run
once
once
when
when
the
the
component
component
is
is
first
first
initialized.
initialized
But
but
in
in
other
other
cases,
cases
You
you
might
might
want
want
to
to
rerun
rerun
the
the
function
function
anytime
anytime
certain
certain
staple
staple
data
data
has
has
changed.
changed
You
you
can
can
do
do
that
that
by
by
adding
adding
the
the
state
state
to
to
the
the
dependencies
dependencies
array.
array
Now
now
React
react
will
will
track
track
that
that
value,
value
and
and
anytime
anytime
it
it
changes,
changes
it
it
will
will
rerun
rerun
this
this
function.
function
Now
now
one
one
last
last
thing
thing
you
you
might
might
wanna
wanna
do
do
with
with
useEffect
useeffect
is
is
run
run
some
some
tear
tear
down
down
code
code
when
when
the
the
component
component
is
is
destroyed.
destroyed
The
the
way
way
we
we
implement
implement
a
a
teardown
teardown
function
function
is
is
to
to
return
return
a
a
function
function
from
from
our
our
useEffect
useeffect
callback.
callback
React
react
will
will
take
take
the
the
function
function
returned
returned
here,
here
then
then
call
call
it
it
when
when
the
the
component
component
is
is
destroyed.
destroyed
And
and
with
with
that,
that
let's
let's
move
move
on
on
to
to
our
our
next
next
hook,
hook
use
use
context.
context
This
this
hook
hook
allows
allows
you
you
to
to
work
work
with
with
React's
react's
context
context
API,
api
which
which
itself
itself
is
is
a
a
mechanism
mechanism
that
that
allows
allows
you
you
to
to
share
share
or
or
scope
scope
values
values
throughout
throughout
the
the
entire
entire
component
component
tree.
tree
Let's
let's
imagine
imagine
we
we
have
have
an
an
object
object
called
called
moods
moods
that
that
can
can
be
be
happy
happy
or
or
sad.
sad
To
to
share
share
the
the
current
current
mood
mood
across
across
multiple
multiple
disconnected
disconnected
components,
components
we
we
can
can
create
create
a
a
context.
context
One
one
part
part
of
of
the
the
application
application
might
might
be
be
happy,
happy
so
so
we
we
use
use
a
a
context
context
provider
provider
to
to
scope
scope
the
the
happy
happy
mood
mood
there.
there
Now
now
any
any
child
child
component
component
inside
inside
of
of
it
it
can
can
inherit
inherit
that
that
value
value
without
without
needing
needing
to
to
pass
pass
props
props
down
down
to
to
the
the
children.
children
And
and
that
that
finally
finally
brings
brings
us
us
to
to
the
the
use
use
context
context
hook.
hook
It
it
allows
allows
us
us
to
to
access
access
or
or
consume
consume
the
the
current
current
value
value
from
from
the
the
context
context
provider,
provider
which
which
might
might
live
live
many
many
levels
levels
higher
higher
in
in
the
the
component
component
tree.
tree
Reading
reading
a
a
parent
parent
value
value
with
with
use
use
context
context
is
is
much
much
easier
easier
than
than
passing
passing
props
props
down
down
through
through
multiple
multiple
children.
children
Now
now
if
if
the
the
mood
mood
changes
changes
from
from
happy
happy
to
to
sad
sad
in
in
the
the
parent
parent
provider,
provider
the
the
value
value
here
here
will
will
be
be
updated
updated
automatically.
automatically
Now
now
if
if
you've
you've
ever
ever
used
used
React
react
context
context
in
in
Past,
past
you've
you've
likely
likely
used
used
the
the
consumer
consumer
component.
component
The
the
use
use
context
context
hook
hook
is
is
basically
basically
a
a
cleaner
cleaner
replacement
replacement
for
for
the
the
consumer.
consumer
And
and
now
now
let's
let's
switch
switch
gears
gears
to
to
use
use
ref.
ref
And
and
this
this
hook
hook
allows
allows
you
you
to
to
create
create
a
a
mutable
mutable
object
object
that
that
will
will
keep
keep
the
the
same
same
reference
reference
between
between
renders.
renders
It
it
can
can
be
be
used
used
when
when
you
you
have
have
a
a
value
value
that
that
changes,
changes
kind
kind
of
of
like
like
set
set
state,
state
but
but
the
the
difference
difference
being
being
that
that
it
it
doesn't
doesn't
trigger
trigger
a
a
rerender
rerender
when
when
the
the
value
value
changes.
changes
For
for
example,
example
if
if
we
we
try
try
to
to
build
build
a
a
counter
counter
button
button
with
with
use
use
ref,
ref
we
we
could
could
reference
reference
the
the
current
current
count
count
by
by
calling
calling
count
count
dot
dot
current.
current
However,
however
when
when
we
we
click
click
the
the
button,
button
The
the
count
count
would
would
never
never
change
change
in
in
the
the
UI
ui
because
because
use
use
ref
ref
doesn't
doesn't
trigger
trigger
a
a
rerender
rerender
like
like
set
set
state
state
does.
does
So
so
that
that
can
can
be
be
useful
useful
when
when
you
you
need
need
a
a
mutable
mutable
value.
value
But
but
a
a
more
more
common
common
use
use
case
case
for
for
use
use
ref
ref
is
is
to
to
grab
grab
HTML
html
elements
elements
from
from
the
the
DOM.
dom
We
we
can
can
start
start
by
by
creating
creating
a
a
null
null
reference
reference
called
called
my
my
button,
button
then
then
connect
connect
it
it
to
to
the
the
raw
raw
HTML
html
button
button
using
using
the
the
ref
ref
attribute.
attribute
From
from
there,
there
we
we
could
could
reference
reference
the
the
HTML
html
button
button
in
in
a
a
function
function
to
to
call
call
native
native
DOM
dom
APIs
apis
like
like
click
click
in
in
this
this
example,
example
which
which
would
would
programmatically
programmatically
click
click
the
the
button.
button
The
the
bottom
bottom
line
line
is
is
that
that
when
when
you
you
need
need
to
to
grab
grab
an
an
element
element
from
from
the
the
dom,
dom
use
use
ref
ref
is
is
the
the
hook
hook
you're
you're
looking
looking
for.
for
The
the
next
next
hook
hook
we'll
we'll
look
look
at
at
is
is
a
a
pretty
pretty
scary
scary
one,
one
use
use
reducer.
reducer
But
but
what
what
it
it
does
does
is
is
actually
actually
very
very
similar
similar
to
to
set
set
state.
state
It
it
just
just
goes
goes
about
about
it
it
in
in
a
a
different
different
way
way
using
using
the
the
Redux
redux
pattern,
pattern
which
which
works
works
like
like
this.
this
Instead
instead
of
of
updating
updating
the
the
state
state
directly,
directly
you
you
dispatch
dispatch
actions
actions
that
that
go
go
to
to
a
a
reducer
reducer
function,
function
and
and
that
that
reducer
reducer
function
function
determines
determines
how
how
to
to
compute
compute
the
the
next
next
state.
state
Now
now
just
just
like
like
use
use
state,
state
use
use
reducer
reducer
returns
returns
an
an
array
array
of
of
2
2
values
values
with
with
the
the
first
first
value
value
being
being
the
the
reactive
reactive
state
state
that
that
you
you
want
want
to
to
show
show
in
in
the
the
UI.
ui
The
the
second
second
value
value
is
is
where
where
things
things
get
get
different.
different
Instead
instead
of
of
a
a
function
function
that
that
updates
updates
the
the
state,
state
you're
you're
given
given
a
a
function
function
that
that
can
can
dispatch
dispatch
an
an
action.
action
An
an
action
action
is
is
just
just
an
an
object
object
that
that
has
has
a
a
type,
type
which
which
can
can
be
be
any
any
string
string
you
you
want,
want
and
and
an
an
optional
optional
data
data
payload.
payload
You
you
might
might
dispatch
dispatch
an
an
action
action
when
when
a
a
button
button
is
is
clicked,
clicked
which
which
will
will
trigger
trigger
your
your
reducer
reducer
function.
function
The
the
reducer
reducer
function
function
is
is
something
something
you
you
define
define
and
and
pass
pass
as
as
the
the
argument
argument
to
to
the
the
use
use
reducer
reducer
hook.
hook
The
the
function
function
takes
takes
the
the
current
current
state
state
and
and
the
the
action
action
as
as
arguments
arguments
and
and
uses
uses
these
these
two
two
values
values
to
to
compute
compute
the
the
next
next
state,
state
which
which
is
is
usually
usually
handled
handled
inside
inside
of
of
a
a
switch
switch
statement.
statement
In
in
this
this
example,
example
if
if
the
the
action
action
is
is
increment,
increment
we
we
add
add
1.
1
If
if
it's
it's
decrement,
decrement
we
we
subtract
subtract
1.
1
And
and
lastly,
lastly
I'll
i'll
point
point
out
out
the
the
hook
hook
also
also
takes
takes
the
the
initial
initial
state
state
as
as
its
its
second
second
argument.
argument
Now
now
you
you
may
may
be
be
wondering
wondering
why
why
you'd
you'd
ever
ever
wanna
wanna
use
use
code
code
like
like
this
this
because
because
it
it
looks
looks
way
way
more
more
complex
complex
than
than
just
just
using
using
set
set
state.
state
The
the
answer,
answer
which
which
not
not
everyone
everyone
will
will
agree
agree
with,
with
is
is
that
that
it
it
helps
helps
your
your
code
code
manage
manage
complex
complex
as
as
it
it
grows.
grows
As
as
you
you
add
add
more
more
components
components
to
to
your
your
app,
app
it
it
becomes
becomes
more
more
difficult
difficult
to
to
manage
manage
state
state
in
in
a
a
reliable
reliable
and
and
predictable
predictable
way,
way
and
and
the
the
Redux
redux
pattern
pattern
can
can
help
help
with
with
that.
that
Now
now
we're
we're
ready
ready
to
to
move
move
on
on
to
to
the
the
use
use
memo
memo
hook,
hook
which
which
can
can
help
help
you
you
optimize
optimize
computation
computation
cost
cost
for
for
improved
improved
performance.
performance
But
but
keep
keep
in
in
mind
mind
that
that
you
you
don't
don't
want
want
to
to
prematurely
prematurely
to
to
really
really
optimize
optimize
performance.
performance
So
so
think
think
of
of
this
this
hook
hook
as
as
an
an
opt
opt
in
in
tool
tool
to
to
deal
deal
with
with
expensive
expensive
computations
computations
that
that
you
you
know
know
are
are
hurting
hurting
performance.
performance
Let's
let's
imagine
imagine
we
we
have
have
a
a
counter
counter
again,
again
but
but
then
then
we
we
compute
compute
an
an
additional
additional
property
property
after
after
that
that
called
called
expensive
expensive
count
count
that
that
requires
requires
some
some
kind
kind
of
of
expensive
expensive
computation.
computation
Instead
instead
of
of
recomputing
recomputing
on
on
every
every
render,
render
we
we
can
can
memoize
memoize
the
the
value.
value
We
we
write
write
a
a
function
function
that
that
returns
returns
the
the
computed
computed
value.
value
Then
then
as
as
a
a
second
second
argument,
argument
We
we
add
add
the
the
dependencies
dependencies
to
to
determine
determine
when
when
this
this
computation
computation
should
should
be
be
run,
run
which
which
in
in
this
this
case
case
would
would
be
be
whenever
whenever
the
the
count
count
changes.
changes
That's
that's
great
great
for
for
memoizing
memoizing
return
return
values,
values
But
but
in
in
other
other
cases,
cases
you
you
may
may
want
want
to
to
memoize
memoize
an
an
entire
entire
function,
function
in
in
which
which
case,
case
you're
you're
looking
looking
for
for
the
the
useCallback
usecallback
hook.
hook
When
when
you
you
define
define
a
a
function
function
in
in
a
a
component,
component
A
a
new
new
function
function
object
object
is
is
created
created
each
each
time
time
the
the
component
component
is
is
rerendered.
rerendered
Usually,
usually
this
this
isn't
isn't
a
a
big
big
deal
deal
for
for
performance,
performance
but
but
in
in
some
some
cases,
cases
You
you
may
may
want
want
to
to
memoize
memoize
the
the
function.
function
A
a
common
common
use
use
case
case
is
is
when
when
you
you
pass
pass
the
the
same
same
function
function
down
down
to
to
multiple
multiple
child
child
components.
components
By
by
wrapping
wrapping
the
the
function
function
in
in
useCallback,
usecallback
We
we
can
can
prevent
prevent
unnecessary
unnecessary
rerenders
rerenders
of
of
the
the
children
children
because
because
they'll
they'll
always
always
be
be
using
using
the
the
same
same
function
function
object.
object
Now
now
let's
let's
switch
switch
gears
gears
to
to
one
one
of
of
the
the
more
more
confusing
confusing
hooks,
hooks
Use
use
imperative
imperative
handle.
handle
If
if
you
you
build
build
a
a
reusable
reusable
component
component
library
library
in
in
React,
react
you
you
may
may
need
need
to
to
get
get
access
access
to
to
the
the
underlying
underlying
dom
dom
element
element
and
and
then
then
forward
forward
it
it
so
so
it
it
can
can
be
be
accessed
accessed
by
by
the
the
consumers
consumers
of
of
your
your
component
component
library.
library
You
you
can
can
access
access
a
a
native
native
DOM
dom
element
element
with
with
the
the
use
use
ref
ref
hook
hook
that
that
we
we
showed
showed
earlier.
earlier
Then
then
you
you
can
can
wrap
wrap
the
the
component
component
in
in
forward
forward
ref
ref
to
to
make
make
that
that
ref
ref
available
available
when
when
someone
someone
uses
uses
this
this
component.
component
Now
now
use
use
imperative
imperative
handle
handle
comes
comes
in
in
if
if
you
you
want
want
to
to
change
change
the
the
behavior
behavior
of
of
the
the
post
post
ref.
ref
You
you
might
might
want
want
to
to
modify
modify
the
the
methods
methods
on
on
the
the
native
native
element,
element
but
but
in
in
reality,
reality
the
the
need
need
for
for
this
this
hook
hook
is
is
probably
probably
pretty
pretty
rare.
rare
And
and
speaking
speaking
of
of
rare,
rare
another
another
hook
hook
that
that
you'll
you'll
rarely
rarely
need
need
is
is
use
use
layout
layout
effect.
effect
It
it
works
works
just
just
like
like
the
the
use
use
effect
effect
hook
hook
with
with
one
one
small
small
difference.
difference
Your
your
callback
callback
will
will
run
run
after
after
rendering
rendering
the
the
component,
component
but
but
before
before
the
the
actual
actual
updates
updates
have
have
been
been
painted
painted
to
to
the
the
screen.
screen
That
that
means
means
React
react
will
will
wait
wait
for
for
your
your
code
code
to
to
finish
finish
running
running
before
before
it
it
updates
updates
the
the
UI
ui
for
for
the
the
end
end
user,
user
but
but
there
there
may
may
be
be
situations
situations
where
where
you
you
need
need
to
to
calculate
calculate
a
a
scroll
scroll
position
position
or
or
something
something
else
else
in
in
the
the
UI
ui
before
before
the
the
DOM
dom
is
is
visually
visually
updated.
updated
And
and
with
with
that,
that
we've
we've
reached
reached
the
the
final
final
built
built
in
in
hook,
hook
use
use
debug
debug
value.
value
But
but
this
this
hook
hook
won't
won't
make
make
a
a
lot
lot
of
of
sense
sense
until
until
you
you
start
start
building
building
your
your
own
own
custom
custom
hooks
hooks
from
from
scratch.
scratch
If
if
you
you
pull
pull
up
up
your
your
app
app
in
in
the
the
browser,
browser
then
then
open
open
React
react
dev
dev
tools,
tools
you'll
you'll
notice
notice
that
that
every
every
component
component
in
in
the
the
tree
tree
will
will
tell
tell
you
you
a
a
little
little
bit
bit
about
about
the
the
hooks
hooks
that
that
are
are
defined
defined
there.
there
The
the
purpose
purpose
of
of
use
use
debug
debug
value
value
is
is
to
to
make
make
it
it
possible
possible
to
to
define
define
your
your
own
own
custom
custom
labels
labels
here
here
in
in
React
react
dev
dev
tools
tools
when
when
you
you
start
start
building
building
custom
custom
hooks.
hooks
Let's
let's
go
go
ahead
ahead
and
and
build
build
a
a
custom
custom
hook
hook
now
now
to
to
see
see
that
that
in
in
action.
action
Notice
notice
how
how
our
our
component
component
is
is
using
using
2
2
hooks
hooks
together.
together
We
we
have
have
use
use
state
state
to
to
define
define
a
a
display
display
name
name
for
for
the
the
user
user
and
and
then
then
use
use
effect
effect
to
to
fetch
fetch
that
that
username
username
from
from
the
the
database
database
somewhere.
somewhere
Now
now
let's
let's
imagine
imagine
we
we
have
have
10
10
other
other
components
components
that
that
need
need
to
to
implement
implement
the
the
same
same
exact
exact
logic.
logic
The
the
great
great
thing
thing
about
about
hooks
hooks
is
is
that
that
we
we
can
can
easily
easily
do
do
that
that
by
by
defining
defining
our
our
own
own
function
function
called
called
the
the
use
use
display
display
name.
name
It's
it's
just
just
a
a
regular
regular
JavaScript
javascript
function
function
that
that
implements
implements
the
the
same
same
code
code
we
we
had
had
in
in
our
our
component.
component
The
the
only
only
difference
difference
is
is
that
that
we
we
now
now
want
want
to
to
return
return
the
the
display
display
name
name
from
from
this
this
function
function
so
so
we
we
can
can
use
use
it
it
elsewhere
elsewhere
in
in
the
the
application,
application
and
and
we
we
can
can
now
now
put
put
it
it
to
to
use
use
in
in
multiple
multiple
components.
components
One
one
final
final
touch
touch
here
here
is
is
to
to
add
add
use
use
debug
debug
value
value
to
to
our
our
custom
custom
hook.
hook
The
the
argument
argument
passed
passed
to
to
the
the
hook
hook
will
will
be
be
the
the
value
value
shown
shown
in
in
React
react
Dev
dev
Tools.
tools
As
as
you
you
can
can
see
see
here,
here
it
it
shows
shows
the
the
display
display
name
name
label
label
along
along
with
with
the
the
value
value
as
as
well
well
as
as
a
a
breakdown
breakdown
of
of
the
the
primitive
primitive
hooks
hooks
that
that
went
went
into
into
this
this
custom
custom
hook.
hook
And
and
with
with
that,
that
we've
we've
looked
looked
at
at
every
every
single
single
built
built
in
in
React
react
hook.
hook
If
if
this
this
video
video
helped
helped
you,
you
please
please
like
like
and
and
subscribe,
subscribe
and
and
consider
consider
becoming
becoming
a
a
pro
pro
member
member
to
to
get
get
access
access
to
to
the
the
upcoming
upcoming
React
react
Firebase
firebase
course.
course
Thanks
thanks
for
for
watching,
watching
and
and
I
i
will
will
see
see
you
you
in
in
the
the
next
next
one.
one
success
The speakers discuss the use of React Hooks and the use of features of the React framework, including hooks and the use of a use honor function. They explain the use of state and use the use of a use honor function, as well as the use of a context provider and the use of opt-in tools. The speakers also discuss the use of React context in a parent provider, including the use of a parent value and use context hook, and the use of imperative hamper and a reusable component library. They mention a course on React development and emphasize the importance of using React context for optimization of computation costs.
10 React Hooks Explained // Plus Build your own from Scratch
React Hooks. Use features of the React framework by calling special hook functions from within a component. We can build static or dump components in React by writing functions. However, UI components are often dynamic. They may need to change the state of their data, react to life cycle events, access elements from the DOM, among many or things. But prior to React version 16.8, developers were required to write classes to take advantage of certain React features. Now you can still use classes in React, but hooks generally provide a more ergonomic way to build components because you can reuse stateful logic without changing your component hierarchy. React has 10 built in hooks, and you'll understand what every single one of them does by the end of today's video. In addition, you'll learn how to build your own hooks from scratch to extract your own component logic into reusable functions. If you're new here, like and subscribe, and consider becoming a pro member at FireShip IO to get access to my upcoming next to Firebase course. If you're new to React, it's helpful to understand why hooks exist in the first place. In the past, stateful logic or data that Changes within the application was tightly coupled to a class based component. That means in order to work with reactive data, you needed to create a component. That seems reasonable, but what it led to in reality was a complex tree of nested components. No. Don't like that. And this is where I have to admit that I used to really dislike React because sharing any logic required some frustrating jujitsu, like higher order components and render props, which are patterns that have you passing components as arguments to other components, and that just always felt way more complex to me than patterns you find in other frameworks like Angular. Fortunately, hooks changed everything by giving you access to lower level features of React outside of the context of a component. When you work with hooks, You can think of them like low level primitives of the React framework that give you special abilities that you wouldn't otherwise have in vanilla JavaScript. The hooks themselves are functions which always start with the name of use because you're using the superpowers of the React framework. Now before you start using hooks, there's really just one rule you should be aware of, and that's to only call them at the top level of a functional component. They don't work inside of regular JavaScript functions, nested functions, loops, or anything like that. The only exception to this rule is when building your own custom hooks, which we'll look at towards the end of the video. Now the question becomes, what do these primitives or hooks actually do? Let's break them down 1 by 1, starting with use state. Use state is easily the most important and often used hook. To import it in your React app, type use into the IDE, and that should give you a list of all the hooks that are available to you. Highlight use state, then hit enter to automatically import it from React. The purpose of use state is to handle reactive data. Any data that changes in the application is called state. And when the state changes, you want React to update the UI so the latest changes are reflected to the end user. The hook takes one optional argument, which is the default state, which we'll go ahead and set to 0. The function then returns an array that contains 2 values you can use within your component. The reason they're returned in an array is because we can destructure them with JavaScript to easily assign the values to local variables that we can name whatever we want. The first value is the reactive data or state. If we then reference it in the UI and its value changes in the future, React will automatically rebuild the UI to show the latest value. It'll start with a value of 0, our default in the hook, but how do we then change its value in the future? The second element in the array is a setter function. For example, we might listen to the on click event on the button, and when clicked, we'll call the set count function to increment the count by 1. If we compare this code to a class based component, you can see it's far more complex. We need a class to extend a React component, then a constructor to initialize the state, and also notice how we're required to reference the this keyword all over the place. Use state, in my opinion, is a much cleaner solution. Now we're ready to tackle the second most important hook, useEffect, which also happens to be one of the most confusing. And in order to understand it, you first need to understand the component life cycle. Here in our old class component, We're implementing methods to handle different life cycle events. Here's a simplified breakdown of the component life cycle. The component is added to the UI or mounted, which can only happen once, then reactive data on the component can change or it's updated, which can happen multiple times. Then finally, at some point, the component will be removed from the UI or unmounted. Now keep these 3 life cycle events or side effects in mind as we talk about the useEffect hook, which allows us to implement logic for all of them from within a single function API. Use effect is a function that takes a function you define as its first argument. React will then run your function or a side effect after it has updated the DOM. With the current implementation, it will run this function anytime stateful data changes on the component. That means it'll run once when the component is initialized with the default value, then run again each time the state or count is updated. In most cases, though, you'll likely want more fine grained control over that behavior. For example, imagine we need to fetch data when the component is first initialized, then update the state asynchronously after the data has been fetched. This code would result in an infinite loop because every time we do the fetch, we then update the state, which then triggers another fetch and so on forever. The way we address this is by adding a second argument to useEffect, which is an array of dependencies. If you add an empty array, it means there are no dependencies, which means it will only run once when the component is first initialized. But in other cases, You might want to rerun the function anytime certain staple data has changed. You can do that by adding the state to the dependencies array. Now React will track that value, and anytime it changes, it will rerun this function. Now one last thing you might wanna do with useEffect is run some tear down code when the component is destroyed. The way we implement a teardown function is to return a function from our useEffect callback. React will take the function returned here, then call it when the component is destroyed. And with that, let's move on to our next hook, use context. This hook allows you to work with React's context API, which itself is a mechanism that allows you to share or scope values throughout the entire component tree. Let's imagine we have an object called moods that can be happy or sad. To share the current mood across multiple disconnected components, we can create a context. One part of the application might be happy, so we use a context provider to scope the happy mood there. Now any child component inside of it can inherit that value without needing to pass props down to the children. And that finally brings us to the use context hook. It allows us to access or consume the current value from the context provider, which might live many levels higher in the component tree. Reading a parent value with use context is much easier than passing props down through multiple children. Now if the mood changes from happy to sad in the parent provider, the value here will be updated automatically. Now if you've ever used React context in Past, you've likely used the consumer component. The use context hook is basically a cleaner replacement for the consumer. And now let's switch gears to use ref. And this hook allows you to create a mutable object that will keep the same reference between renders. It can be used when you have a value that changes, kind of like set state, but the difference being that it doesn't trigger a rerender when the value changes. For example, if we try to build a counter button with use ref, we could reference the current count by calling count dot current. However, when we click the button, The count would never change in the UI because use ref doesn't trigger a rerender like set state does. So that can be useful when you need a mutable value. But a more common use case for use ref is to grab HTML elements from the DOM. We can start by creating a null reference called my button, then connect it to the raw HTML button using the ref attribute. From there, we could reference the HTML button in a function to call native DOM APIs like click in this example, which would programmatically click the button. The bottom line is that when you need to grab an element from the dom, use ref is the hook you're looking for. The next hook we'll look at is a pretty scary one, use reducer. But what it does is actually very similar to set state. It just goes about it in a different way using the Redux pattern, which works like this. Instead of updating the state directly, you dispatch actions that go to a reducer function, and that reducer function determines how to compute the next state. Now just like use state, use reducer returns an array of 2 values with the first value being the reactive state that you want to show in the UI. The second value is where things get different. Instead of a function that updates the state, you're given a function that can dispatch an action. An action is just an object that has a type, which can be any string you want, and an optional data payload. You might dispatch an action when a button is clicked, which will trigger your reducer function. The reducer function is something you define and pass as the argument to the use reducer hook. The function takes the current state and the action as arguments and uses these two values to compute the next state, which is usually handled inside of a switch statement. In this example, if the action is increment, we add 1. If it's decrement, we subtract 1. And lastly, I'll point out the hook also takes the initial state as its second argument. Now you may be wondering why you'd ever wanna use code like this because it looks way more complex than just using set state. The answer, which not everyone will agree with, is that it helps your code manage complex as it grows. As you add more components to your app, it becomes more difficult to manage state in a reliable and predictable way, and the Redux pattern can help with that. Now we're ready to move on to the use memo hook, which can help you optimize computation cost for improved performance. But keep in mind that you don't want to prematurely to really optimize performance. So think of this hook as an opt in tool to deal with expensive computations that you know are hurting performance. Let's imagine we have a counter again, but then we compute an additional property after that called expensive count that requires some kind of expensive computation. Instead of recomputing on every render, we can memoize the value. We write a function that returns the computed value. Then as a second argument, We add the dependencies to determine when this computation should be run, which in this case would be whenever the count changes. That's great for memoizing return values, But in other cases, you may want to memoize an entire function, in which case, you're looking for the useCallback hook. When you define a function in a component, A new function object is created each time the component is rerendered. Usually, this isn't a big deal for performance, but in some cases, You may want to memoize the function. A common use case is when you pass the same function down to multiple child components. By wrapping the function in useCallback, We can prevent unnecessary rerenders of the children because they'll always be using the same function object. Now let's switch gears to one of the more confusing hooks, Use imperative handle. If you build a reusable component library in React, you may need to get access to the underlying dom element and then forward it so it can be accessed by the consumers of your component library. You can access a native DOM element with the use ref hook that we showed earlier. Then you can wrap the component in forward ref to make that ref available when someone uses this component. Now use imperative handle comes in if you want to change the behavior of the post ref. You might want to modify the methods on the native element, but in reality, the need for this hook is probably pretty rare. And speaking of rare, another hook that you'll rarely need is use layout effect. It works just like the use effect hook with one small difference. Your callback will run after rendering the component, but before the actual updates have been painted to the screen. That means React will wait for your code to finish running before it updates the UI for the end user, but there may be situations where you need to calculate a scroll position or something else in the UI before the DOM is visually updated. And with that, we've reached the final built in hook, use debug value. But this hook won't make a lot of sense until you start building your own custom hooks from scratch. If you pull up your app in the browser, then open React dev tools, you'll notice that every component in the tree will tell you a little bit about the hooks that are defined there. The purpose of use debug value is to make it possible to define your own custom labels here in React dev tools when you start building custom hooks. Let's go ahead and build a custom hook now to see that in action. Notice how our component is using 2 hooks together. We have use state to define a display name for the user and then use effect to fetch that username from the database somewhere. Now let's imagine we have 10 other components that need to implement the same exact logic. The great thing about hooks is that we can easily do that by defining our own function called the use display name. It's just a regular JavaScript function that implements the same code we had in our component. The only difference is that we now want to return the display name from this function so we can use it elsewhere in the application, and we can now put it to use in multiple components. One final touch here is to add use debug value to our custom hook. The argument passed to the hook will be the value shown in React Dev Tools. As you can see here, it shows the display name label along with the value as well as a breakdown of the primitive hooks that went into this custom hook. And with that, we've looked at every single built in React hook. If this video helped you, please like and subscribe, and consider becoming a pro member to get access to the upcoming React Firebase course. Thanks for watching, and I will see you in the next one.
The speakers discuss the use of React Hooks and the use of features of the React framework, including hooks and the use of a use honor function. They explain the use of state and use the use of a use honor function, as well as the use of a context provider and the use of opt-in tools. The speakers also discuss the use of React context in a parent provider, including the use of a parent value and use context hook, and the use of imperative hamper and a reusable component library. They mention a course on React development and emphasize the importance of using React context for optimization of computation costs.