useStateChange - существует ли более эффективный способ обновления значения без использования useState / useEffect - PullRequest
Новая
       0

useStateChange - существует ли более эффективный способ обновления значения без использования useState / useEffect

5 голосов
/ 23 января 2020

Так что мне надоело использовать кучу 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, у меня не было бы текущих проблем с производительностью ...

...