score:4

Accepted answer

beside the differences you've already pointed out (lexical scope), arrow functions (and function expressions) are not hoisted, and as such cannot be called before they are defined. see my example. this is in my opinion not a problem, since code that relies on hoisting is much harder to reason about.

react really doesn't care about which one you use (nor can it detect it).

const a = () => {
  const name = getname();
  
  function getname() {
    return 'praffn';
  }
  
  // will not work
  // const getname = () => 'praffn';
  
  return <p>hi, {name}</p>;
}

reactdom.render(<a/>, document.getelementbyid('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

score:4

since you are not accessing the this context, both will both behave the same.

to understand more, you can check how babel is transpiring to the ecma:

 const handleclick2 = () => {
    console.log('handleclick2 executed...');
    this.x=3
 }

will be transpiled as:

"use strict";

var _this = void 0;

var handleclick2 = function handleclick2() {
  console.log('handleclick2 executed...');
  _this.x = 3;
};

link to babel notepad


Related Query

More Query from same tag