Video details

Yanai Edri - React Performance with React Dev Tools | ReactNext 2021


Israel's Annual React & React Native conference
React Performance with React Dev Tools
All of us are familiar with the react dev tool - how to select a component and observe the state and the props - but this tool also has the profiler tab - so let's dig in
Yanai Edri Senior Web Developer at CyberArk
Yanai Edri, a web developer @Cyberark, founder of the Negev Web Developer community, writer from time to time, loves open source and with more than 16 years of experience.


Wow. React next. After one years we are back. Thank you everyone that you choose to join me today's live talk. This is my first talk. I was speaker here and React next. So excuse me about my excited. Let's talk about performance when we know that we have performance issue in our site. Actually we don't. We don't fill it until our animation frame will be less than 16 frames per second or the animation is junk. If we have a performance issue, why is it so important to us? First of all, let's talk about how performance issues measured in the past and how performance issues measured in current days. In the past, Google measured performance. They check when the Dom is loaded. But in the last few years they present us the Google performance metric that talk about when the user have interaction is in our page. But still, why so matter to us if the main thread is block or not? It's very simple. When the main thread is block, you lose money. Did you know that more than 87% of your user will abandon your site after 3 seconds if the site is not loaded? Did you know that even Google itself tried to load their site than a half of seconds? Okay, now we know why this performance is so important. Because we lost money and we lost engagement. How we can fix it. Everyone know in a regular app or in the past you can use the performance tools to see where is the main block. But if you're familiar with that timing API, you can Mark suspicious code that you may or may not block your main thread and check if it meant the blocker thread. But this is regular app. We're here to talk about React performance with a profile. Let's introduce myself. My name is Yanai. I'm in Cincinnati. Thank you. I'm more than 16 years of development. I'm loving in Webtech. I love the community. I'm writing time to time at Medium. I'm married and I have five kids. One of them in Ninja and the dog is escaped again. And I'm developer in Cyber Arc and member of Cyber Ark Guild. Last and not least, I am the founder of Mega Web Developer. If you don't hear about us, we are the biggest community in the south of Israel. We have more than 1200 members. We organize, meetups, workshop, case study and so on. Of course, everything is involunteering react. What is the main problem in react? The main problem in react is rendering. Too much rendering too much rendering cause performance issue. I don't have a lot of reaction. A demo. Let's talk about a profiler. A profiler API under the hood implements some phases of the profiler API that giving us from react. As you can see here, the provider API have some phases and the provider tab can use it under the hood. Just a second. Bigger. Yes. And we try. Okay. It's okay. Okay. Let's see in action here. I have some simple reactor with counter. You can see that, ignore the first one. Let's look at counter. Every time I click on the counter you see all the phases. Log into the console. I took a brief look at the profile. This is the profile. You can show the rendering. Every column is rendered. You can see a frame chart or ranked and you can record your profiling. All nice tools. You can reload your app and start profiling. Let's click about, let's click once, stop it and let's see what is rendering. You can see here the rendering time but still we don't have useful information why it's rendered. Another trick you can do is go to the cargo and check on the record why each component is rendered. Let's try it again. Click once, stop it and let's look at it. You can see here why it's rendered. Because this is the first time the component is rendered. Okay. It's legit. Let's look about the second one. Hook one change and you can see every chart here is present component. Let's take a look at another application here. I have initial data I'm making from MTLA. Every data have state for active or not active and I pass it to the application. Okay, the application will get a state we have handle. Click that, change the active state and pass it to a box component the box component itself. Trigger the click and console log render box with an index and change the class name with if it's active or not active. Let's take a look at the application. This is the application. Let's reload the application and start profiling. Stop profiling. Okay. As we say the first time is reject every component is the first time it's rendered. Let's talk the second column. We see here 15 rendering twice. Okay. We see all the components that render twice. Let's look okay probe change active and unclick. Okay, let's try to memorize the box. Okay. And save it. Let's try it again. Click stop filing. Okay. We can see a little bit improving performance but still we have the on click change. Okay, the on click is coming from here. Let's try to use callback and we want this run on in the first time. So we give it empty dependencies and let's write again. Okay, stop. Okay. And good news. I see here only one render here. Let's talk about it. Okay. Only one component is rendered. Okay. We have some solutions that we have provided us. We have used memo. We have used callback and memo. If you're familiar with react component with classes implement under the hood should component update. I want to suggest you another great NPM package. That maintenance from some guys here from Israel. Why did you render this NPM package? Give you a lot more information why the component is rendered. You can try it. React basically is list. Everything is list of user list of movie list of Todo's list that you need to show in your table, in your chart, in your graph. Okay we can take another approach at least we can lazy load in the list it's piece by piece we can visualization the list. We can show the user only what he need to know to show to see a buffer above and beyond. And we also can take heavy CPU tasks to the web workers. And another very nice approach is offline canvas. If you're not familiar with that, I want to show you as some example here I have two canvas running on the same page. One of them is rendering in the application itself and one of the second work canvas is rendered with the web worker. Look what happened when I blocking the thread the canvas run on the worker keep going and the canvas on the main trade is blocked. Also react performance is very important if you don't want performance issue, don't write above code. Not everything is magic. Everything we do there is a trade off. If you use a lot of use memo or use callback or memorize, these actions also take a bite from your memory and they cause also performance issue. So although performance is very important to deal with, think if it's really worth it, if it's not, let it go. Thank you to join me.