How to avoid bind or inline arrow functions inside render method

Question

We should avoid method binding inside render because during re-rendering it will create the new methods instead of using the old one, that will affect the performance.

Answer 1

Documentation encourages to use data-attributes and access them from within evt.target.dataset:

_deleteTodo = (evt) => {
  const elementToDelete = evt.target.dataset.el;
  this.setState(prevState => ({
    todos: prevState.todos.filter(el => el !== elementToDelete)
  }))
}

// and from render:

todos.map(
  el => 
 {el} 
)

Also note that this makes sense only when you have performance issues:

Is it OK to use arrow functions in render methods?

Generally speaking, yes, it is OK, and it is often the easiest way to pass parameters to callback functions.

If you do have performance issues, by all means, optimize!