Tools For Measuring React Performance Brenda Jimenez @itreverie 

React Developer Tools *Available in Chrome, Firefox, etc. @bitreverie 

Chrome Developer Tools Performance Tab http://localhost:3000/?react_perf 

React Perf react-addons-perf for React 15 *Available just in Chrome @bitreverie 

React Performance Devtool react-perf-devtool for React 16 *Available in Chrome and Firefox @bitreverie 

Printing Results or React Perf – Print Operations Shows DOM manipulations made. We want in the list just the component we are working with!! – Print Wasted Shows time spent on components where the render stayed the same. We want to this list to be empty!! – Print Inclusive Prints the overall time taken – Print Exclusive Times don’t include the times taken to mount the components (processing props, calling componentWillMount and componentDidMount, etc.) @bitreverie 

shouldComponentUpdate() React.PureComponent The default implementation of this function returns true, leaving React to perform the update React.PureComponent. shallow comparison of current and previous props and state. – simple props and state, or use forceUpdate() when you know deep data structures have changed. – Or, consider using immutable objects to facilitate fast comparisons of nested data. @bitreverie 

Component Pure Component vs @bitreverie 

Styles Time Comparison ClassName Function Style Styled-Components @bitreverie 

React Developer Tools Depending on the frequency of updates, a different color is used: @bitreverie more frequent less frequent 

Some other tips – Avoid inline styles at all cause Using inline styles causes a huge performance drag. It takes createElement a vast amount of time to go through every defining style and rendering it to the Dom. – Avoid doing anything synchronous in componentWillMount. Anything that is time consuming and requires synchronous time do it in componentDidMount. – Decoupling your application. Firstly you can do code splitting with React Router allowing you to load the code faster.You are separating the rendering trees @bitreverie 

Thanks Brenda Jimenez @bitreverie @itreverie https://github.com/itReverie/itr-performance-react15 https://github.com/itReverie/itr-performance-react16