Correct use of arrow functions in React

by

I understand that arrow functions make things more efficient by not
recreating the functions each render similar to how binding in the
constructor works.

This is not true. It depends on where exactly are you using the Arrow function. If Arrow function are used in render method, then they create a new instance everytime render is called just like how bind would work. Consider this example 

<div onClick={()=>{this.onClick()}}>Previous</div>

Here each time render is called an anonymous function is created and that function when called, calls this.onClick.

However consider the case below

onClick = () => {
    console.log("Div is clicked")
}

In above case, the arrow function does not recreate function everytime, but binds the context to the React component as An arrow function does not have its own this; the this value of the enclosing execution context is used. once when the class is instantiated. This is similar to how binding works is constructor. This is a part of proposed class fields for arrow functions and it isn’t a ES6 feature,

To understand what you wish to ask, you must know that a function gets its context from where it is called. Check this question for more understanding.

In your case, you have used Arrow function to define prevItem and hence it gets the context of the enclosing React component.

prevItem = () => {
    console.log("Div is clicked")
}

render(){
    return (
         <SecondClass prevItem={this.prevItem} />
    )
}

Now in its child, even if you call prevItem with any custom context, using bind or arrow function, prevItem when executed in parent i.e Main.js will get the context of its enclosing React component. And since you just wish to execute prevItem function and do not want to pass any data to this from the child, writing

<ThirdClass type="prev" onClick={()=>this.props.prevItem()} />

and

<div onClick={()=>{this.props.onClick()}}>Previous</div>

is simply useless and will only add to performance implication since new functions are created in SecondClass and ThirdClass everytime. You simply don’t need to have these functions defined as arrow function and could just write

<ThirdClass type="prev" onClick={this.props.prevItem} />

and

<div onClick={this.props.onClick}>Previous</div>

since its already binded in the parent.

Now even if you have to pass some additional data to these function from ThirdClass and SecondClass, you shouldn’t directly use Arrow function or bind in render. Have a look at this answer on How to Avoid binding in Render method

More Related Contents:

  1. How to use arrow functions (public class fields) as class methods?
  2. How to avoid bind or inline arrow functions inside render method
  3. Arrow vs classic method in ES6 class
  4. What do multiple arrow functions mean in JavaScript?
  5. Arrow function without curly braces
  6. Why shouldn’t JSX props use arrow functions or bind?
  7. What does the at symbol (@) do in ES6 javascript? (ECMAScript 2015)
  8. What is the difference between using constructor vs state = {} to declare state in react component?
  9. Can I use arrow function in constructor of a react component?
  10. Binding vs Arrow-function (in JavaScript, or for react onClick)
  11. What are “class fields” in JavaScript?
  12. Unable to use Arrow functions inside React component class [duplicate]
  13. ES6 functions, arrow functions and ‘this’ in an ES6 class [duplicate]
  14. Should we use useCallback in every function handler in React Functional Components
  15. Can I set a private class field using a variable as identifier? How?
  16. Performance penalty of creating handlers on every render with react-hooks
  17. Unable to access React instance (this) inside event handler [duplicate]
  18. Why do we need middleware for async flow in Redux?
  19. Push method in React Hooks (useState)?
  20. Why is my onClick being called on render? – React.js
  21. what is right way to do API call in react js?
  22. How to display binary data as image in React?
  23. Sending Request body for GET method in AXIOS throws error
  24. Recommended way of making React component/div draggable
  25. React: why child component doesn’t update when prop changes
  26. How to store Configuration file and read it using React
  27. How do I setState for nested object?
  28. useEffect is running twice on mount in React
  29. React – useState – why setTimeout function does not have latest state value?
  30. “You may need an additional loader to handle the result of these loaders.”

Leave a Comment