title: Correct use of arrow functions in React
body: <p>I am using ReactJS with Babel and Webpack and using ES6 as well as the <a href="https://github.com/tc39/proposal-class-fields" rel="noreferrer">proposed class fields</a> for arrow functions. I understand that arrow functions make things more efficient by <a href="https://medium.freecodecamp.org/react-binding-patterns-5-approaches-for-handling-this-92c651b5af56" rel="noreferrer">not recreating the functions each render</a> similar to how binding in the constructor works. However, I am not 100% sure if I am using them correctly. The following is a simplified section of my code in three different files.</p>
  
  <p><strong>My code:</strong></p>
  
  <p>Main.js</p>
  
  <pre><code>prevItem = () =&gt; {
      console.log("Div is clicked")
  }
  
  render(){
      return (
           &lt;SecondClass prevItem={this.prevItem} /&gt;
      )
  }
  </code></pre>
  
  <p>SecondClass.js</p>
  
  <pre><code>&lt;ThirdClass type="prev" onClick={()=&gt;this.props.prevItem()} /&gt;
  </code></pre>
  
  <p>ThirdClass.js</p>
  
  <pre><code>&lt;div onClick={()=&gt;{this.props.onClick()}}&gt;Previous&lt;/div&gt;
  </code></pre>
  
  <p><strong>Question:</strong></p>
  
  <p>Is my code above using the arrow functions correctly? I noticed that for SecondClass.js I could have also used:</p>
  
  <pre><code>&lt;ThirdClass type="prev" onClick={this.props.prevItem} /&gt;
  </code></pre>
  
  <p>Is there a difference between one method or the other since I used an ES6 arrow function in my original function definition? Or should I be using the arrow syntax all the way through until my last div?</p>