reactjs - 使用自定义 setter 和清理功能包装 useState Hook

Question

我想创建一个自定义的 React 钩子(Hook)

1. 包装状态(使用 useState 创建)，
2. 在组件卸载时运行清理功能，
3. 执行派生值的自定义 setter 逻辑，
4. 并导出自定义 setter 和内部状态值。

export function useCustomState() {
  const [value, setValue] = useState();

  useEffect(() => {
    return () => {
      // do cleanup
    };
  }, [value]);

  function customSetValue(newValue) {
    if (value) {
      // do cleanup for the previous value
    }

    const derivedValue = derive(newValue);
    setValue(derivedValue);
  }

  return [value, customSetValue];
}

我可以用上面的代码实现这个。当我将 useEffect Hook 中的返回值用作依赖项时，我的问题就出现了，因为返回的自定义 setter 始终是新函数引用。

const Component = () => {
  const [value, setValue] = useCustomState();
  useEffect(
    () => {
      setValue(simpleValue);
    },
    [setValue],
  );

  return <p>{ value }</p>;
};

当我不将 setter 包含为 useEffect 的依赖项时，重新渲染将停止，因为依赖项在渲染后不会更改。我可以省略该引用并为该行禁用 eslint。这是一种解决方案。

我想知道是否可以创建自定义引用稳定的 setter 函数？

我也尝试过使用存储自定义 setter 函数的 useMemo，但备忘录的依赖项仍然包括内部 value 和 setValue引用，因为我想进行清理并设置新的派生值。如果相同输入的派生值不同，则依赖循环将导致无限重新渲染。

Answer 1

你可以传递一个函数给setValue来去除对value的依赖；相反，当前值作为参数传递。作为 useMemo 的更简单替代方案，useCallback 将为您提供一致的功能:

export function useCustomState() {
  const [value, setValue] = useState();

  useEffect(() => {
    return () => {
      // do cleanup
    };
  }, [value]);

  const customSetValue = useCallback((newValue) => {
    setValue((oldValue) => {
      if (oldValue) {
        // do cleanup for the previous value
      }
      const derivedValue = derive(newValue);
      return derivedValue;
    });
  }, []);

  return [value, customSetValue];
}