Derek Stavis discusses performance optimization in React and the importance of using tools to identify root causes before implementing changes. He emphasizes avoiding premature optimization and focusing on significant performance impacts, supported by visual tooling and common patterns. The presentation also encourages developers to join Brex for further opportunities in tech and performance challenges.

1. Approaching performance
when using React (but not only)
by Derek Stavis

2. Agenda

3. • Approaching performance
• Using tools to identify the root cause
• Common patterns avoid common problems

4. Quick plug about Brex
(and Vancouver)

6. The smartest card in the room
demands the smartest engineers

7. Fin ❤ tech

8. Expo, React Native, TypeScript,
SQLite, Objective-C, Java

9. Elixir, PostgreSQL, Functional
Programming, Distributed Systems

10. Come join us!

11. Come join us!
careers@brex.com
derek@brex.com

12. Or just 👋 to one of us

14. Enough of shameless plugs!

15. Let’s talk performance

17. The first thing you must know

18. Avoid prematurely optimizing for
performance without evidence
“I refactored this function and now it’s faster”

19. Use perceived performance to find
where to improve responsiveness
Responses below 100ms are perceived as instant — Jakob Nielsen

20. Use tooling to scientifically
find root causes
You’re considered wrong inaccurate until proven right otherwise

21. Focus on the 20% that will
give you 80% of results
Pareto never fails

23. Using tools to identify
the root cause

24. Let’s get into the weeds

25. React Dev Tools ⚛
The hunt for re-renders

26. Browser extension

27. Browser extension

31. Perform the actions you believe
are impacting performance

35. Browser Dev Tools 🛠
The hunt for expensive functions

39. Perform the actions you believe
are impacting performance

44. That’s not enough

45. Let’s demo!

46. But what about production?

47. React DevTools has a
production profiling bundle

48. React DevTools has a
production profiling bundle

49. Logging 📝

52. Common patterns avoid
common problems

53. Trivia Time

54. Can you spot performance issues here?

55. Can you spot performance issues here?

56. Can you spot performance issues here?

57. Can you spot performance issues here?

58. Can you spot performance issues here?

59. Can you spot performance issues here?

60. Avoid creating
new objects
when passing
as props

61. Use props and
dependency
inversion to bind
arguments to
handlers

62. Memoize the
selectors that
are run on the
render method
https://npmjs.com/package/memoize-one

63. Memoize the
callbacks you’re
using as well

64. Avoid reflows,
hence calls to
getBoundingClientRect
https://npmjs.com/package/react-select

65. And beware of
the libraries you
are using
packages/react-select/src/animated/transitions.js
81
82
83
…
84
85
JavaScript Showing the top two matches Last indexed on May 27, 2019
docs/App/Sticky.js
43
44
…
78
79
80
81
7 code results in JedWatson/react-select
or view all results on GitHub
Here we're invoking requestAnimationFrame with a callback
invoking our
call to getBoundingClientRect and setState in order to
resolve an edge case
around portalling. Certain portalling solutions briefly
remove children from the DOM
before appending them to the target node. This is to avoid
us trying to call getBoundingClientrect
while the Select component is in this state.
const offsetBottom = 88; // footer height
const { top: outerTop } = this.outerEl.getBoundingClientRect
();
const availableHeight = window.innerHeight;
let { height, width } = firstChild.getBoundingClientRect();
let scrollHeight;

66. That’s everything I had

67. I hope you learned something

68. If you like these challenges

69. Come join Brex!

70. Thanks!