原因

什么时候使用

复杂计算 当组件进行复杂计算并且渲染时，这些计算不依赖于组件的状态或 props 时，可以使用 useMemo 来存储计算结果

import React,{useState, useMemo} from "react";

// 复杂计算: 当组件进行复杂计算并且渲染时，这些计算不依赖于组件的状态或 props 时，可以使用 useMemo 来存储计算结果
function getValue(list){
    // 假设这是一个非常复杂的计算
    return list.reduce((acc, num) => acc + num, 0)
}

function ComplexCalculation(){
    const [list, setList] = useState([1,2,3,4,5])

    const sum = useMemo(() => {
        return getValue(list)
    })

    return <div>Sum: {sum}</div>
}

export default ComplexCalculation

重渲染优化 当组件频繁重渲染，并且每次重渲染都会进行相同的复杂计算时，使用 useMemo 可以提高性能

/* eslint-disable react-hooks/rules-of-hooks */
import React,{useState, useMemo} from 'react';

// 重渲染优化: 当组件频繁重渲染，并且每次重渲染都会进行相同的复杂计算时，使用 useMemo 可以提高性能
function GetExpensiveValue(){
    const [count, setCount] = useState(0)
    const [number, setNumber] = useState(1)

    const expensiveValue = useMemo(() => {
        let value = 0 
        for(let i = 0; i < 100; i++){
            value += i
        }

        return value
    },[])

    return (
        <div>
        <div>Expensive Value: {expensiveValue}</div>
        <div>Count: {count}</div>
        <button onClick={() => setCount(count + 1)}>Increase Count</button>
        <div>Number: {number}</div>
        <button onClick={() => setNumber(number + 1)}>Increase Number</button>
      </div>
    )
}

export default GetExpensiveValue

引用相等性 当传递对象作为 props 到子组件时，可以使用 useMemo 来确保对象的引用相等性，防止子组件不必要的重渲染

import React, {useState,  useMemo} from "react";


// 引用相等性: 当传递对象作为 props 到子组件时，可以使用 useMemo 来确保对象的引用相等性，防止子组件不必要的重渲染
const ChildComponent = React.memo(({obj, count}) => {
    console.log('ChildComponent rendered!');
    return <div>{obj.key}: {count}</div>
})

function ChildComponentRender(){
    const [count, setCount] = useState(0)

    const obj = useMemo(() => {
        return {key: 'value'}
    },[])

    return <div>
        <ChildComponent obj={obj} count={count} />
        <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
}

export default ChildComponentRender

什么时候不要使用

除了上面三种都不用简单讲

简单计算: 对于简单的计算或派生状态，不需要使用 useMemo，因为它可能不会带来实际的性能优势，反而可能增加组件的复杂性。
没有依赖的计算: 如果计算不依赖于组件的状态或 props，那么没有必要使用 useMemo，因为它不会在重新渲染时改变。
过度优化: 不要过早优化。除非你确定一个特定的计算或操作确实是一个性能瓶颈，否则不要默认使用 useMemo

完～

代码在这个仓库，记得star 感谢～

To use`useMemo` or Not to use `useMemo`

原因

什么时候使用

什么时候不要使用