自定义hooks

作为react的使用者，自定义hooks是常见的业务需求，小弟技术水平有限，只能先借花献佛聊下公司里大佬们封装的自定义hooks了

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

type effectHookType = typeof useEffect | typeof useLayoutEffect;

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);
  };

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

/**
 * useUpdateEffect 用法等同于 useEffect，但是会忽略首次执行，只在依赖更新时执行
 */
export const useUpdateEffect = createUpdateEffect(useEffect);

export {
  createUpdateEffect
}

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

用法如下

import React, { useEffect, useState } from 'react';
import { Button } from 'antd'
import { useUpdateEffect } from '@pansy/react-hooks';

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);
  }, [count]);

  return (
    <div>
      <p>effectCount: {effectCount}</p>
      <p>updateEffectCount: {updateEffectCount}</p>
      <p>
        <Button onClick={() => setCount((c) => c + 1)}>
          reRender
        </Button>
      </p>
    </div>
  );
};

个人的分享记录，不喜勿喷。