-
Standardise naming. onX for eventHandler props. handleX for the func.
-
Avoid use of anonymous functions that may cause unnecessary re-renders.
Because we are passing anonymous functions, React will always re-render since it receives a new anonymous function as a prop which it is unable to compare to the previous anonymous function (since they are both anonymous). On the other hand, passing in a reference to the method like onClick={this.handleClick} lets React know when nothing has changed so it does not unnecessarily re-render. However, the anonymous function is sometimes unavoidable as when we need to pass in an argument available only in the context: onClick={() => {this.handleClick(argHereOnly)}} .
- Composition and componded components over passing everything by props.