React Hooks has been released for more than three years, and it has brought life cycle to functional components. Now, Hooks is gradually replacing class components. I believe that React development partners have a deep understanding, but do you really fully master hooks? Do you know how to make a good custom hooks?

We know that React Hooks has useState setting variables, useEffect side effects, useRef to get all the attributes of the element, useMemo , useCallback to optimize performance, and of course a custom Hooks to create the Hooks

you want.

next let's take a look at the following questions and ask ourselves if we know all of them:

What is the origin of

• Hooks?

What is the advanced usage of

• useRef ?
• useMemo and useCallback how are they optimized?
• how to design a good custom Hooks?
• how to make a custom Hooks that doesn't need useState to modify properties and refresh views directly?
• how do I make a custom Hooks that can listen for any event?

if you have questions and curiosity about the above questions, then this article should be able to help you.

this article will answer the above questions by introducing custom Hooks , and demonstrate

in the form of case columns with hooks in TS , ahooks .

Note: the custom hook described here may be slightly different from that on ahooks , and will not be considered too much. If it is used in a project, it is recommended to directly use the hook on ahooks .

what is a custom Hooks?

react-hooks is a hook API added after React16.8 to increase the reusability and logicality of the code. The most important thing is to solve the stateless problem of functional components , which not only retains the functional simplicity, but also solves the defect of no data management state

so what is a custom hooks?

Custom hooks is an extension based on react-hooks . You can formulate the corresponding hooks according to your business and requirements, and encapsulate the commonly used logic to make it reusable

how to design a custom Hooks

hooks is essentially a function , and this function is mainly logical reuse . The first thing we need to know is, what are the driving conditions of hooks ?

is actually the modification of props . The use of useState and useReducer is a condition for stateless component updates, which drives custom hooks

General Mode

the name of the custom hooks begins with use , which we designed as

const [xxx,...] = useXXX (parameter one, parameter two)

A simple small example: usePow

Let's write a simple example to learn about Custom hooks

// usePow.ts
const Index = (list: number[]) => {

  return list.map((item:number) => {
    console.log(1)
    return Math.pow(item, 2)
  })
}

export default Index;

// index.tsx
import { Button } from 'antd-mobile';
import React,{ useState } from 'react';
import { usePow } from '@/components';

const Index:React.FC<any> = (props)=> {
  const [flag, setFlag] = useState<boolean>(true)
  const data = usePow([1, 2, 3])
  
  return (
    <div>
      <div>Number:{JSON.stringify(data)}</div>
      <Button color='primary' onClick={() => {setFlag(v => !v)}}>changing-over</Button>
       <div>Switching state:{JSON.stringify(flag)}</div>
    </div>
  );
}

export default Index;

We simply write a usePow . We square the passed number through usePow , and use the button to switch the state to represent the internal state of the function.

We found a problem. Why does clicking the toggle button trigger console.log (1) ?

this obviously increases the performance overhead. In our ideal state, we certainly do not want to do irrelevant rendering, so when we do custom hooks , we must pay attention to the need to reduce performance overhead . Let's add useMemo to the component and try it:

    import { useMemo } from 'react';

    const Index = (list: number[]) => {
      return useMemo(() => list.map((item:number) => {
        console.log(1)
        return Math.pow(item, 2)
      }), []) 
    }
    export default Index;

found that this problem has been solved at this time, so be very careful. A useful custom hooks must be used with useMemo , useCallback and other Api.