Transitions

[00:00] So, what we're going to do is get our transition. So, isTransitionPending and startTransition. That's going to come from useTransition, not useState, AI assistance. You got to always review their code, and we're going to do the HANA 100 useSpinDelay, but here in a second, we'll

[00:18] observe the reason why that's necessary. So, we'll just actually, for now, we'll call this isPending. Then down here, we'll say our opacity is 0.6 if we're pending, otherwise it'll be one. Then when we make

[00:38] the state change that triggers the suspense or the suspending component, then we're going to startTransition here. That way, the suspending event that happens as a result of this state change, will trigger as part of this transition

[00:55] rather than just showing the suspense fallback here. What that allows is for us to show this opacity, so the user can still see, oh, okay, they are responding or whatever. We could, if we wanted to, have a loading state, like it could be exactly the same thing. In fact, we can make the fallback and the pending show the same thing, but now we have a little bit more control over it.

[01:14] So, let's take a look at how this impacts things in the event of a really fast load. So, I hover over this, it's all loaded, I click it, and it instantly shows. So, no longer are we just going to show the suspense boundary automatically, it will instantly show. But the problem is, if we're on a reasonably fast network connection,

[01:34] so it's hard reload, whoops, hard reload with no cache, and I go to a reasonably fast connection, whoops, I just, where did I go? Yeah, there we go. We'll click on Show Globe, and it is showing the opacity, and then finally it loads it in. One thing that's very difficult for me

[01:54] to reproduce for you right now is a situation where it takes 300 milliseconds to load, and we show the pending state at 250 milliseconds or something, or you could use a CSS transition delay,

[02:11] whatever, to prevent showing the flash instantly. But yeah, there's like this timeframe where we could just show the pending state for like 50 milliseconds, and that would be really jarring. So, that's why we use useSpinDelay to improve that transition here,

[02:30] and we're going to bring in useSpinDelay from SpinDelay, and we're just going to use the defaults here. So, we'll rename this to isTransitionPending. We'll stick isTransitionPending in there, and isPending comes from SpinDelay. So, now we're not going to have that problem. Like I said, it's actually kind of hard,

[02:47] oh, we don't need that false in there either, ha ha. Like I said, it's kind of hard for me to reproduce the situation here of when you could see a flash of loading state, but useSpinDelay was built specifically to avoid that flash of pending state, and so that's why we are going to use it. Let's see if I can kind of simulate that.

[03:05] So, it's taking a second, taking a second, and I click it. Hey, yeah, maybe, I don't know, hard to reproduce, but definitely could happen, and worth including useSpinDelay. It's a really small library, and definitely I pretty much use it always when I'm using useTransition. So, there you go. Now, we have a really nice loading experience.

[03:24] We can preload it. One other thing that I will mention is that you could actually say load globe right here, just call it, so that it doesn't wait until we get focus or point or enter. It also doesn't come with the initial payload, so this can kind of happen in the background.

[03:45] Maybe not the most optimal way to load this resource, but if you really wanted to kick off the loading of that resource quickly, then yeah, you could do it that way too. All right, I think that you did a good job.

[00:00] So, one problem you might have noticed is if the user is on a reasonably fast connection and they hover over the globe and it's already loaded and we're ready to go, once I click on show globe, it should show immediately because all the code is ready to go. But when I click on it, it shows a loading state for just a second, just a flash of loading

[00:19] state that I'm not a super fan of. And if it's a cached or if we're like really fast, even in that scenario, then it's still a flash of loading state. Not a super fan. At least it's not a flash. It's more of like a showing loading state unnecessarily. An unnecessary loading state, I guess.

[00:38] And the reason for this is because of transitions. When a suspense boundary is rendered, it's always going to show the fallback for a short period of time just because we don't want to have that sort of flash of loading state. But if we put this in a transition, in our own transition, then we get to control the pending state.

[00:57] And we could throw that in a spin delay and be in a really good place, just like we did in the suspense workshop. If you've been through that already, then this will be very familiar. If you haven't, then go through it because it's really useful. So we're going to be using use transition and spin delay to avoid a flash of pending

[01:14] state here and make it transition more instantly. So let's go.

In this workshop you will diagnose, profile, and fix performance problems in your React application using the Browser Profiler, React DevTools Profiler, and optimization techniques.

There are always trade-offs to consider when thinking about optimization. 

You will be learning optimizaiton patterns in this workshop. 

But, more importantly you'll be learning how to measure the performance of your app, carefully consider the complexity trade-offs of optimization, and understand which optimizations apply to certain situations. 

By the end of this workshop you'll understand how to: 

- Prevent unnecessary re-renders
- Render concurrently
- Lazy and eager load components
- Use memoization and web workers
- and use windowing with react-virtual


## Element Optimization

Gain practical experience optimizing React component rendering. 

Learn to hoist React elements to prevent unnecessary renders, pass elements as props, use React's Context API to trigger re-renders only on necessary state changes, and apply useMemo and React.memo.

## Optimize Context 

Here you'll learn three ways to optimize context: Memoize context values, create a provider component, and split context values into setter functions. 

In addition to the techniques, this will teach you how to use the devtools to determine which ones you need to use. 

## Concurrent Rendering

Sometimes, you're rendering so many components or those components are doing such complex things that you can't afford to render them all quickly enough.

Find out how to use the useDeferredValue hook and memo to prioritize the rendering of some parts of your app over others.

## Code Splitting

Code splitting acts on the principle that loading less code will speed up your app. There are three ways we'll approach it in this section:

Lazy loading, eager loading, and transitions. 

In lazy loading you'll learn how to use React's lazy method for lazy loading components

Eager loading is like a layer on top of lazy loading. You'll learn how to deferr the loading of a component until some event occurs like a mouse over or on focus. 

In transitions you'll learn to optimize the loading experience using the useTransition hook and the useSpinDelay hook from the spin-delay package.

## Expensive Calculations

JavaScript is single-threaded which poses a problem when you need to deal with some kind of expensive calculation. 

React has ways of dealing with this but if you are outside of React-land you'll be blocking the thread while the calculation is being performed. Luckily there are a couple options for dealing with this.

**useMemo** is useful if you're working with indempotent functions. And if you aren't, **Web Workers** let you perform the calculations on a separate thread but they add some complexity  to your code.

Throughout this workshop you'll be learning to measure performance and weigh the trade-offs of all the techniques you learn!

## Optimize Rendering

React is pretty smart about determining when it needs to re-render. But, sometimes there are cases we can get a bit of an edge over it ourselves. 

If your components are re-rendering when a DOM update isn't actually needed, you'll want to reach for memo and memoize your components. 

But, what if memo's built-in comparitor isn't doing the trick? It works off a simple Object.is. Which is great most of the time but if you're dealing with complex props you have the option of passing a custom comparitor function. 

## Windowing

And lastly you'll be exploring an advanced technique for when you're dealing with a truly massive amount of elements. 

There's only so much optimizing you can do when you need to rendering thousands of elements. But, what if you only had to render a slice of them? That's where windowing comes in. 

You'll be using the @tanstack/react-virtual library to virtualize only the visible DOM nodes (and a few nodes outside of view for the fast-scrollers) in a large scrollable element.

Diagnose, profile, and fix performance problems in your React application using the Browser Profiler, React DevTools Profiler, and optimization techniques.

React Performance

React Performance

Transcript

Transitions

Transcript