Блог

У меня здесь есть поле ввода, которое для каждого типа отправляет действие redux. Я поставил useDebounce, чтобы он не был очень тяжелым. Проблема в том, что в нем говорится Hooks can only be called inside of the body of a function component. , как правильно это сделать?

useTimeout

 import { useCallback, useEffect, useRef } from "react";

export default function useTimeout(callback, delay) {
  const callbackRef = useRef(callback);
  const timeoutRef = useRef();

  useEffect(() => {
    callbackRef.current = callback;
  }, [callback]);

  const set = useCallback(() => {
    timeoutRef.current = setTimeout(() => callbackRef.current(), delay);
  }, [delay]);

  const clear = useCallback(() => {
    timeoutRef.current amp;amp; clearTimeout(timeoutRef.current);
  }, []);

  useEffect(() => {
    set();
    return clear;
  }, [delay, set, clear]);

  const reset = useCallback(() => {
    clear();
    set();
  }, [clear, set]);

  return { reset, clear };
}
 

useDebounce

 import { useEffect } from "react";
import useTimeout from "./useTimeout";

export default function useDebounce(callback, delay, dependencies) {
  const { reset, clear } = useTimeout(callback, delay);
  useEffect(reset, [...dependencies, reset]);
  useEffect(clear, []);
}
 

Компонент формы

 import React from "react";
import TextField from "@mui/material/TextField";
import useDebounce from "../hooks/useDebounce";

export default function ProductInputs(props) {
  const { handleChangeProductName = () => {} } = props;

  return (
    <TextField
      fullWidth
      label="Name"
      variant="outlined"
      size="small"
      name="productName"
      value={formik.values.productName}
      helperText={formik.touched.productName ? formik.errors.productName : ""}
      error={formik.touched.productName amp;amp; Boolean(formik.errors.productName)}
      onChange={(e) => {
        formik.setFieldValue("productName", e.target.value);
        useDebounce(() => handleChangeProductName(e.target.value), 1000, [
          e.target.value,
        ]);
      }}
    />
  );
}
 

Я не думаю, что хуки React хорошо подходят для функции дроссельной заслонки или отключения. Из того, что я понимаю из вашего вопроса, вы фактически хотите отменить handleChangeProductName функцию.

Вот простая функция более высокого порядка, которую вы можете использовать для украшения функции обратного вызова, чтобы отменить ее. Если возвращаемая функция вызывается снова до истечения тайм-аута, то тайм-аут очищается и устанавливается заново. Только по истечении времени ожидания вызывается оформленная функция и передаются аргументы.

 const debounce = (fn, delay) => {
  let timerId;
  return (...args) => {
    clearTimeout(timerId);
    timerId = setTimeout(() => fn(...args), delay);
  }
};
 

Пример использования:

 export default function ProductInputs({ handleChangeProductName }) {
  const debouncedHandler = useCallback(debounce(handleChangeProductName, 200), []);

  return (
    <TextField
      fullWidth
      label="Name"
      variant="outlined"
      size="small"
      name="productName"
      value={formik.values.productName}
      helperText={formik.touched.productName ? formik.errors.productName : ""}
      error={formik.touched.productName amp;amp; Boolean(formik.errors.productName)}
      onChange={(e) => {
        formik.setFieldValue("productName", e.target.value);
        debouncedHandler(e.target.value);
      }}
    />
  );
}
 

Если возможно, родительский компонент, передающий handleChangeProductName обратный вызов в качестве prop, вероятно, должен обрабатывать создание дебатируемого, запоминаемого обработчика, но вышеупомянутое также должно работать.

Взгляните на вашу реализацию useDebounce , и она не выглядит очень полезной в качестве хука. Похоже, он взял на себя задачу вызова вашей функции и ничего не возвращает, но большая часть его реализации выполняется useTimeout , что также мало что дает…

На мой взгляд, useDebounce следует вернуть «отмененную» версию callback

Вот мой взгляд на useDebounce :

 export default function useDebounce(callback, delay) {
  const [debounceReady, setDebounceReady] = useState(true);

  const debouncedCallback = useCallback((...args) => {
    if (debounceReady) {
      callback(...args);
      setDebounceReady(false);
    }
  }, [debounceReady, callback]);

  useEffect(() => {
    if (debounceReady) {
      return undefined;
    }
    const interval = setTimeout(() => setDebounceReady(true), delay);
    return () => clearTimeout(interval);    
  }, [debounceReady, delay]);

  return debouncedCallback;
}
 

Использование будет выглядеть примерно так:

 import React from "react";
import TextField from "@mui/material/TextField";
import useDebounce from "../hooks/useDebounce";

export default function ProductInputs(props) {
  const handleChangeProductName = useCallback((value) => {
    if (props.handleChangeProductName) {
      props.handleChangeProductName(value);
    } else {
      // do something else...
    };
  }, [props.handleChangeProductName]);

  const debouncedHandleChangeProductName = useDebounce(handleChangeProductName, 1000);

  return (
    <TextField
      fullWidth
      label="Name"
      variant="outlined"
      size="small"
      name="productName"
      value={formik.values.productName}
      helperText={formik.touched.productName ? formik.errors.productName : ""}
      error={formik.touched.productName amp;amp; Boolean(formik.errors.productName)}
      onChange={(e) => {
        formik.setFieldValue("productName", e.target.value);
        debouncedHandleChangeProductName(e.target.value);
      }}
    />
  );
}
 

onChange Само отключение имеет оговорки. Скажем, это должен быть неконтролируемый компонент, поскольку отключение onChange контролируемого компонента приведет к раздражающим задержкам при наборе текста.

Еще одна ошибка, нам может потребоваться сделать что-то немедленно и сделать что-то еще после задержки. Скажем, немедленно отображать индикатор загрузки вместо (устаревших) результатов поиска после любого изменения, но отправлять фактический запрос только после того, как пользователь перестанет печатать.

Имея все это в виду, вместо отмены обратного вызова я предлагаю отменить синхронизацию с помощью useEffect :

 const [text, setText] = useState('');
const isValueSettled = useIsSettled(text);

useEffect(() => {
  if (isValueSettled) {
    props.onChange(text);
  }
}, [text, isValueSettled]);

...
  <input value={value} onChange={({ target: { value } }) => setText(value)}

 

И useIsSetlled сам будет отключен:

 function useIsSettled(value, delay = 500) {
  const [isSettled, setIsSettled] = useState(true);
  const isFirstRun = useRef(true);
  const prevValueRef = useRef(value);

  useEffect(() => {
    if (isFirstRun.current) {
      isFirstRun.current = false;
      return;
    }
    setIsSettled(false);
    prevValueRef.current = value;
    const timerId = setTimeout(() => {
      setIsSettled(true);
    }, delay);
    return () => { clearTimeout(timerId); }
  }, [delay, value]);
  if (isFirstRun.current) {
    return true;
  }
  return isSettled amp;amp; prevValueRef.current === value;
}
 

где isFirstRun , очевидно, спасает нас от получения «о, нет, пользователь что-то изменил» после первоначального рендеринга (при value изменении с undefined на начальное значение).

И prevValueRef.current === value не является обязательной частью, но дает нам уверенность, что мы получим useIsSettled возврат false в том же прогоне рендеринга, а не в следующем, только после useEffect выполнения.