useImperativeHandle

[00:00] All right, Marty Moneybag gave us our API type, which is nice. So we're going to have a scroll to the bottom and scroll to top in reverse order right there. And then we're going to need a scrollable ref prop. We could call it just ref, but I don't know. It just kind of feels right to call it scrollable ref.

[00:18] The type for this is a ref object that implements the scrollable imperative API, or it could be null because we don't actually get it set until it comes into scrollable. So that's why it could be null, because it's going to initialize as null,

[00:34] and we're going to set it in our component here. All right, so with that now, we're going to say use imperative handle and pass the scrollable ref, and then a function that will assign the scroll to top and scroll to bottom for us automatically, which is quite nice.

[00:53] Feel free to, I'm not going to bother with the dependency array, but you feel free to add a dependency array to yourself and see how things kind of spider out from there. Dependency arrays are the worst. Okay, great. So now if they provide a scrollable ref prop, which they should because their types require it,

[01:13] then that scrollable ref prop will get these two functions added. So from there, they can call those and it will scroll where it's supposed to go. So let's create that prop here. It's a use ref. Here's our scrollable imperative API or null. We're going to initialize it to null,

[01:32] and here's our scrollable ref. So then down here, let's add that scrollable ref to there. And so now we have an object that has methods we can call to effectuate change inside of our scrollable component. So here are scroll to top.

[01:51] We can, whoops, say scrollable ref, there it is, dot current. If that exists, then we'll call scroll to top on it. And it will exist. But TypeScript wants us to make sure. If we don't include that, then TypeScript's like, oh, it might not. And it's true. Technically, it might not. There's nothing in here that ensures TypeScript

[02:10] that it will. So with that now, if I click scroll to top, boom, go to the top, scroll to the bottom, go to the bottom, up to the top, down to the bottom, looks awesome. So this is the imperative API that allows us to effectuate change inside of a component from a parent.

[02:30] And that works out really nicely for the occasional case where you actually need to have some sort of imperative interaction with the child's component. This is a perfect example of a situation like that. All right, there you go, well done.

[00:00] Okay, we've got this situation where we have this scrollable view right here and you can scroll to or you can add messages and remove them and it auto scrolls for you, which is cool. So this is a little scrollable component, but we also have this desire to scroll to the top and scroll to the bottom.

[00:18] And yeah, those buttons aren't working right now. So your job is to make those buttons work. The problem is that these buttons are rendered outside of the scrollable view. So the scrollable view is responsible for scrolling it to the bottom when you add new messages and stuff.

[00:37] You need to talk to that scrollable view yourself so that you can say, hey, I want you to scroll to the top or hey, I want you to scroll to the bottom. So that's what your job is. You're going to be using use imperative handle to make that happen. And in my finished version, I actually don't include the dependency rate.

[00:54] You don't have to include a dependency array, but you can if you want to. It does complicate things a little bit, but in this particular instance, you actually don't need it. It's not going to be like suboptimal or anything. It's going to work just fine. So yeah, I think you're ready to go. Let's go.

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

useImperativeHandle

Transcript