useIsFirstRende，useUpdateEffect

判断是不是第一次跟新返回true或者false，useUpdateEffect用法等同于 useEffect，但是会忽略首次执行，只在依赖更新时执行

使用场景

做一些性能优化的操作，在 Class 组件中存在 componentDidUpdate 生命周期。它会在更新后会被立即调用，首次渲染不会执行此方法。

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

import { useUpdateEffect } from "ahooks";

export default function Component() {
  const [data, setData] = useState < number > 0;
  useEffect(() => {
    console.log("Normal useEffect", { data });
  }, [data]);

  useUpdateEffect(() => {
    console.log("Update useEffect only", { data });
  }, [data]);

  return (
    <div>
      <p>Open your console</p>
      <button onClick={() => setData(Date.now())}>Update data</button>
    </div>
  );
}

实现

import { useRef } from "react";

function useIsFirstRender(): boolean {
  const isFirst = useRef(true);

  if (isFirst.current) {
    isFirst.current = false;

    return true;
  }

  return isFirst.current;
}

export default useIsFirstRender;

import { DependencyList, EffectCallback, useEffect } from "react";

import { useIsFirstRender } from "./useIsFirstRender";

function useUpdateEffect(effect: EffectCallback, deps?: DependencyList) {
  const isFirst = useIsFirstRender();

  useEffect(() => {
    if (!isFirst) {
      return effect();
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, deps);
}

export default useUpdateEffect;

参数

effect函数，deps依赖项