Detailed explanation of usememo, memo, useref and other relevant hooks

useMemo

It is mainly used for data calculation , With cache, it will not double calculate , amount to vue Of computed

import React,{
     useRef, useState, useEffect, useMemo, memo } from 'react'

export default function text() {
    
	const [height, setHeight] = useState(66)
	const memoizedCallback = useMemo(
	  () => {
    
	    return height + ' test Callback'
	  },
	  [height],
	)
	return (
		<div>{
    memoizedCallback}</div>
	)
}

memo

memo: Prevent useless updates of subcomponents （ When the whole situation content It will be updated when changes occur ,memo The second parameter can prevent , But the official advice is to use less ）

import React,{
     useRef, useState, useEffect, useMemo, memo } from 'react'



const Son = function () {
    

  return (
    <div className='child-box'>

    </div>
  )
}
function areEqual(prevProps, nextProps) {
    
  return prevProps === nextProps //  You don't want it to update, just go back true
}
const HooksChild = memo(Son, areEqual) //  The second parameter may not be passed 

export default function text() {
    
	const [height, setHeight] = useState(66)
	const memoizedCallback = useMemo(
	  () => {
    
	    return height + ' test Callback'
	  },
	  [height],
	)
	return (
		<div>
			<HooksChild/>
		</div>
	)
}

useRef

Provide you with a closed space to store variables , Component re rendering has nothing to do with him , Unless you change it yourself

import {
     useRef, useState } from 'react';

const useTimer = (step = 1) => {
    
  const timer = useRef(null)
  const [ num, setNum ] = useState(0)
  const start = () => {
    
    // const timeout = setInterval(() => {
    
    // setNum((num)=>num + 1)
    // }, step * 1000)
    timer.current = null
  }
  const clear = () => {
    
    setNum(0)
    clearInterval(timer.current)
  }
  return {
    
    num,
    start,
    clear
  }
}
export default useTimer

Complete example Customize hooks Encapsulate timers that will not be created repeatedly

useContext,useReducer

useContext Global variables ,useReducer Use and useState The way to use it is similar

Complete example useContext+useReducer Realize global state sharing