How to use usecallback method in onchange handler using react and typescript?

Advertisements

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.

>Solution :

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.

Leave a ReplyCancel reply