Inline function vs function passed by value in React.

It is always Interesting and exciting to learn different ways of coding, I am writing today to share one of the things that I have learnt this week.

Below is my little code practice for inline function and a function that is passed by value.

Inline function is simply a function that is defined and passed down inside the render method of a React component.

Below snippet is the Setup for my inline function practice using useState hook.

Result for Reset click event.

Result for Increase click event.

Result for Decrease click event.

And for the Reset functionality I have declared a function called reset and I just needed to reference the function as a call-back.

you can absolutely use the functions passed by value way on an array or object and there are times that we must use by passing functional values but not all the time.

Lets see how we can pass in function in our Reset functionality by setting up another counter:-

This is a set up where on click event, it should set up timeout to delay 2 seconds then the value should be updated.

On the Function setTimeout we need to pass two functions, one is a call back which will run in certain amount of time in our case a call back function that is going to run in 2seconds, so we pass in that value, it gets the current one and add up to it which will update the counter right away.

Below is the code snippet for passing by value.

Happy Codding!