In this video, we're going to dive deep into
the world of custom hooks in React. We're going to learn what they are, understand
when and why we should use them, and we're also going to build a couple of them from
scratch. Using custom hooks is one of the most important
design patterns in React because they allow you to write clean code, have maintainable
components, and build really great React applications. So get ready, get excited, because you are
going to learn a lot in this video. So first, let's talk about why you should
even care about custom hooks. React does provide a handful of built-in hooks,
and those seem to work just fine, right? Well, as you use these hooks and as your application
grows in complexity, you will find yourself recreating similar patterns, implementing
logic that is redundant, or even mixing related pieces of code. This often results in really big and messy
components that are difficult to understand and maintain. This component is the CommentsPage component,
responsible for showing comments. We have some state here at the top for fetching
the comments, along with some loading and error states to track the fetch status. We then have state for adding a comment, including
a useRef and more loading and error states for the addition process. Then, we have a useEffect with a function
definition that fetches the comments and then sets isLoading and error where it has to. Finally, we have another useEffect that creates
an event listener and adds a comment whenever Ctrl and Enter is pressed. A page component should not have to implement
all of its logic but rather delegate it to other components or custom hooks. Writing your components this way is very bad
for performance since any change to a state variable will cause the entire component to
re-render, often unnecessarily. Let's talk about custom hooks in React. Custom hooks are simple JavaScript functions
that can use other hooks within them, like useState, useEffect, useCallback, useMemo,
useRef, useLayoutEffect, and so on. Let's look at an example. Here we have a custom hook called useCounter. This simple function uses useState to create
a piece of state called 'value'. We instantiate 'value' with useState, giving
it an initial state of 0. We'd import useState from React for this to
function correctly. This custom hook follows the rules of hooks,
starting with 'use' and using camelCase notation. Unlike React components, this hook doesn't
return JSX; instead, it might return stateful values, functions, or any other data that
is supposed to be reused across components. Suppose we have a demo component where we
want to use our custom hook. We'd write useCounter to invoke the custom
hook within the component. Moreover, we could return 'value' from the
custom hook to access and use that state in the component. Custom hooks can also accept parameters. For instance, we can pass a 'step' parameter
to useCounter that determines how much the count should increment with each call. We use this 'step' to adjust the behavior
of the custom hook based on the needs of the component using it. Let's refactor our CommentsPage component
to start using custom hooks. We'll create a hook called useFetchComments
that encapsulates all logic related to fetching comments. We move the related state and effects from
the component into this custom hook. Similarly, we'll create a hook called useAddComment
for adding comments. We'll extract the related useRef, state, and
effects from the CommentsPage component into the custom hook. We have to ensure that we import useState,
useRef, and useEffect
in our custom hooks. By using these hooks in the
CommentsPage component, it becomes much simpler and easier to manage. Any addition of functionality will now be
more manageable and maintainable. We also address the issue of sharing state
and functionality between hooks. For instance, we have the useFetchComments
hook manage comments solely, and when adding a comment
with useAddComment, we call back to useFetchComments to refresh the list after an addition. Our code is now clean, easy to understand, and
scalable. UseFetchComments is similar to
what React Query provides with the useQuery hook, and useAddComment is akin
to React Hook Form, for which I have full video tutorials available. If you enjoyed this video and want to see
more like it, give a thumbs up and subscribe. You
can also watch a different video that YouTube thinks you'll
enjoy. My name has been Darius Cosden from Cosden
Solutions. Thank you so much for watching, and I'll see
you in the next video. Ciao, ciao.
