title: React: Which is recommended arrow or normal function?
body: <p>I started using arrow functions after I felt doing manual function/object bindings and scope related issues are headache but very rencently I came to know that it’s better to use normal function(ES5) than arrow function(ES6).</p>
  
  <p>My understanding about these functions</p>
  
  <p>Normal function in React: </p>
  
  <blockquote>
    <ol>
    <li>Bind object/function manually in order to play with state or props inside the function and to avoid scope related issues</li>
    <li>Bind object/function always in constructor but not directly in render </li>
    <li>If you do it in constructor then Webpack creates new object/function in bundle.js file only once when your component renders for the first time</li>
    <li>If you do it directly in render then Webpack will create a new object/function in bundle.js file every time your component renders and re-renders</li>
    <li>If you don’t bind then you can’t access state or props. You have to assign current object to a local variable otherwise this.state or this.props is undefined</li>
    </ol>
  </blockquote>
  
  <p>Arrow function in React:</p>
  
  <blockquote>
    <ol>
    <li>No need to bind an object/function in constructor nor render</li>
    <li>You no need to depend on local variable interms of current object i.e., let that = this;</li>
    <li>You will not have scope issues and object/function binding takes automatically</li>
    </ol>
  </blockquote>
  
  <p>But my query is that I heard that it’s recommended to use normal function and bind it in constructor rather than using arrow function because arrow functions create new object/function in Webpack bundle.js every time your component renders &amp; re-renders. </p>
  
  <blockquote>
    <p>Is this true? Which is Recommended?</p>
  </blockquote>
  
  <p>This thread accepted answer <a href="https://stackoverflow.com/questions/48699573/correct-use-of-arrow-functions-in-react">Correct use of arrow functions in React</a> says —> It depends on where exactly are you using the Arrow function. If Arrow function are used in render method, then they creates a new instance everytime render is called just like how bind would work.</p>
  
  <p>Sorry if you feel it’s a theatrical question but this is my biggest doubt. Kindly suggest</p>