Tools for Measuring React Performance

Some tools to measure React Performance react-perf for React 15 and React Performance Dev Tool for React 16.

Transcript

1. Tools For Measuring React Performance Brenda Jimenez @itreverie
2. React Developer Tools *Available in Chrome, Firefox, etc. @bitreverie
3. Chrome Developer Tools Performance Tab http://localhost:3000/?react_perf
4. React Perf react-addons-perf for React 15 *Available just in Chrome @bitreverie
5. React Performance Devtool react-perf-devtool for React 16 *Available in Chrome and Firefox @bitreverie
6. 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
7. 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
8. Component Pure Component vs @bitreverie
9. Styles Time Comparison ClassName Function Style Styled-Components @bitreverie
10. React Developer Tools Depending on the frequency of updates, a different color is used: @bitreverie more frequent less frequent
11. 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
12. Thanks Brenda Jimenez @bitreverie @itreverie https://github.com/itReverie/itr-performance-react15 https://github.com/itReverie/itr-performance-react16