渲染自动填充的搜索结果 Debounce 在 React 中不起作用，我无法在 useEffect 中调用我的 debounce

Question

Please let me know where i am doing mistake as i am new to React and i am implementing the concepts for the first time in the live project

This is place where data is getting processed

Answer 1

There are multiple notes I have about your code:

1. Use either debounce or throttle. But don't use them together. You can find a very good explanation of both techniques here .
2. Remove your dependancies from useEffect. In your case useEffect will execute every time input changes + every time the fetch is set. From this code that you posted there is actually no point of you having useEffect. Render can be handled by useMemo.
3. useMemo must have its own dependancy array. In your case its executing on every render. So you need to move its dependancies from useEffect to useMemo. For example you could do const inputHasChanged = useMemo(() => debounce(rxCometGetFindUsers, 500), [inputValue]);

So to get this to work you do:

I have not used "Autocomplete" before so I'm not sure what options you must include.

 return (
    <Autocomplete
      id="find-user"
      className="autoCompSearch"
      style={{ width: 370 }}
      getOptionLabel={option => getValues(option)}
      defaultValue={defaultObj || ""}
      filterOptions={x => x}
      options={options}
      autoComplete
      includeInputInList
      freeSolo
      disableOpenOnFocus
      renderInput={params => (
        <TextField
          {...params}
          placeholder="GLOBAL SEARCH"
          fullWidth
          onChange={handleChange}
          onKeyDown={onKeyDownHandler} // I would remove this, dont see a reason why you would need this and onChange
        />
      )}

This is fine

    const handleChange = event => {
event.preventDefault();
console.log("User has entered" +event.target.value);
setInputValue(event.target.value);
 };

Next, you could use debounce function from lodash but the problem is that you probably have an async function, since you fetch something. Debounce from lodash is not able to handle this behaviour. So you need to use a p-debounce .

import pDebounce from 'p-debounce';

const inputHasChanged = useMemo(() => pDebounce(rxCometGetFindUsers, 500), [inputValue]);

const rxCometGetFindUsers = async = () =>{

let newData = await ... //do your fetching
setOptions(newData)
}