Как работает функция внутри компонента и за его областью видимости?

Question

[wyctpukkk]

Пытаюсь подключить lodash.debounce к input'у, ниже код ТестДебаунс.

const testDebounce = debounce(() => {
  console.log('hello');
}, 500);

Суть вопроса: Объяснить с чем связано такое поведение?
Суть проблемы: когда я выношу ТестДебаунс за пределы компонента Search, все работает отлично, задержка есть.
Когда я вношу ТестДебанус внутрь компонента Search, то что-то ломается и ТестДебаунс отрабатывает без задержки, причем если убрать setSearchText, то консоль лог выдает уже все с задержкой.

// Если вставить ТестДебаунс сюда, то работа корректна.

export const Search = () => {
  const { searchText, setSearchText } = useContext(SearchPizza);

// Если вставить ТестДебаунс сюда, 500мс не работает
   

  const onChangeInput = (e) => {
    setSearchText(e.target.value);
    testDebounce(e);
  };

  return (
    <div className={styles.root}>
      <img className={styles.icon} src={lupa} alt="лупа" />
      <input
        value={searchText}
        onChange={onChangeInput}
        className={styles.input}
        placeholder="Поиск пицц.."
      ></input>
      {searchText && (
        <img
          onClick={() => setSearchText('')}
          className={styles.iconClose}
          src={cancel}
          alt="cancel"
        />
      )}
    </div>
  );
};

Answer 1

[wyctpukkk]

Вопрос снят, во время перерисовки компонента, создается новый ТестДебаунс, поэтому надо вынести его за компонент.

Comments

[Just Me]

или обернуть в useMemo

Answer 2

[Just Me]

https://dmitripavlutin.com/react-throttle-debounce/

Comments

[wyctpukkk]

Спасибо!