React Summit

React Summit 2023

This Workshop on React Performance covers various techniques and tools to analyze and optimize app performance. It includes using Chrome DevTools' Performance and Profiler panes, analyzing CPU activity and function calls, identifying expensive renders and components, debugging with 'why did you render', and optimizing React code and effects. The workshop also discusses the use of ConsoleTime API for profiling, optimizing the state manager, and analyzing memory performance. Overall, it provides valuable insights into improving the performance of React applications.

Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up). Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too. Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step. (Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)

React Performance Debugging Masterclass

Ivan Akulov

React Summit Remote Edition

React Summit Remote Edition 2021

This workshop on React Hooks Tips explores hooks beyond the basics, covering common mistakes, advanced hooks, creating custom hooks, and the rules of hooks. It demonstrates the use of useState, useEffect, and useContext hooks, as well as creating custom hooks for managing state and performing side effects. The workshop also covers the use of useRef, useReducer, and useLayoutEffect hooks, and provides insights into how React hooks work under the hood. It concludes with the implementation of a provider component and the use of context and reducers to manage complex state in functional components.

The addition of the hooks API to React was quite a major change. Before hooks most components had to be class based. Now, with hooks, these are often much simpler functional components. Hooks can be really simple to use. Almost deceptively simple. Because there are still plenty of ways you can mess up with hooks. And it often turns out there are many ways where you can improve your components a better understanding of how each React hook can be used.You will learn all about the pros and cons of the various hooks. You will learn when to use useState() versus useReducer(). We will look at using useContext() efficiently. You will see when to use useLayoutEffect() and when useEffect() is better. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

#react profiler