Skip to content
Advertisement

What is the difference between onClick={tmp} and onClick={()=>tmp}

I don’t know what the difference is between onClick={tmp} and onClick={()=>tmp}. I saw some YouTube videos, in them when tmp function has a parameter then it is expressed like onClick={()=>tmp(parameter)}. Also, when it has no parameter then it is expressed as onClick={tmp}. I don’t know what the difference between them is.

Advertisement

Answer

onClick parameter accepts a function callback. Assuming that tmp is a name of the function the different implementation work like:

  • onClick={tmp} just passed the function reference thats executed on clicking the element
  • onClick={()=>tmp} creates a new anonymous function that returns the reference to tmp, which is probably not what you wanted, instead you want to call that function withing the callback like so: onClick={()=>tmp()}. This is equivalent to creating another function ex function tmp2(){tmp()} cand passing it to the onClick the same way you did in the first example
  • onClick={()=>tmp(parameter)} like in the last example you are calling the function with a parameter, since onClick won’t pass parameter you want to the function you created another parameterless function
  • onClick={tmp(parameter)} is not a function reference, what you do here is pass the result of tmp function to the onClick parameter, which is most likely undesirable. Lets say the function updates DOM whenever it is triggered, in this scenario instead of updating DOM on every click, you would update it initially during rendering process and then make button no longer work.
  • Under certain conditions the onClick={tmp(parameter)} could potentially work assuming that tmp is higher order function, that the return value of tmp function is a different function for instance: function tmp(paramter){return console.log} this would be equivalent to doing onClick={console.log}
Advertisement