The art of ignoring best practices for React performance

Have you ever wanted to break the rules and be a React troublemaker? I’ll show you how ignoring React’s best practices can improve performance, all without major rewrites to your codebase. We’ll break rules like unidirectional data flow, pure components, and never calling hooks conditionally. To understand how, we’ll learn when React decides to render and how to trick it to render less frequently. We’ll build components that don’t render anything, conditionally call hooks, and even use a piece of Svelte - all to quickly fix real performance problems I encountered at Microsoft.

Transcript

2. Why do you need to… Use unidirectional data flow Avoid calling hooks conditionally Store state using the useState hook
3. Conditionally call React hooks Build impure components Pull in a second UI library
4. About me Senior Software Engineer building Microsoft Loop Worked on Edge, Chrome, and Firefox React developer for 8+ years tigeroakes.com @notwoods.bsky.social @not_woods
5. The art of best practices for React performance ignoring
6. * * * *
7. CAUTION! Use your best judgement, evaluate tradeoffs, and communicate. Photo by Markus Spiske on Unsplash
8. THE PLAN 01 When does React rerender? 02 How to isolate expensive hooks Using impure components 03 How to only update leaf components Using a different UI library
9. 01 When does React rerender? Photo by Noah Boyer on Unsplash
10. Every rerender starts with a state change. State change Component re-renders
11. Every rerender starts with a state change. State change Component re-renders Descendant components re-render
12. function MyCounter() { const [count, setCount] = useState(0); const handleClick = () => setCount(count + 1); return ( <div> <Title /> <CounterDisplay count={count} /> <button </div> ); } function Title() { return <h1># of rules broken</h1>; } function CounterDisplay({ count }) { return <strong>{count}</strong>; }
13. function MyCounter() { const [count, setCount] = useState(0); const handleClick = () => setCount(count + 1); return ( <div> <Title /> <CounterDisplay count={count} /> <button </div> ); } function Title() { return <h1># of rules broken</h1>; } function CounterDisplay({ count }) { return <strong>{count}</strong>; }
14. function MyCounter() { <div> <h1># of rules broken</h1> <strong>{1}</strong> <button </div> } <div> <h1># of rules broken</h1> <strong>{0}</strong> <button </div> vs
15. App MyCounter state: count (0) Title CounterDisplay props: count (1) (2) (3) (4) Increment
16. App MyCounter state: count (0) Title CounterDisplay props: count (1) (2) (3) (4) Increment React.memo() React.memo()
17. React Profiler: Highlight renders
18. React Profiler: Highlight renders
19. React Profiler: Why did it render?
20. https://www.joshwcomeau.com /react/why-react-re-renders/
21. Just always write performant components!
22. Every rerender starts with a state change. State change Component re-renders
23. 02 Isolating expensive hooks Isolate state changes with side effect components Photo by Sam Pearce-Warrilow on Unsplash
24. function useGetData() { const [state, setState] = useState(); useEffect(() => { fetchData().then(setState); }, []); return state; } function App() { const data = useGetData(); return <UI data={data} />; }
25. function useGetData() { const [state, setState] = useState(); const [otherState, setOtherState] = useState(); useEffect(() => { fetchData().then(setState); }, []); useEffect(() => { fetchOtherData(state.id).then(setOtherState); }, [state.id]); return otherState; } function App() { const data = useGetData(); return <UI data={data} />; }
26. function useGetData() { const [otherState, setOtherState] = useState(); useEffect(() => { fetchData() .then(state => fetchOtherData(state.id)) .then(setOtherState) }, []); return otherState; } function App() { const data = useGetData(); return <UI data={data} />; }
27. function ExpensiveEffect(props) { const otherState = useGetData(); useEffect(() => { props.setState(otherState); }, [otherState]); return null; } function App() { const [data, setData] = useState(); return <> <ExpensiveEffect setState={setData} /> <UI data={data} /> </>; }
28. App state: data ExpensiveEffect props: setState UI props: data
29. 5x speedup Refactoring in Microsoft Loop 1x per state change
30. return ( <> {shouldLoad && ( <ExpensiveEffect setState={setData} /> )} <UI data={data} /> </> );
31. const LazyExpensiveEffect = React.lazy(() => import('./ExpensiveEffect’) ); return ( <> <React.Suspense fallback={null}> <ExpensiveEffect setState={setData} /> </React.Suspense> <UI data={data} /> </> );
32. @Composable fun loadData() { val (state, setState) = remember { mutableStateOf() } SideEffect { fetchData().then(::setState) } return state } @Composable fun App() { … }
33. App state: data ExpensiveEffect props: setState UI props: data
34. 03 Only updating leaf components Pull state management out of React Photo by Jakob Rosen on Unsplash
35. Sidebar Item Date Item Date Item Date
36. useState
37. Svelte
38. import { writable } from 'svelte/store'; let store = writable(initialState); store.set(newState); store.update(oldState => newState);
39. import { writable, derived, } from 'svelte/store'; import {} from 'svelte';
40. import { writable } from 'svelte/store'; function Sidebar(props) { const store = React.useMemo(() => writable()); return <> {props.items.map(item => <Item item={item} state={store} /> )} </> }
41. import { writable } from 'svelte/store'; let store = writable(0); store.set(1); store === store;
42. import { useSyncExternalStore } from 'react'; import { get } from 'svelte/store'; // useSyncExternalStore internally uses // useState and useEffect const state = useSyncExternalStore( store.subscribe, () => get(store) );
43. Sidebar Item skipped Date Item skipped Date Item skipped Date
44. Svelte Stores • Store is a constant reference passed around with props or context. • Store’s value can be changed without re-rendering React tree. • Translated into React state using the useSyncExternalStore hook.
45. function Sidebar(props) { const store = React.useMemo(() => writable()); return <> <ExpensiveEffect setState={store.set} /> {props.items.map(item => <Item item={item} state={store} /> )} </> }
46. import { writable, readable } from 'svelte/store'; class DataModel { #state = writable(); get state() { return readable(this.#state); } performUpdate() { this.#state.set('done') } }
47. Redux • Store is a constant reference passed around with <Provider />. • Store’s value can be changed without re-rendering React tree. • Translated into React state using the useSelector hook.
48. React.useReducer • Reducer value is stored as one giant React state object. • Changing reducer’s value will re-render React tree. • State is translated at the top of the React tree once, instead of in the leaf components.
49. Could you use Signals? Yes.
50. import { readable } from 'svelte/store'; const mediaQuery = window.matchMedia('(max-width: 640px)'); const mediaQueryStore = readable( mediaQuery.matches, function onFirstListenerStart(set) { const listener = () => set(mediaQuery.matches); listener(); mediaQuery.addEventListener('change', listener); // return cleanup function, similar to useEffect return function onLastListenerStop() { mediaQuery.removeEventListener('change', listener); } } );
52. CREDITS: This presentation template was created by Slidesgo, and includes icons by Flaticon, and infographics & images by Freepik THANKS! https://loop.microsoft.com tigeroakes.com @notwoods.bsky.social @not_woods Photo by Fabio Spinelli on Unsplash