This article is reprinted from react-hooks, custom hooks design patterns and their actions

What are custom hooks

Custom hooks are an extension of React-hooks that can be tailored to meet business needs, with a greater focus on logical units. Depending on the business scenario, what exactly do we need react-hooks to do, and how to encapsulate a piece of logic for reuse? That’s where custom hooks came in.

How to design a custom hooks, design specification

Logic + components

Custom hooks focus on logical reuse. Encapsulate a piece of generic logic and use it out of the box when needed.

Custom hooks- driver conditions

Hooks are essentially a function. The execution of a function determines the execution context of the stateless component itself. Every execution of a function (essentially a component update) executes the execution of the custom hooks, so the component itself executes exactly as the hooks do.

Changes to prop, useState, and useReducer are stateless component update conditions that drive hooks to perform.

Custom hooks- Generic schema

The custom react-hooks we designed should look like this. Pass in the argument and return what we want.

const [ xxx , ... ] = useXXX(parameter A, parameter B...)Copy the code

Custom hooks- Conditional qualification

If custom hooks are not well designed, such as returning a function that changes state but is not qualified, they can cause unnecessary context execution, and even more loop rendering execution of components.

For example: let’s write a very simple hooks to format the array from lowercase to uppercase.

import React , */ function useFormatList(list){return list.map(item => {useState} from 'react' /* Custom hooks for formatting arrays */ function useFormatList(list){return list.map(item => { Console. log(1111) return item.toupperCase ()})} /* List = ['aaa', 'BBB', 'ccc' ] */ function Index({ list }){ const [ number, setNumber ] = useState(0); const newList = useFormatList(list); return <div> <div className="list" > { newList.map(item => <div key={item}>{ item }</div>) } </div> <div className="number"> <div>{ number }</div> <button onClick={()=> setNumber(number + 1) } >add</button> </div> </div> } export default IndexCopy the code

As with the above problem, we format the list array passed by the parent and uppercase it, but when we hit Add, the Index function is reexecuted and the useFormatList custom hooks are also executed. Ideally, arrays do not need to be reformatted, but they do. There is undoubtedly a performance overhead.

So when we set custom hooks, be sure to include conditional-performance overhead.

So let’s do it this way, return the processed list and wrap it in the useMemo function, and solve the problem of executing list.map every time.

function useFormatList(list) { return useMemo(() => list.map(item => { console.log(1111) return item.toUpperCase() }), [])}Copy the code

Refer to the article

React-hooks, custom hooks design patterns and their actions

React-hooks principle learned in react Advance

React Advanced8 tips for React developers