common-hook/es/state/useRafState.js

提供项目中常用的 React Hooks

import { useCallback, useRef, useState } from "react";
import { useUnmount } from "common-hook";
/**
 * @name 只在 requestAnimationFrame callback 时更新 state
 * @description 一般用于性能优化
 * @example
 * const [state, setState] = useRafState({ width: 0,height: 0})
 */
export const useRafState = (initialState) => {
    const ref = useRef(0);
    const [state, setState] = useState(initialState);
    const setRafState = useCallback((value) => {
        cancelAnimationFrame(ref.current);
        ref.current = requestAnimationFrame(() => {
            setState(value);
        });
    }, []);
    useUnmount(() => {
        cancelAnimationFrame(ref.current);
    });
    return [state, setRafState];
};