title: React event handler with parameter in render function : Performance issue?
body: <p>All these functions are methods of a class, say App class. and I have a component(s) in render function :</p>
  <pre><code>{playerList.map((item,index) =&gt;(
  &lt;DropdownItem onClick={(e) =&gt; this.setRequestParam(item,'Offense', 'detailed')}
                 key = {index}&gt;{item}
  &lt;/DropdownItem&gt;
  )
  
  
  
  {targetList.map((item,index) =&gt;(
  &lt;DropdownItem onClick={(e) =&gt; this.setRequestParam(item,'Defense', 'summary')}
                 key = {index}&gt;{item}
  &lt;/DropdownItem&gt;
  )
  
  </code></pre>
  <p>and setRequestParam doing :</p>
  <pre><code>setRequestParam = (value, paramName, desc) =&gt; {
          this.setState({
            params : {
                ...this.state.params,
                [paramName] : value
              }
            }, function setStateCallback(){          
               console.log(this.state.params)
  
               this.getStatsData(desc)
            }
          ) 
      }
  
  </code></pre>
  <p>and getStatsData(desc) doing:</p>
  <pre><code>getStatsData = async (desc) =&gt; {
  
        if (desc === 'detailed'){ .. does something }
        else if (desc === 'summary'){ .. does something }
        else if (desc === 'a different keyword'){... does something}
        ...
  }
  
  
  </code></pre>
  <p>So the goal here is to make a POST request on DropdownItem onclick, and sending multiple parameters via event handler is currently required I feel. However, I've heard that using a arrow function inside a render function has high probability of causing performance issue. <br><br></p>
  <p>I heard there are multiple ways to have parameters on a event handler, and I've seen few ways :</p>
  <ol>
  <li><p>The one I used (Arrow function bind on render)</p>
  </li>
  <li><p>function returns a function</p>
  </li>
  </ol>
  <pre><code>setRequestParam = (value, paramName, desc) =&gt; 
  </code></pre>
  <p>changes to</p>
  <pre><code>setRequestParam = (value, paramName, desc) =&gt; () =&gt; 
  </code></pre>
  <p>thus, doing</p>
  <pre><code>&lt;DropdownItem onClick={this.setRequestParam(item,'Defense', 'summary')}
  </code></pre>
  <p>would still pass parameters.</p>
  <ol start="3">
  <li>Use currentTarget with event</li>
  </ol>
  <pre><code>&lt;DropdownItem onClick={this.setRequestParam}
                name = 'defenseSummary'
  &gt;
  
  setRequestParam = (e) =&gt; {
      if (e.currentTarget.name === 'defenseSummary'){
  
             this.setState({
            params : {
                ...this.state.params,
                'Defense' : e.currentTarget.getAttribute(&quot;dropdownvalue&quot;)
              }
            }, function setStateCallback(){          
               console.log(this.state.params)
  
               this.getStatsData('Summary')
            }
          ) 
      }
  
      else if ( .. for different parameter possible ) { }
  }
  
  </code></pre>
  <p>So my Questions are :</p>
  <ol>
  <li>Considering current situation of having to make a different post request on dropdown item onclick, am I doing somethign wrong? Any other recommendation?</li>
  <li>is solution (2 : function returns a function) any different from solution (1 : Arorw function bind) as in 'creates function everytime rendered'?</li>
  <li>Assuming I have 30 of DropdownItem Components, Does &quot;performance issue on arrow/bind function in render function' mean <br> A) I'm gonna be loading 30 functions every time I render the Parent component, being stacked up somewhere in browser? so like if i load the page 100 times, do i have 3000 functions stacked up somwhere, leading to guarranteed crash basically? <br> B) or the function is basically just repeated 30 times per my parent component, which also gets de-mounted when the component demounts, which means with limited amount of items it could be OK to use?</li>
  <li>Is there any other recommended way to pass down various (could be variable of string? parameters to event handler?</li>
  </ol>