Любопытное поведение React

Question

В последнее время я поиграл с крючками React и наткнулся на что-то, чего я не совсем понял.

  const [value, setValue] = useState("");

  const [filtered, setFiltered] = useState("");

  useLayoutEffect(() => {
    setFiltered(value);
  }, value);

  return (
      <input
        type="text"
        value={filtered}
        onChange={e => setValue(e.target.value)}
      />
  );

Приведенный выше код работает нормально, пока я не попытаюсь Backspace или Удалить .onChange не срабатывает.Мысли?PS Код не предназначен для производства, просто дурачится.

Answer 1

Приведенный выше код будет работать корректно, если только вы были вторым аргументом useLayoutEffect в виде массива вместо строки

const [value, setValue] = useState("");

  const [filtered, setFiltered] = useState("");

  useLayoutEffect(
    () => {
      setFiltered(value);
    },
    [value]
  );

  return (
    <input
      type="text"
      value={filtered}
      onChange={e => setValue(e.target.value)}
    />
  );