Difference between two type of assignments in reactjs

Question

Both assignment are different. Is there any difference between both of them or both are equal?

First

onClick(){
  return (
     <div></div>
  )
}

Second

const onClick= ()=> {
   return(
       <div></div>
   )
 }

Answer 1

ES5 Functions

This type of function doesn't bind with the current context you need to bind it manually, if we do not bind the function with this then the function will find its binding by itself while executing the function according to the execution context.

this.onClick = this.onClick.bind(this);

onClick() {
  return <div></div>;
}

ES6 Functions

Simply known as arrow functions, in arrow function there is no binding of this so no effect of this keyword according to the execution context

onClick = () => {
  return <div></div>;
}

How Execution Context Effect?

Es5 function behave differently when executed if the function is bounded with any other instance(object) then the this refer to that instance if there is no binding then the this keyword refers to its parent scope.

The setTimeout executed in the global execution context the callback function es5Function which is not bound to any instance, the this keyword in the function will refer to its parent scope which is in our case window

<script>
  window.name = "Global Scope";

  function App() {
    this.name = "App Scope";

    let es5Function = function () {
      console.log("I am Es5 function I am in the " + this.name);
    };

    let es5FunctionWithBinding = function () {

      console.log(
        "I am Es5 function binded with THIS, I am in the " + this.name
      );

    }.bind(this);

    let es6Function = () => {
      console.log("I am Es6 function I am in the " + this.name);
    };

    return [es5Function, es5FunctionWithBinding, es6Function];
  }

  const [es5Function, es5FunctionWithBinding, es6Function] = new App();

  setTimeout(es5Function, 1000);
  setTimeout(es5FunctionWithBinding, 1000);
  setTimeout(es6Function, 1000);

</script>

Using as Function Constructor

One more simple difference is we can not use arrow functions as a function constructor

The question is why?

When we create an object using function constructor (with new keyword) then the function returns the this keyword by default which refers to a new memory location every time.

So simple conclusion

• Es5 function has it's own this when using it with new keyword so it returns it by default
• Es6 arrow function throw an error [function name] is not a constructor ( because arrow function doesn’t has its own this)

<script>
  function Es5(name) {
    this.name = name;
    // by default it will return this when using with `new` keyword
  }

  const Es6 = (name) => {
    this.name = name; // here this refers to global scope which is window
  };

  let es5Instance = new Es5("MUHAMMAD ILYAS");
  console.log("Es5 instance => Name:", es5Instance.name);

  try {
    let es6Instance = new Es6("jsfit");
  } catch (e) {
    console.log("Es6 with new keyword => ERROR:", e.message);
  }

  let es6InstanceWithoutNewKeyword = Es6("jsfit");
  // es6InstanceWithoutNewKeyword will be Undefined because nothing was returned from Es6 function
  console.log("ES6 without new keyword: ", es6InstanceWithoutNewKeyword);

  // I am in the global scope so here `this` refers to `window` so both will result the `name` exactly the same

  console.log("Global scope: ", this.name, "or", window.name);
</script>

Answer 2

What is the difference in rendering from a arrow function and a function?

There is no difference at all.

Arrow functions differ from regular functions in how they handle this. There are other differences as well but difference related to handling of this is the most significant one.

Not related to your question but you should know that first onClick function cannot be used inside functional components unless function keyword is written before the function name and second onClick function cannot be used inside class components unless const keyword is removed.

Answer 3

Difference is You can change the elements of a constant but you cannot reassign the constant