Javascript useStateChange-是否有更有效的方法在不使用useState/useEffect的情况下保持值更新

因此，我厌倦了使用大量的

memo

、

usemo

和

useCallbacks

来保持分层应用程序的响应性。相反，我构建了一个名为

useStateChange

（我通常不需要onChange提供的即时更新）的react钩子

函数useStateChange（valuesInit）{
const[values，valuesSet]=使用状态（valuesInit）；
使用效果（（）=>valuesSet（valuesInit），[valuesInit]）；
const onChange=useCallback（（{target:{value}}）=>valuesSet（value），[]）；
返回[onChange，values，valuesSet]；
}
函数TestInput（{value0，onBlur}）{
日志（“测试运行”）；
const[onChange，value1]=useStateChange（value0）；
返回(
值1:{'}
Value1:{Value1}
);
}

工作示例可在中找到

由于几乎每个输入都会使用此功能，有没有办法进一步提高性能？

---

我知道人们会抱怨不要过度优化，但这将成为我的应用程序的一个关键组件，如果它的功能达到最佳状态，它会更好。如果我用我的

useStateChange

函数进行了优化，我就不会有当前的性能问题…

@PatrickRoberts

useState

使用

valuesInit

初始化，但如果

valuesInit

发生变化，则不会更新。您可以使用不受控制的组件或将值存储在ref（

useRef

）中。哦，对不起，我没有注意到

值如果
在
部门
，您就right@ArtemBalamutyuk尝试使用uncontrolled，但无法初始化值。在裁判方面没有太多经验，但正在调查。以前被教导不要使用refs。@无声您可以使用
defaultValue
属性初始化值
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>
    </>
  );
}