Why does Polaris use useCallback?

[seandz]

// documention example
function TextFieldExample() {
  const [value, setValue] = useState('Jaded Pixel');
​
  const handleChange = useCallback((newValue) => setValue(newValue), []);
​
  return <TextField label="Store name" value={value} onChange={handleChange} />;
}

I see this pattern across the docs. What advantage does it have over the simpler, more common pattern of passing an updated value straighto to useState() like so:

function TextFieldExample() {
  const [value, setValue] = useState('Jaded Pixel');
​
  return <TextField label="Store name" value={value} onChange={newValue => setValue(newValue)} />;
}

[OTM]

Hi, @seandz ,

This is Evita from On The Map.

It's not Polaris function, but React apps callback, you can read more about useCallback here - https://reactjs.org/docs/hooks-reference.html#usecallback

Best,
Evita

[seandz]

Hi Evita, I know it's a React function but i was curious why your examples prefer it to a simpler useState() call? What advantages is there to doing it with the pattern in your examples?

[jackcohub]

I'm also curious about why this is so common in Polaris, any chance we could get an explanation for this?

[EugeneKim]

Also curious about this as there doesn't seem to be a need to return a memoized callback function.

[Georgekpc]

This is still a mystery. I am very curious why they overuse useCallback() in their examples.

[chenster]

Perhaps its to avoid function not get re-built on every render cycle.  

https://infinitypaul.medium.com/reactjs-useeffect-usecallback-simplified-91e69fb0e7a3