useLayoutEffect

[00:00] So, you might have noticed that we're kind of cheating here a little bit. This typically happens so fast that you don't even know that it's a problem, and I had to artificially slow down rendering just so that we could observe this problem. So you notice, like, that's happening really fast. You do not see that there is a problem here.

[00:18] And so this is going to be the reality for you most of the time, and this is what makes use layout effects so tricky, is you're not always sure that you need it, and you don't want to have to test every single component that's using use effect. In fact, some of them are going to be libraries, and so you don't even know that they're using use effect.

[00:36] And so here's the rule about when to use use layout effect. If what you are doing in the use effect is going to impact the way that something looks in the UI, on that initial render especially, then you are going to want to use use layout effect. That's the basic rule. And so that is the case for us.

[00:55] If we're doing some measurements and then we're making a state change, this is definitely going to affect the way the UI looks, and so we're going to use layout effect from importing from React, and that will make sure that this runs synchronously before, right after the

[01:10] DOM has updated, but before the user gets to see what happens, so that we don't have that jumping experience. So that solves our problem, and it looks way better. If you want to be challenged, then you could figure out how to make it so that the tooltip isn't clipped off on the right side, or you can just use a library that does this for

[01:30] you. But this is what the library is likely doing, using use layout effect to prevent the user from seeing the incomplete UI. There you go, that's use layout effect.

[00:00] We've got ourselves a little problem. We have this use effect that measures our position for our tooltip, gets the bounding client rect, so it knows whether to put the tooltip above or below the target where the tooltip should go. Then we set the tooltip height, that triggers a re-render so

[00:19] that it renders in the right spot. The problem is, if we're on a lower end device or we've got a lot of complicated stuff going on on the page that's making things a little slow, this is observable while we're waiting to determine, okay, what is the position of this thing?

[00:36] Yeah, that is like terrible user experience here, and the situation is like some of these need to be rendered below, and that's why we have to have this measurement. So we render above by default, but if it's too close to the top, then we'll render it below. That's what's going on.

[00:54] So we need to change this to useLayoutEffect, because we need to make sure that we perform our measurements before the user has a chance to see the thing in the wrong spot. So that is your job. It's a very quick job, but hopefully you understand what's going on to actually understand why you need to do this,

[01:14] and when you would use useEffect over useLayoutEffect or vice versa. So have a good time.

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

Kent C. Dodds

React Fundamentals

React Hooks

React Suspense

Advanced React Patterns

React Performance

React Server Components

Epic React Pro

Advanced React APIs Intro

Intro to Advanced State Management

New State

Previous State

State Object

Action Function

Traditional Reducer

Real World

Dad Joke Break Advanced State Management

Advanced State Management

Intro to State Optimization

Optimize state updates

Dad Joke Break State Optimization

State Optimization

Intro to Custom Hooks

Hook Function

useCallback

Dad Joke Break Custom Hooks 

Custom Hooks

Intro to Shared Context 

Context Provider

Context Hook

Dad Joke Break Shared Context 

Shared Context

Intro to Portals

createPortal

Dad Joke Break Portals 

Portals

Intro to Layout Computation 

Dad Joke Break Layout Computation 

Layout Computation

Intro to Imperative Handles

useImperativeHandle

Dad Joke Break Imperative Handles 

Imperative Handles 

Intro to Focus Management 

flushSync

Dad Joke Break Focus Management 

Focus Management

Intro to Sync External State 

useSyncExternalStore

Make Store Utility

Handling Server Rendering

Dad Joke Break Sync External State

Sync External State

Outro to Advanced React APIs

Advanced React APIs

Advanced React APIs

Transcript

useLayoutEffect

Transcript