React event handler performance issue

Question

Regarding using arrow functions vs class methods bound to this for event handlers, the official documents of React reads:

The problem with this syntax (arrow function) is that a different callback is created each time the LoggingButton (an example component) renders. 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. We generally recommend binding in the constructor or using the class fields syntax, to avoid this sort of performance problem.

Since the new approach recommends using function components instead of classes, how do we resolve the above performance issue?

How do you use functional components skipping the first page of official React documentation — Dmitrii G.
– Dmitrii G., Commented Nov 10, 2019 at 13:29

Nicholas Tower · Accepted Answer · 2019-11-10 12:13:40Z

5

Use useCallback to memoize the function. The second parameter to useCallback lets you specify what variables should cause the function to be recreated. If one of them changes, a new callback will be created, but otherwise the same function reference will be reused. If you want to never create a new function, an empty array as the second parameter will do that.

import React, { useCallback } from 'react';

const ExampleComponent = (props) => {
  const onClick = useCallback(() => {
    console.log('got clicked', props.name);
  }, [props.name]);

  return (
    <SomeOtherComponent onClick={onClick} />
  )
}

edited Nov 10, 2019 at 12:13

answered Nov 10, 2019 at 12:08

Nicholas Tower

87k10 gold badges115 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vikas · Accepted Answer · 2021-09-17 10:20:07Z

0

Try this (binding in the constructor)

constructor(props) {
    super(props);
    
    // option #1: binding in the constructor
    this.handleClick = this.handleClick.bind(this);
  }

or this (class fields syntax)

  // class fields syntax
  handleClick = () => {
    console.log('this is:', this);
  }

Both of these are documented by react just above where the above paragraph is found

answered Sep 17, 2021 at 10:20

Vikas

511 silver badge7 bronze badges

Collectives™ on Stack Overflow

React event handler performance issue

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related