flushSync

[00:00] To get started, let's handle the case where when I click on it, it turns into an input, but I want to select all the text. I want to be focused on there. So we're going to wrap this in a flush sync from React DOM, so that the edit gets turned to true,

[00:19] and we render this form instead of the button. So that's going to happen instantly, and now we'll have the button. So we can say input ref.current.select, and that will select all the text. Of course, if we select all the text, then we're going to be focused on the input. So click, boom, look at that.

[00:36] That's so good. Awesome. Okay, so let's move on to the next thing. Now we're on the input. If I blur the input, then I should focus on the button. That would make sense. The button isn't there yet, so we got a flush sync to make it so that the button appears

[00:55] right away right after we're finished updating the value and setting edit to false. So once that happens, we can say, oh, we need a button ref, right? We need access to the button. So let's say ref equals button ref.

[01:10] Come up here and make a button ref right there, and then with this, we can say focus on the button when we blur. So coming over here, focus on this. I click on it, and I type something,

[01:29] and then I blur, and boom, look at me. I'm on the button. Amazing. So good. So, so good. All right, great. So now on key down. So if I'm moving around and then I type space, or maybe I type, actually, I'm on the input, I type escape,

[01:47] then that should also focus on the button. So let's wrap this in a flush sync. Set edit to false and focus on the button. Beautiful. So now I'm coming over here. I type something and I hit escape. Then we're basically quitting. We're just like, oh, never mind, cancel.

[02:07] Now we're focused on the button, so we can type it again. Oh my gosh. So good. So good. Okay, great. So when we submit, so I type something and I hit enter, I should also focus on the button. So let's wrap this in flush sync

[02:28] and focus on the button. And so I type in super duper neat and hit enter. I'm focused on the button. So fantastic. Well done, you. I love it. Love it to pieces. Yep. Such a good experience. All right.

[02:50] I like being able to use my keyboard around applications and I'm just a power user. There are users out there who cannot use a mouse for one reason or another and we should make awesome experiences for them too. So I'm glad that we have flush sync as a mechanism for us providing those awesome experiences. I hope that was fun and exciting for you.

[03:09] Well done.

[00:00] We've got a pretty cool component in here. I've got these two buttons just so that you can test out your focus. But this is actually also a button. So you can imagine this could be like the name of a project or the name of your cat or whatever. But it's just a button that the user could then click on.

[00:18] And at that time, it actually changes into an input, which is kind of interesting. And so then you can say, Frank is the name of my cat. And then I hit Enter, and that changes it back into a button that we can focus on. So that's the idea. That's what this thing is. And as you focus on it, then, well, see,

[00:37] we've got focus problems, right? When you blur it, it changes back to a button. And there are various other interactions. So you click on it. It should turn into an input. But I want it to focus right away. If you focus on it and hit Enter, it should turn into an input. But I want it to focus right away.

[00:55] If you blur, it should turn back into a button. And that's fine. So there are various experiences that require some of our focus management here. And we're going to need to use Flush Sync. So we're going to use it a couple of times in this example. So as a reminder, that's coming from React DOM.

[01:14] And then you call Flush Sync. You put your state updates in there. And then you can do your focus management thereafter. So let's get into 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

flushSync

Transcript