Why should i not use `()=> {}` on components elements like `onChange` or `onClick` in React?
I remember of another dev talking it to me, that things like:
<button onClick={() => something} was a really bad thing, but i don't remember why or if it's true that is bad for the project or dev experience7 Replies
Meh, no real reason. The only downside I can think of right now is that inline functions like that cannot be memoized through the
useCallback hook. But this is only going to be a problem if you have a lot of components and functions. However, if you already have a function something defined, either within the component itself, received as a prop or imported from another module, I would prefer to use it like this:
as opposed to:
Btw, I assume you made a typo because the snippet you used wouldn't work. If you provide an inline arrow function you need to also invoke the function you are referencing.
In short, for simple things you can go ahead and provide an inline arrow function. It's simple and gets the job done, less clutter in your component, etc. But if it doesn't fit in one line, it's best to declare the function elsewhere and provide a reference to it.I think it's not a bad thing if your component is not crowded, but when it gets bigger you need to seperate things to get a better look
<button onClick={something} /> this is valid syntax though, the something function will be called with the onClick argumentsyes, was just example, but
i was really concerned about it, but like my mind was saying: "nah, there is no problem here", but at the same time, i remember of this guys explaining it to me, and made a lot of sense.
So i searched today and 2 things:
First: This (the conversation i had) was in react Class Components time, and yep, inside of the
render() in classes components, things like: <button onClick={() => console.debug('many code goes here')}</button> is bad. see: https://itnext.io/dont-use-inline-functions-or-bind-in-react-ref-callbacks-5559e4342ead
Second: it's also a "problem" in function components, but not a problem like in classes.
In function components, it causes re-render in their children's, see:
https://stackoverflow.com/questions/68117926/inline-functions-in-react-cause-re-renders
and the codesanbox: https://codesandbox.io/s/determined-babbage-w495w?file=/src/App.jsMedium
Don’t use inline functions or bind() in React ref callbacks
React makes it easy to almost never worry about the underlying HTML/JavaScript Document Object Model. React’s retained mode rendering…
Stack Overflow
Inline functions in React cause re-renders?
I read in an article that if you have some code like:
class Parent extends Component {
render() {
return (
<Child
onClick={() => console.log('You clicked!')}
/>
...
yes
yeah, i do think it's not a good pattern, but at the same point, wouldn't argued against it on my job, what i'm searching is more about how this affect the way react works, and do things
Those are the considerations that I mentioned before, but are non-issues until you have enormous amounts of code in a single component or have lots of components triggering re-renders constantly. At that point you need to start thinking about optimization techniques eg.:
useMemo, useCallback, etc, but then again, once you reach this scale, you'd have to do that regardless. So, the bigger issue with inlining arrow functions is with readability rather than performance.