title: Correct way to pass an argument to parent component callback in react
body: <p>After writing a quite large application for the first time with react I've come accross an issue where my re-renders are basically freezing the UI which is so bad for the UX.</p>
  
  <p>I did not know that passing an anonymous function as a prop caused the entire receiving component every time. So now I'm trying to fix my functions but find it quite hard to get right.</p>
  
  <p>So currently I have a component called <code>NavBar</code> which has subcomponents called <code>NavBarLink</code>. Each <code>NavBarLink</code> calls the same <code>showPopup(arg)</code> function. The argument for <code>showPopup(arg)</code> however is based on which <code>NavBarLink</code> is clicked. </p>
  
  <p><strong>Example</strong></p>
  
  <pre><code>render() {
      return (
          &lt;NavBarLink onClick={() =&gt; showPopup("UNIQUE_POPUP_ID")}&gt;Link 1&lt;/NavBarLink&gt;
          &lt;NavBarLink onClick={() =&gt; showPopup("ANOTHER_POPUP_ID")}&gt;Link 2&lt;/NavBarLink&gt;
      );
  }
  </code></pre>
  
  <p><strong>Question</strong></p>
  
  <p>How can I have the same developer experience but don't suffer from the re-rendering issues?</p>
  
  <p><strong>Related articles</strong></p>
  
  <ul>
  <li><a href="https://medium.freecodecamp.org/why-arrow-functions-and-bind-in-reacts-render-are-problematic-f1c08b060e36" rel="nofollow noreferrer">Why Arrow Functions and bind in React’s Render are Problematic</a></li>
  <li><a href="https://medium.freecodecamp.org/react-pattern-extract-child-components-to-avoid-binding-e3ad8310725e" rel="nofollow noreferrer">React Pattern: Extract Child Components to Avoid Binding</a></li>
  <li><a href="https://medium.freecodecamp.org/react-binding-patterns-5-approaches-for-handling-this-92c651b5af56" rel="nofollow noreferrer">React Binding Patterns: 5 Approaches for Handling <code>this</code></a></li>
  </ul>