CODEWITHSUNDEEP
javascriptreactjsreact-hooks
Akira Frank
Akira Frank

Reputation: 25

React Hook useCallback received a function whose dependencies are unknown. Pass an inline function instead. useMemo doesn't work

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);
  };

Upvotes: 0

Views: 846

Answers (1)

hamobi
hamobi

Reputation: 8130

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); 
  };

Upvotes: 1

Related Questions