‫Welcome back.
‫So, the last part of this section is all about custom hooks.
‫And so let's start by understanding what custom hooks are
‫and when to create one.
‫Now, custom hooks are all about reusability.
‫And in React, we have basically two types
‫of things that we can reuse.
‫A piece of UI or a piece of logic.
‫That's it.
‫That's all the things that we can reuse.
‫Now, if we want to reuse a piece of UI,
‫we already know that we use a component.
‫On the other hand, if you want to reuse logic in React,
‫you first need to ask the question,
‫does the logic that I want to reuse have any hooks?
‫If not, all you need is a regular function,
‫which can live either inside or outside of your component.
‫However, if the logic does contain any React hook,
‫you cannot just extract the logic into a regular function.
‫Instead, what you need to create is a custom hook.
‫So basically, custom hooks allow us to reuse stateful logic
‫among multiple components
‫and actually not only stateful logic
‫but really any logic that contains one or more React hooks.
‫So we can say
‫that custom hooks allow us to reuse non-visual logic,
‫which is a more generic term.
‫Now, just like regular functions or components or effect,
‫one hook should only have one purpose.
‫So it should only do one specific, well-defined thing.
‫So the idea is not to simply put all the hooks
‫of a component into a custom hook and call it a day.
‫No.
‫The idea is to make custom hooks reusable and portable
‫so that you can even use them
‫in completely different projects.
‫And actually, now that we have had hooks
‫for so many years in React, developers have started
‫to share their custom hooks with the world.
‫And so, there are now lots of custom hook libraries
‫that you can download from NPM and use in your projects.
‫Now, since custom hooks are made out of regular React hooks,
‫the rules of hooks that we learned about before still apply
‫to them as well.
‫Okay, but now, let's look at an actual custom hook
‫so that we can learn just a bit more about them.
‫So first, a custom hook is really just
‫a JavaScript function, so it can receive and return any data
‫that is relevant to this custom hook.
‫In fact, it's very common to return
‫an object or an array from a custom hook.
‫And notice how this is different from components,
‫which are also just regular JavaScript functions
‫but which can only receive props
‫and always have to return some JSX.
‫Now, the difference between regular functions
‫and custom hooks is that custom hooks
‫need to use one or more React hooks.
‫So this custom hook here, for example
‫uses two-use state and one-use effect hook to abstract
‫a simple fetch functionality into this custom hook.
‫And finally, in order for us
‫and React to recognize dysfunction as an actual hook,
‫the function name needs to start with the word use.
‫So, just like all the built-in React hooks.
‫So in this example, that's use fetch.
‫And this is really not optional.
‫So you need to give the function a name, starting with use.
‫Otherwise, it's gonna be just a regular function
‫in the eyes of React. ‫Now, right.
‫And that's all the theory
‫that you need to know about custom hooks.
‫And so, let's now go build ourselves some custom hooks
‫for the rest of this section.