title: React Best Practices: If we can't use arrow functions in JSX onChange( ), how can we pass in custom arguments?
body: <p>I'm looking for an elegant alternative to arrow functions in React components.</p>
  
  <p><a href="https://medium.freecodecamp.org/why-arrow-functions-and-bind-in-reacts-render-are-problematic-f1c08b060e36" rel="nofollow noreferrer">Apparently in React</a> 
  , using arrow functions in a parent container leads to performance issues in children. This is because anonymous arrow functions are considered "new" function instances, so every parent <code>render()</code> causes pure components to re-render (if said arrow function is passed down).</p>
  
  <p>I personally loved the usage of arrow functions for their readability. Take for example the below code:</p>
  
  <pre><code>render() {
      return (
        &lt;div&gt;
          &lt;h1&gt;Users&lt;/h1&gt;
          &lt;ul&gt;
            {this.state.users.map(user =&gt; {
              return (
                 &lt;User key={user.id} user={user} onClick={(e) =&gt; this.deleteUser(e, user.id)} /&gt;;
              )
            }}
          &lt;/ul&gt;
        &lt;/div&gt;
      );
  }
  </code></pre>
  
  <p>It is very clear where <code>this.deleteUser()</code> gets its arguments from. But compare that to the way it "should be done":</p>
  
  <pre><code>import React from 'react';
  import { render } from 'react-dom';
  import User from './User';
  
  class App extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        users: [
          { id: 1, name: 'Cory' }, 
          { id: 2, name: 'Meg' }, 
          { id: 3, name: 'Bob'}
        ],
      };
    }
  
    deleteUser = id =&gt; {
      this.setState(prevState =&gt; {
        return { 
          users: prevState.users.filter(user =&gt; user.id !== id) 
        };
      });
    };
  
    renderUser = user =&gt; {
      return &lt;User key={user.id} user={user} onClick={this.deleteUser} /&gt;;
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;h1&gt;Users&lt;/h1&gt;
          &lt;ul&gt;
            {this.state.users.map(this.renderUser)}
          &lt;/ul&gt;
        &lt;/div&gt;
      );
    }
  }
  
  render(&lt;App /&gt;, document.getElementById('root'));
  
  </code></pre>
  
  <p>Why?? This is so much less readable. How do you know <code>this.renderUser</code> gets <code>user</code> passed in as an argument? How do you know <code>this.deleteUser</code> gets <code>userId</code> pass in as an argument? </p>
  
  <p>What alternatives are there? An existing <a href="https://stackoverflow.com/questions/51651425/react-eslint-jsx-props-should-not-use-arrow-functions">stackoverflow question</a> proposes to move children into their own components and pass in arguments via props, but sometimes you don't want to get so modular.</p>
  
  <p>Is there no sane solution as elegant as the arrow function? Or is our best hope to wait until the React Team patches this for sake of readability and community adoption?</p>