React.cloneElement in List performance React.cloneElement in List performance reactjs reactjs

React.cloneElement in List performance


Seeing React.cloneElement in the middle of some JSX can look a little scary and unfamiliar, but it is very benign from a performance standpoint. The thing to realize is that JSX gets transformed into calls to React.createElement which just returns an object. React.cloneElement is just copying that object and allowing you to modify props in the process. The resulting object will look no different to React than the original object created via JSX aside from the prop changes, and it has no harmful effects as far as causing extra renders. The performance impacts are of no more concern than if you had a function that was transforming some data by taking in an array of objects and creating a new array with copies of those objects with an additional property.

Material-UI leverages React.cloneElement internally in a number of places to add in additional props to children such as in Radio.js.