Practical Performance for React - How Common Patterns Slow Down Your App

Overview

Explore how common patterns can slow down React and React Native applications in this 26-minute conference talk from React Amsterdam 2019. Dive into practical performance optimization techniques, covering UI and state management issues in both React and React Native. Learn to identify and avoid patterns that adversely affect app speed, including anonymous functions, connect props, selectors, and state updates. Discover strategies for efficient React reconciliation, batching Redux actions, and optimizing JavaScript animations. Gain insights into using benchmarking tools, addressing native-specific issues, and improving overall application performance through real-world examples and best practices.

Syllabus

Introduction
Benchmarking
General issues
The weak link
State change
Should component update
Example Problem
React Reconciliation Process
Recursive Updates
Examples
Anonymous functions
Connect
Props
Selectors
Updating State
Updating Local State
Updating Redux State
Batch Redux Actions
Connect State
Rerender
JavaScript
Animations
Bundler
Systrace
Routing
Conclusion