What are Custom Hooks When to Create One | Lecture 166 | React.JS ๐ฅ
Summary
TLDRCustom hooks in React are about reusability, allowing developers to share stateful or non-visual logic across multiple components. They are JavaScript functions that use one or more React hooks, often returning an object or array. Custom hooks must start with 'use' to be recognized by React, following the same rules as built-in hooks. Developers can create reusable and portable custom hooks, and many are available in libraries on NPM for use in projects.
Takeaways
- ๐ Custom hooks in React are about reusability, allowing for the sharing of UI or logic components.
- ๐ฆ When reusing UI, components are the standard solution, while custom hooks are for reusable logic involving React hooks.
- ๐ฃ If the logic to be reused doesn't involve hooks, a regular function is sufficient.
- ๐ Custom hooks enable the sharing of stateful or non-visual logic across multiple components.
- ๐ซ Custom hooks should be designed with a single purpose, focusing on reusability and portability.
- ๐ Custom hooks are built from regular React hooks, and thus, adhere to the same rules.
- ๐ The use of custom hooks has led to a culture of sharing among developers, with many libraries available on NPM.
- ๐งฉ A custom hook is a JavaScript function that can accept and return data relevant to its purpose, often an object or array.
- โ๏ธ Custom hooks must include one or more React hooks to function properly.
- ๐ The naming convention for custom hooks is mandatory, starting with the word 'use', e.g., 'useFetch'.
- ๐ ๏ธ Custom hooks abstract complex logic, like fetching data, into reusable, manageable pieces.
Q & A
What are custom hooks in React?
-Custom hooks in React are functions that allow for the reuse of stateful logic or any logic that involves one or more React hooks across multiple components. They are a way to encapsulate logic that can be shared among different parts of an application.
What can be reused in React besides UI components?
-Besides UI components, a piece of logic can also be reused in React through the use of custom hooks.
When is it necessary to create a custom hook?
-You should create a custom hook when the logic you want to reuse involves React hooks or when you need to share stateful logic across multiple components.
How do custom hooks differ from regular functions in React?
-Custom hooks differ from regular functions because they must use one or more React hooks and they are designed to be reusable across different components, whereas regular functions can live inside or outside components and do not necessarily involve React hooks.
What is the naming convention for custom hooks?
-Custom hooks must start with the word 'use' followed by a descriptive name, similar to the naming convention of built-in React hooks.
What is the purpose of the 'useFetch' custom hook mentioned in the script?
-The 'useFetch' custom hook is designed to abstract a simple fetch functionality, encapsulating the logic for making API requests within a reusable hook.
How can custom hooks be shared with the world?
-Developers can share their custom hooks by creating libraries and publishing them to the NPM registry, making them available for others to use in their projects.
What is the recommended approach to structuring custom hooks?
-Each custom hook should have a single purpose and be well-defined, focusing on a specific piece of logic or state management to ensure reusability and maintainability.
How do you know if the logic you want to reuse requires a custom hook?
-If the logic you want to reuse involves any React hooks, then you should create a custom hook. If it does not involve React hooks, a regular function will suffice.
What is the difference between components and custom hooks in terms of return values?
-Components in React can only receive props and must return JSX, whereas custom hooks can receive and return any data relevant to the hook, often returning objects or arrays.
Why is it important to adhere to the naming convention for custom hooks?
-Adhering to the naming convention with 'use' as a prefix is important because it signals to both developers and the React framework that the function is a custom hook, allowing for proper recognition and integration within the React ecosystem.
Outlines
๐ง Introduction to Custom Hooks
This paragraph introduces the concept of custom hooks in React, emphasizing their role in reusability. It explains that custom hooks allow for the reuse of both UI components and logic within React applications. The distinction is made between reusing UI with components and reusing logic with hooks, highlighting that custom hooks are necessary when the logic involves one or more React hooks. The paragraph also mentions the importance of creating hooks with a single purpose and the emergence of custom hook libraries available for use in projects. It concludes with a brief mention of the rules of hooks and a teaser for an upcoming example of a custom hook.
Mindmap
Keywords
๐กCustom Hooks
๐กReusability
๐กReact Hooks
๐กUI
๐กStateful Logic
๐กNon-Visual Logic
๐กSingle Purpose
๐กReact Function
๐กNPM Libraries
๐กUse Prefix
Highlights
Custom hooks are about reusability in React.
In React, you can reuse pieces of UI or logic.
To reuse UI, you use a component.
For reusing logic with React hooks, you create a custom hook.
Custom hooks allow reusing stateful logic across multiple components.
Custom hooks can also reuse non-visual, state-independent logic.
Each hook should have a single purpose, just like functions or components.
Custom hooks should be reusable and portable across different projects.
Developers share custom hooks on platforms like NPM.
The rules of React hooks apply to custom hooks as well.
A custom hook is a JavaScript function that uses React hooks.
Custom hooks often return an object or an array.
Unlike components, custom hooks do not have to return JSX.
Custom hooks must use one or more React hooks.
The function name of a custom hook must start with 'use'.
Starting with 'use' makes a function recognized as a hook by React.
The example given uses 'useFetch' to abstract fetch functionality.
Custom hooks are essential for managing state and side effects in functional components.
Transcripts
โซ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.
Browse More Related Video
React Hooks and Their Rules | Lecture 157 | React.JS ๐ฅ
How to Learn React Fast in 2024: A Beginner's Guide
React Native Mock Interview | Interview Questions for Senior React Native Developers
Learn React Hooks In 6 Minutes
How to Master React in 2024 - The React Roadmap
React useState() hook introduction ๐ฃ
5.0 / 5 (0 votes)