New State

[00:00] The objective here is to make it so we don't have to change any of the rest of our code. The stuff that's calling our state updaters, we want to leave that the same. And so we need to implement our reducer in such a way that we preserve this API. Right now it's already using useState and it works just fine. We just need to make sure we don't break it. That's it.

[00:18] So let's make our countReducer. And it's going to accept a state and then it's going to accept whatever is passed to the dispatch function, the setCount function. And so what we're passing is actually what we want the new state to be.

[00:35] And so we're going to just say state here. It's unknown. We actually don't care. I'm going to just say unknown. And then our second argument, we're going to call it newState. And this will be a number. And then we'll return the new state. So the reason I'm saying the state is unknown is not because I don't know what it is.

[00:52] It's going to be a number, but just because I don't care what it is. We're not going to use it anyway. So you feel free to say number here. I don't feel that strongly about that. Okay, great. So now we're doing basically what useState does, is it accepts the new state that we want to have.

[01:11] And so we just return that, and that's what our reducer is doing. So we come here and say useReducer. We pass our countReducer and the initial count. We are, of course, going to need to bring in useReducer. And that should get us all set.

[01:30] Ta-da! Now we're using useReducer instead of useState. And we're simulating the useState API by accepting whatever the new state should be. And we're just wholesale using that rather than referencing whatever the current state is, because it doesn't make a difference for this particular exercise step.

[01:50] But for the future, we are going to be using that. So useReducer, you pass the reducer and then the initial value. You get that initial value on the initial render. When this dispatch function, the setCount function is called, it's going to call our reducer with the current state and the new state,

[02:08] and then you combine those two in whatever way you choose to return what the finished state should be. We are just simply returning the new state, returning what we're passed. And that is the first step in your process of understanding this API.

[00:00] For the first part of this exercise, our counter is already implemented using useState, and your job is to rewrite it using useReducer. So this is absolutely a thing that you can do, and I have a blog post, how to implement useState with useReducer, and another one, should I useState or useReducer?

[00:18] You can take a look at these blog posts later or now if you'd like to pause the video. But the idea here is that there is some overlap in what these APIs are capable of, and you can even build one out of the other. And useReducer is certainly a very powerful API,

[00:36] and we're going to be getting an idea of the overlap by migrating from one to the other, but in such a way that it maintains the API of state updates that we experience with useState. So it's gonna be fun, and it should be pretty quick. We'll see you when you're done.

Advanced React APIs covers many of the React API 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

New State

Transcript