On an onClick event in a React function component, should I pass a function by reference or make an anonymous function?

1. b) unless your handleClick function returns a new function (which will act like the first example) it won't work because all you're doing is assigning the result of calling that function to the listener rather than the reference to the function.

2. a) will work but there's a lot of documentation around to suggest that rebinding arrow functions on each render leads to poor performance.

3. I prefer to do onClick={fn} and then define the function either within the component, or outside it, or maybe I've imported it. Either way I think it makes it more readable. But that's an opinion, and many developers have different approaches.

4. But the main issue is: don't attach an click listener to every single one of the cells! That most likely will lead to a performance issue. Instead: a) add one listener to a containing element (table, for example), and then, using event delegation watch for events from the cells as the "bubble up" the DOM. b) Use Data attributes to attach specific data to the cells, and pick up their data in the click handler from the dataset.

So: a contrived example to show you those last points:

function Example() {

  // Because we're using event delegation
  // check to see if the element we clicked on
  // was actually a table cell, then grab the id
  // from its dataset
  function handleClick(e) {
    if (e.target.matches('td')) {
      const { id } = e.target.dataset;
      console.log(id);
    }
  }

  // One listener to rule them all
  return (
    <table onClick={handleClick}>
      <tbody>
        <tr>
          <td data-id="1">One</td>
          <td data-id="2">Two</td>
          <td data-id="3">Three</td>
        </tr>
      </tbody>
    </table>
  );

}

ReactDOM.render(
  <Example />,
  document.getElementById('react')
);

table { border: 1px solid #565656; border-collapse: collapse; }
td { border: 1px solid #787878; padding: 0.3em; }
td:hover { cursor: pointer; background-color: #dfdfdf; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>