React Hook useCallback received a function whose dependencies are unknown. Pass an inline function i-CodePudding

How can i fix this? I see question like this where people said that useMemo can help. But this is not about like that situation and useMemo fix doesn't work and create just more bugs.

export const Search: React.FC = () => {
  const dispatch = useDispatch();
  const [value, setValue] = React.useState<string>('');
  const inputRef = React.useRef<HTMLInputElement>(null);

  const onClickClear = () => {
    dispatch(setSearchValue(''));
    setValue('');
    inputRef.current?.focus();
  };

  const updateSearchValue = React.useCallback(
    debounce((str: string) => {
      dispatch(setSearchValue(str));
    }, 150),
    [],
  );

  const onChangeInput = (event: React.ChangeEvent<HTMLInputElement>) => {
    setValue(event.target.value);
    updateSearchValue(event.target.value);
  };

CodePudding user response：

can you try this instead? useCallback takes two params.. an inline function, and a dependency array.

const updateSearchValue = React.useCallback((str: string) => {
  debounce(() => {
    dispatch(setSearchValue(str));
  }, 150);
}, [dispatch]);

const onChangeInput = (event: React.ChangeEvent<HTMLInputElement>) => {
    setValue(event.target.value);
    updateSearchValue(event.target.value); 
  };