Take the example of the handling events

Question

class LoggingButton extends React.Component {
  handleClick() {
    console.log('this is:', this);
  }

  render() {
   // This syntax ensures `this` is bound within handleClick
   return (
   <button onClick={(e) => this.handleClick(e)}>
     Click me
   </button>
   );
  }
}

The problem with this syntax is that a different callback is created each time the LoggingButton 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.

I do not understand what is extra re-rendering. Can give me examples

Answer 1

Extra rerendring is rerendering when it is not necessary.
A component is rerendered when its props or state are changed. In the example, the child button component gets the callback as a prop.
Since the callback is recreated every time the parent component renders, the child/button component will rerender unnecessarily (the callback is always the same, but the way it is defined in the example causes it to be recreated as if it is different from its previous 'incarnation', in the previous render).