Custom Hooks are a way to reuse state logic in React. It starts with use, calls other Hooks and returns data or methods; its core advantages are reuse logic, simplify components, and optimize structure; for example, useWindowSize can encapsulate window listening logic; when creating, naming specifications, calling Hooks at the top level, and returning values ??reasonably; when using it, pay attention to avoiding class components, reducing the number of parameters, and following a single responsibility; compared with higher-level components, Hooks are more intuitive and have no nesting problems; mastering the principles of naming, calling and responsibilities can improve code quality.

In React, a custom Hook is a way to extract component logic into a reusable function. It is essentially a JavaScript function starting with use , which can call other Hooks (such as useState , useEffect , etc.) to encapsulate some common state logic or side effects processing.

Why use a custom Hook?

As React's components become more complex, state logic tends to be scattered in multiple life cycle hooks or recurring between different components. Custom Hooks are used to solve these problems:

• Reuse state logic : instead of copy-paste code.
• Make components simpler : Extract complex logic, and components only focus on the UI layer.
• Better organization of code structures : grouped by function, not by life cycle.

For example: If you have multiple components that need to listen to window size changes, you can put this part of the logic into a useWindowSize custom Hook instead of writing each component once.

How to create a custom hook

The process of creating a custom Hook is actually very simple, you only need to follow a few rules and steps:

1. Name begins with use
   For example, useInput , useFetch , useLocalStorage , which is a React convention, which can ensure that the ESLint plug-in recognizes and checks whether the use of the Hook is correct.

2. Call other Hooks internally
   Custom Hooks must only call other Hooks at the top level and cannot be placed in loops, conditions, or nested functions.

3. Return the data or method you need
   You can return status values, update functions, boolean values, objects, etc.

Example: Create a useInput Hook

 import { useState } from 'react';

function useInput(initialValue) {
  const [value, setValue] = useState(initialValue);

  const handleChange = (e) => {
    setValue(e.target.value);
  };

  return {
    value,
    onChange: handleChange,
  };
}

Then you can use it in any component like this:

 function NameInput() {
  const name = useInput('');

  Return (
    <div>
      <input {...name} />
      <p>The name you entered is: {name.value}</p>
    </div>
  );
}

Common Notes and Best Practices

• Don't use custom Hooks in class components
  Because a Hook can only be used in function components or other Hooks.

• Avoid passing too many parameters to the Hook
  If your custom Hook receives many parameters, it may mean that it is too heavy to do so, consider splitting it into multiple smaller Hooks.

• Reasonably combine built-in Hooks
  Use useEffect , useRef , and useCallback to optimize performance or manage side effects.

• Maintaining a single responsibility principle
  A Hook does only one thing, which makes it easier to test and reuse.

The difference between custom Hook and advanced components

Many people used advanced components (HOCs) to reuse logic, but HOCs have several disadvantages:

• It is easy to produce "nested hell"
• Props are easily overwritten or conflicted
• Unintuitive state sharing

By contrast, the Hook is more flat, intuitive, and has direct access to status and side effects without the need for packaging components.

Basically that's it. Custom Hooks are a very practical ability in React development. Although they seem simple, they can greatly improve the maintainability and reusability of the code in actual projects. Just remember a few key points: naming specifications, calling rules, and clear responsibilities, and you can write a useful and stable custom Hook.

The above is the detailed content of What are custom hooks and how do you create one in React?. For more information, please follow other related articles on the PHP Chinese website!