useUpdateEffect

useUpdateEffect 用法等同于 useEffect，但是会忽略首次执行，只在依赖更新时执行。

import { useEffect } from 'react';
import createUpdateEffect from '../createUpdateEffect';

export default createUpdateEffect(useEffect);


// createUpdateEffect

import { useRef } from 'react';
import type { useEffect, useLayoutEffect } from 'react';

type EffectHookType = typeof useEffect | typeof useLayoutEffect;

const createUpdateEffect: (hook: EffectHookType) => EffectHookType =
    (hook) => (effect, deps) => {
        const isMounted = useRef(false);

        // for react-refresh
        hook(() => {
            return () => {
                isMounted.current = false;
            };
        }, []);

        hook(() => {
            if (!isMounted.current) {
                isMounted.current = true;
            } else {
                return effect();
            }
        }, deps);
    };

export default createUpdateEffect;

createUpdateEffect接收一个effect hook, 并且返回一个新的effect hook函数，在返回的hook中做了一层处理，执行了两个hook，一个用来绑定解除状态，一个做了初始加载的判断，只有后续依赖发生变化，才会执行副作用函数。