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

使用方式

import React, { useEffect, useState } from 'react';
import { useUpdateEffect } from 'ahooks';
export default () => {
  const [count, setCount] = useState(0);
  const [effectCount, setEffectCount] = useState(0);
  const [updateEffectCount, setUpdateEffectCount] = useState(0);
  useEffect(() => {
    setEffectCount((c) => c + 1);
  }, [count]);
  useUpdateEffect(() => {
    setUpdateEffectCount((c) => c + 1);
    return () => {
      // do something
    };
  }, [count]); // you can include deps array if necessary
  return (
    <div>
      <p>effectCount: {effectCount}</p>
      <p>updateEffectCount: {updateEffectCount}</p>
      <p>
        <button type="button" onClick={() => setCount((c) => c + 1)}>
          reRender
        </button>
      </p>
    </div>
  );
};

使用场景

• 忽略首次执行，只在依赖更新时执行

具体实现

export 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;

import { useEffect } from 'react';
import { createUpdateEffect } from '../createUpdateEffect';
export default createUpdateEffect(useEffect);

1.useRef缓存页面是否挂载（第一次执行副作用）

2.如果挂载，则记录，记录的同时不进行任何处理

3.依赖变更后，判断是否执行过副作用，如果已经执行过，就更新

4.注意点：使用HOC方式进行逻辑复用

💡由于useEffect和useLayoutEffect作用以及Api相近，逻辑可以复用，官方使用了HOC的写法。