useStateChange - 是否有更高效的方法来保持值更新而不使用 useState / useEffect

Question

所以我厌倦了使用一堆memo, useMemo, 并useCallbacks保持我的分层应用程序响应。相反，我构建了一个名为的反应钩子useStateChange（我通常不需要 onChange 提供的即时更新）。

function useStateChange(valuesInit) {
  const [values, valuesSet] = useState(valuesInit);
  useEffect(() => valuesSet(valuesInit), [valuesInit]);
  const onChange = useCallback(({ target: { value } }) => valuesSet(value), []);
  return [onChange, values, valuesSet];
}

function TestInput({ value0, onBlur }) {
  console.log("Test ran");
  const [onChange, value1] = useStateChange(value0);
  return (
    <>
      <h4>
        Value1:{" "}
        <input type="text" value={value1} onChange={onChange} onBlur={onBlur} />
      </h4>
      <h5>Value1: {value1}</h5>
    </>
  );
}

可以在CodeSandbox找到工作示例。

由于此功能几乎将用于每个输入，是否有任何方法可以进一步提高性能？

我知道人们会抱怨不要过度优化，但这将成为我的应用程序的重要组成部分，如果它的功能处于最佳状态，它会更好。如果我对我的useStateChange功能进行了优化，我就不会遇到当前的性能问题...