如何在使用 react 和 typescript 的 onchange 处理程序中使用 usecallback 方法？

Question

Hi how to use useCallback method in the onchange handler using react and typescript.

i have code like below,

const [filter, setFilter] = useState(undefined);
return (
    <Select
        onChange={(selected: any) => { //use usecallback
            const selectedItems = map(selected, 'value');
            return setItem({
                prop1: filter?.prop1,
                prop2: selectedItems,
            });
        }}
    />
);

could someone help me with this. thanks.

Answer 1

const [filter, setFilter] = useState(undefined);

const onChange = useCallback((selected) => {
  const selectedItems = map(selected, 'value');
  setItem({
    prop1: [],
    prop2: selectedItems,
   });
}, [setItem, filter])

return (
    <Select
        onChange={onChange}
    />
);

But why do you need useCallback here? It usually used for memoizing the callback in case if you have your dependencies changed. In your case I don't see it.

Answer 2

You don't use it directly in the onChange, you have to extract the function:

const [filter, setFilter] = useState(undefined);

const memoizedCallback = React.useCallback(
    (selected: any) => {
        const selectedItems = map(selected, 'value');
        return setItem({
           prop1: filter?.prop1,
           prop2: selectedItems,
        });
    },
    [filter, setItem]
);


return (
    <Select
        onChange={memoizedCallback}
    />
);