React Hooks——Performance Optimization Hooks

What are Hooks

Hooks are functions syntactically. These functions can be used to introduce state management and lifecycle methods into functional components.

Advantages of React Hooks

1. Concise
   Grammatically speaking, less code is written
2. It's very easy to get started
   • Based on functional programming concepts, only need to master some basic knowledge of JavaScript
   • There is no need to learn knowledge related to the life cycle. React Hooks uses a new concept to manage the operation process of components.
   • There is no need to learn HOC-related knowledge. React Hooks can perfectly solve the problems HOC wants to solve and is more reliable.
   • Mobx replaces Redux for state management
3. Better code reusability
4. Easier integration with Typescript

Disadvantages of React Hooks

1. The state is out of sync
   The state accessed in the asynchronous operation function is still the value of the original state
2. useEffect dependency problem
   When useEffect depends on more data, it will trigger frequently

Things to note about React Hooks

1. Naming convention
   Custom Hooks must be named with use as the prefix, in the form: useXXX
2. Only call React Hooks in the outermost layer
3. Only call react Hooks from react functions
   Call Hooks in custom Hooks or components

use Memo

useMemo is mainly used to achieve performance optimization purposes.

useMemo(callback,array):

• callback: callback function, used to process logic
• Array: The array contains the dependencies that need to be monitored. When the dependency value changes, the callback is re-executed.

useMemo() will return a function called memoized.

import React,{useMemo,useState} from 'react'

const TestCom = React.memo(()=>{
    return <></>
});

function App(){
    const [user,setUser] = useState({
        name:'hello',
        userSex；1
    })
   const filterSex = useMemo(()=>{
        return user.userSex === 1 ? '男' : '女'
    },[user]);
    return <>
    <span>{filterSex}</span>
    <TestCom></TestCom>
    </>
}

Only when the user triggers an update, the internal calculation of filterSex will be retriggered, thus achieving the purpose of caching performance optimization.

Precautions

• useMemo should be used in scenarios where computing resources are consumed in cache function components. Because useMemo itself occupies a certain amount of cache, using it in necessary scenarios is not conducive to performance optimization.
• Using useMemo when the amount of processing is small may cause additional usage overhead.

useCallback

useCallback is used to cache a function. No matter how many times it is rendered, the function is the same function. This can reduce the performance and memory overhead problems caused by constantly creating new functions.

useCallback(callback,array)：

• callback: function, used to process logic
• Array: An array that controls the re-execution of useCallback. useCallback will be re-executed only when the state in the array changes.

import {useCallback,useState} from 'react'
function App(){
    const [state,setState] = useState('');
    const input = useCallback((e)=>{
       setState(e.target.value); 
    },[]);
    return <>
    	<input onInput={(e)=>input(e)} />
    </>
}

Precautions

• useCallback needs to be used in conjunction with useMemo. This is because the React.memo method does a shallow comparison of props. If the props have not changed, they will not be re-rendered.

Custom Hooks

The most important role of custom Hooks is logic reuse, not data reuse, nor UI reuse.

Customizing Hooks is to declare a function. The function name starts with use according to the naming convention. Any built-in Hooks can be used inside the function.

import {useEffect}from 'react'
export default function useDomTitle(title){
    useEffect(()=>{
		document.title = title;        
    },[]);
    return;
}

When using custom Hooks, import Hooks in the components you need to use

import useDomTitle from './hooks/useDomTitle'
function APP(){
    useDomTitle('hello');
	return <></>
}

Precautions

• Reducing the number of useStates and using fewer useStates can make it easier to return Hooks and implement them in components simpler.
• Prioritize readability
• Reasonably split the contents in the state object
• Proper use of the return value of Hooks
• Reasonably split Hooks