createPortal

[00:00] Let's start out by making sure we have this overflow hidden set. So our cards are doing what they're supposed to. And then inside of tooltip TSX, we've got this tooltip container that's responsible for rendering our tooltip where it's supposed to go and all of that. This needs to be inside a create portal.

[00:18] So we're going to call create portal, pull that from React DOM. So that updates our import right there. And this create portal needs a second argument that's saying, where do you want this portal to go? Document.body, that's where I want it to go. And now everything's positioned where it's supposed to be, hooray.

[00:37] Now you'll notice that it's getting chopped off on the edge here. And this is because you should use a library for stuff like this. I wanted to keep it simple. This is also borrowing some code from the React docs directly as well. And keeping it a little bit simple, typically you're going to want to use a library for this sort of thing.

[00:55] But like I said, not a terribly difficult thing to do. The libraries are probably doing the same sort of thing with create portal. You still can pass props to things and not worry about having to throw it over the fence over to wherever it's rendered. You just render it right where you want it. And then you can say where specifically you want the DOM nodes to go.

[01:16] Pretty handy feature.

[00:00] Kelly put together a really cool tool tip for these favorites. So people now know what this is all about Except that what the devil what? Yeah, we got a problem here so tool tips are one of those things that typically need to be rendered to the body so that they can be positioned absolutely where they're supposed to go and

[00:19] We are not doing that right now. And so that's why we're getting this funny experience. In fact We just disabled the overflow hidden which is what we typically want for our tool tip Or for our card Because without it you won't be able to see What's happening to the tooltip in lots of these cases you see just a little bit right there

[00:39] So make sure you re-enable this once you've reproduced the issue or you notice the issue So that our cards are doing what they're supposed to But your job is just to make it not Render here and instead render it in the body with a portal and not a lot of lines of code change here But important learnings nonetheless, so have fun

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

Dad Joke Break Portals 

Portals

Intro to Layout Computation 

useLayoutEffect

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

createPortal

Transcript