Optimize state updates

[00:00] Let's start with this first one. So what I'm going to do is reproduce it, and then we'll make sure that it doesn't happen again. Pull up our DevTools, and we're going to do a search for dog, and then I'm going to submit three times. So we're getting a bunch of re-renders for that, but I'm looking for the pop state event. So we should not re-render when going backward,

[00:19] because the query didn't actually change. But we are re-rendering because we're setting new search params every time we have a pop state event. So what we need to do is determine, did the actual value of the search params change, and if it didn't, then return the old search params so it doesn't re-render.

[00:36] Okay, so we're going to take this previous params, prev params, there we go, and we're going to get our new params from that, and we're going to return, well here, let's just check, if the previous params to string

[00:56] is equal to the new params to string, and if that's the case, then we can return the previous params. You don't need to change, otherwise we're going to return the new params. And so now, if I come here and go back, see we're still at dog, forward, back, forward, back, forward, sweet. So we are, let's just double check,

[01:16] console.log pop state happening, updating maybe, and now I go back, forward, back, forward, awesome. Let's add another entry in the history for adding cat, so now we should re-render between these two, yep.

[01:37] So we're in a good place there, re-rendering properly when we should, and not when we should not. Pop state happening, updating maybe, but we didn't update, so we're in a good spot there. So that takes care of this one. Now let's come down here to this one. So this is when we call set search params.

[01:56] That is happening inside of our form when we submit. So let's start over from scratch right here. Gonna open this up in a new tab, there's no history at all, and I'm going to choose dog, and we're gonna submit, submit, submit.

[02:14] Each one of those, you'll notice, is re-rendering. So, and we'll see we have a setting search params there. I hit again, hit again. So we should just get setting search params, but we should not be getting re-render. That is the objective here. So, we're gonna switch this to the callback form.

[02:34] We'll say pre params, and yeah, we can, yep. Our AI assistant has got us taken care of there. So if the previous version of the params, two string, is equal to the search params, so there's no change, then just return the previous ones. Otherwise, return the search params. That's it, that one's pretty straightforward.

[02:55] So we save this, and now, if I go submit, submit, submit, we're setting the search params, but we don't, there's no change needed, and so we're not re-rendering anything. But then if I change this, we're gonna get that, and submit that, and we're in a good place. Everything is working the way it should,

[03:15] and there's nothing that matches dog in Caterpillar, but there you go. So that is the optimization. Whether it's use state or use reducer, if you return the exact same thing that it gave you for the previous version of the state, then you will not get a re-render reactor. Just say, oh, no state change,

[03:35] so therefore, I will not re-render. There you go, optimizing state, pretty fancy.

[00:00] All right. So we've got something that's a little suboptimal in here. We put some console logs in our code so that we can know when certain things happen. So we're re-rendering the component for the new query. So we're initializing our components. We get a re-render there. And then if I submit right here, that's

[00:18] just setting this state in our history. So now we're setting the search params and re-rendering again. That wasn't really necessary, though, because we didn't need to re-render. There was no change in the state. So that's kind of interesting. If I go to dog and then submit that,

[00:36] we're getting a re-render every single time I do that. But we're not actually really changing much. So then if I go back, you'll notice that the dog query actually didn't change because that's what we were committed to before. But we're re-rendering anyway. And then we go back again. And that should re-render because that did actually

[00:55] change the UI a bit. So we are getting some re-renders that are necessary, others that are not. And we just want to optimize things so that we don't update the state when nothing actually ends up changing. So in the places where we're setting our search params, because that's how we're deriving our search query.

[01:14] So we're storing the search params in state. And when we go and update those, we want to check whether the search params actually are changing. And if they are changing, then we'll go ahead and update with the new version of the search params. If they're not, then we should return the old ones.

[01:31] And that will help us avoid re-rendering unnecessarily. So just a little optimization here. Let's get to it.

Advanced React APIs covers many of the React APIs that you might not see on a day-to-day basis but you will need these in your toolbelt for certain scenarios that pop up.

We'll take a tour of several advanced hooks and React API, their use-cases, and when to use them. 

These will include:

- useReducer
- use
- createContext
- useLayoutEffect
- useImperativeHandle
- useSyncExternalStore
- flushSync
- createPortal


## Complex State Management

First we'll dive into the deep-end of state management with `useReducer`. This hook comes in really handy when you feel the logic in your components is a sprawling mess and you'd like to consolidate that into a single place with a nice API to interact with. 

We'll get into some state optimizations as well as how to make your logic easily sharable throughout your application with custom hooks.

## Context

While context is often times something you will leave up to library authors, there are some cases where you want to expose values you need throughout your application. We'll build a context provider that will expose search params to our components on a blog search page with `use` (previously `useContext`) and `createContext`.

You'll also refactor this code to expose the context you create in a custom hook that will give us nice error handling when context isn't set up correctly.

## Portals

React gives us `createPortal` to render UI outside of the DOM tree structure that a component might sit in. This is useful for UI elements like modals or tooltips. We'll explore how to attach a tooltip to the `document.body` to ensure it's positioned where it needs to go.

## Layout Computations

If the logic that you are working with in a `useEffect` affects the how the UI looks, especially on first render, you'll want to `useLayoutEffect`. You'll work through an exercise where the client makes calculations on where to place a tooltip before rendering and see the difference when this is in a `useLayoutEffect`.

## Imperative Handles

`useImperativeHandle` is an escape hatch in React that lets you imperatively tell React what to do. This hook is typically paired with a ref (from `useRef`) where we want to expose imperative methods to developers who pass a ref prop to our components.

## Focus Management

`flushSync` is technically a 'de-optimization' because it forces React to re-render whenever you call it. This means you need to be very careful and know what you're doing when you use it.

The primary use-case for this API is focus management. When you have conditional UI that gets rendered based on various state conditions, you can `flushSync` to ensure elements are in the DOM to properly focus.

## Sync Exernal Store

There are some cases where we want to synce our React code with the external world and display different UI based on the state of the external world. This is where `useSyncExternalStore` is useful and lets you subscribe to external stores. We'll also touch on server rendering as this hook supports that use-case.

Learn the hooks and API that React has to offer for complex state management, sharing context throughout your app, focus management and more.

Advanced React APIs

Advanced React APIs

Transcript

Optimize state updates

Transcript