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 experience
7 Replies
Joao
Joao15mo ago
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:
<button onClick={something} />
<button onClick={something} />
as opposed to:
<button onClick={() => something()} />
<button onClick={() => something()} />
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.
serkan
serkan15mo ago
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
xel
xel15mo ago
<button onClick={something} /> this is valid syntax though, the something function will be called with the onClick arguments
Augustos
Augustos15mo ago
yes, was just example, but
Augustos
Augustos15mo ago
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.js
Medium
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!')} /> ...
Augustos
Augustos15mo ago
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
Joao
Joao15mo ago
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.
Want results from more Discord servers?
Add your server