предотвратить использование эффекта для запуска при первом рендере

Question

Я хочу сделать отладку для пользовательского ввода, но моя проблема в том, что я не могу остановить использование useEffect от триггера при начальном рендеринге

import { useDebouncedCallback } from "use-debounce";

interface myInputProps {
  getValue: any;
}

const MyInput = ({ getValue }: myInputProps) => {
  const [value, setValue] = useState("");

  React.useEffect(() => {
    getValue(value);
  }, [value]);

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

export default function App() {
  const [debouncedCallback] = useDebouncedCallback(value => {
    console.log(value);
  }, 1000);

  return (
    <div className="App">
      <MyInput getValue={debouncedCallback} />
    </div>
  );
}

https://codesandbox.io/s/upbeat-lamport-ukq70?file= / src / App.tsx

Я также пробовал useLayoutEffect, но это не решает проблему.

Answer 1

Мы могли бы использовать useRef, чтобы отслеживать, запускается ли ловушка useEffect в первый раз.

https://reactjs.org/docs/hooks-faq.html#is -переменные-экземпляры-переменные

Ссылка в песочнице: https://codesandbox.io/s/confident-cerf-flkf2?file= / src / App.tsx

const MyInput = ({ getValue }: myInputProps) => {
  const [value, setValue] = useState("");
  const first = useRef(true);

  React.useEffect(() => {
    if (first.current) {
      first.current = false;
      return;
    }
    getValue(value);
  }, [value]);

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

Answer 2

Установите начальное значение на undefined, и вы можете явно проверить на undefined. Как только пользователь войдет, он не будет неопределенным.

const MyInput = ({ getValue }: myInputProps) => {
  const [value, setValue] = useState(undefined);
  React.useEffect(() => {
   if (value === undefined) {
      return;
    }
    getValue(value);
  }, [value]);

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