-2

According to the React.js documentation, the expression:

onClick={() => this.handleClick()}

is not recommended:

In most cases, this is fine. However, if this callback is passed as a prop to lower components, those components might do an extra re-rendering.

But in what cases and why does it happen? Can anybody explain or give an example?

jonrsharpe
  • 115,751
  • 26
  • 228
  • 437
CodeCode123
  • 37
  • 3
  • 1
    Does this answer your question? [Should I wrap every prop with useCallback or useMemo, when to use this hooks?](https://stackoverflow.com/questions/55310682/should-i-wrap-every-prop-with-usecallback-or-usememo-when-to-use-this-hooks) – Emile Bergeron Apr 28 '22 at 20:16
  • See also: [Why shouldn't JSX props use arrow functions or bind?](https://stackoverflow.com/a/61288916/1218980) – Emile Bergeron Apr 28 '22 at 20:18

1 Answers1

2

if you use this call back only on a plain html tag i think it should be fine. but problem is where you pass this type of callbacks as a prop to a child component. if your top level component happen to rerender and you don't want to child component rerender, if use memo on child component, it rerender anyway because when top level component rerender that callback recreated and each time you check for prev and next prop of child component it is new every time.

================== TopComponent  (props) ============

+------- Child Component - (onClick={()=> console.log('rerendered every time')}) --+
|         memo check funciton ===>(prev,next) => prev===next                       |                               
+----------------------------------------------------------------------------------+


===============================
danimadmolil
  • 61
  • 7