What are Custom Hooks When to Create One | Lecture 166 | React.JS 🔥

Summary

Custom 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

00:00

🔧 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.

Keywords

💡Custom Hooks

Custom Hooks are a feature in React that allow for the reuse of stateful logic across different components. They are functions that can encapsulate complex logic and expose them as reusable components, making it easier to manage state and side effects in a clean and modular way. In the context of the video, custom hooks are emphasized as a means to enhance reusability in React applications, especially when dealing with logic that involves React hooks.

💡Reusability

Reusability refers to the ability to use something again in different contexts or for different purposes. In the context of the video, reusability is a core concept for custom hooks, as they are designed to allow developers to reuse pieces of logic or stateful operations that would otherwise be tied to a specific component. This promotes a more efficient and modular approach to building React applications.

💡React Hooks

React Hooks are a feature introduced in React 16.8 that allows users to manage state and side effects in functional components without converting them into class components. They provide a way to 'hook into' React state and lifecycle methods from functional components. In the video, React hooks are the foundation upon which custom hooks are built, and the rules for using them apply to custom hooks as well.

💡UI

UI stands for User Interface, which refers to the visual and interactive aspects of a software application or a website. In the context of the video, UI is one of the two types of things that can be reused in React, with the other being logic. Reusing UI typically involves creating components that can be used in multiple places within an application.

💡Stateful Logic

Stateful logic refers to the part of a program that manages and maintains state, which can change over time. In React, this often involves tracking and updating the data that affects the UI. The video emphasizes that custom hooks are particularly useful for reusing stateful logic, allowing developers to abstract complex state management into reusable functions that can be shared across different components.

💡Non-Visual Logic

Non-visual logic refers to the underlying code and processes that are not directly tied to the visual representation of a user interface. This concept is crucial in the video as it highlights the ability of custom hooks to encapsulate and reuse logic that does not directly contribute to the visual layout or appearance of a component. This allows for cleaner code organization and easier maintenance.

💡Single Purpose

The principle of 'single purpose' refers to the practice of designing functions or components to do one specific task and do it well. In the context of the video, this concept is applied to custom hooks, emphasizing that each hook should have a clear, well-defined purpose. This approach promotes clarity, maintainability, and reusability in code design.

💡React Function

A React function, in the context of the video, refers to a JavaScript function that React uses to create components. These functions can be either class components or functional components. The video highlights that custom hooks, like components, are also regular JavaScript functions but with the added ability to use React hooks and manage state or side effects.

💡NPM Libraries

NPM, or Node Package Manager, is a registry of JavaScript packages that can be included in projects. It is a platform where developers can share and reuse code. In the video, NPM libraries are mentioned as a place where developers can find and use custom hooks created by others, expanding the toolkit available for building React applications.

💡Use Prefix

The 'use' prefix is a naming convention in React for custom hooks. It is a requirement for custom hooks to be recognized as such by React. The prefix indicates that the function is intended to be used as a hook within the React ecosystem, and it helps to differentiate custom hooks from regular JavaScript functions.

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.