App loading and run-time affect your bottom line. Fancy features aren’t worth anything if users leave the app out of frustration. Every second counts! React is super fast, but you could be shooting yourself in the foot with design decisions. Come learn how to make your React apps lightning fast!
Page abandonment increases with every second of load time. Also, profiling and debugging performance issues can seem like an overwhelming topic to learn. In this session, we’ll cover the usual suspects of performance issues, from the basics of using the correct build, to the fundamentals of immutable data, to higher-level tools like Perf, shouldComponentUpdate, PureComponent, and memoizing computed props in Redux.
We will both cover the concepts and walk through examples step-by-step so that by the end of this session you will feel like a React Speed Racer. You’ll get the most out of this session if you’re at least comfortable with React and ES6 syntax.
If you attended my talk at Agent Conf, and want to find the slides, you can check them out here. Here are all the extra resources I shared in that presentation:
Resouces linked in presented slides, but not in the resource list slide.
- The need for mobile speed: How mobile latency impacts publisher revenue by DoubleClick
- Spread syntax documentation by MDN
- Immutable.js
- React Virtualized package for windowing lists
- Debugging React performance with React 16 and Chrome Devtools by Ben Schwarz
- Real time performance audit with Chrome DevTools, lecture and demo by Jon Kuperman
- Chrome DevTools docs by Google
- Analyzing Network Performance by Kayce Basques at Google
- Analyzing Runtime Performance by Kayce Basques at Google
- Build Analysis on SurviveJS by Juho Vepsäläinen
- High-performance webpack config for front-end delivery by Drew Powers
- Loading images SurviveJS by Juho Vepsäläinen
- Responsive Images by Pete LePage at Google
- Responsive images free course by Google & Udacity - a bit basic at first, and uses Gulp (ugh), but still good on fundamentals
- Automating image optimization by Addy Osmani at Google bonus
- Loading images (webpack) SurviveJS by Juho Vepsäläinen
- Optimizing Performance, Reconciliation, Performance Tools, PureComponent official docs by Facebook
- Debugging React performance with React 16 and Chrome Devtools by Ben Schwarz
- Never Bind in Render by Ryan Funduk
- Don't Use Bind When Passing Props by Dave Ceddia
- 9 things every React.js beginner should know by Cam Jackson - opinionated but some great tips
- What are the benefits of immutability?
- Pros and Cons of using immutability with React.js
- Reselect npm package, by the React Community
- React/Redux Performance Tuning Tips by Arik Maor
You can follow me on Twitter and Medium!
Interested in having me speak at your event? Check out my speaking history and/or my website.