// 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)} />; }
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
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?
I'm also curious about why this is so common in Polaris, any chance we could get an explanation for this?
Also curious about this as there doesn't seem to be a need to return a memoized callback function.
This is still a mystery. I am very curious why they overuse useCallback() in their examples.
Perhaps its to avoid function not get re-built on every render cycle.
https://infinitypaul.medium.com/reactjs-useeffect-usecallback-simplified-91e69fb0e7a3