State Object

[00:00] Let's start out by updating the usage and that will help guide us to the direction of how we implement our reducer. So first of all this change count is now set state and this is called state

[00:14] and we get the count from the state and then our set state is now going to have a count property which is count plus the step and here it will be an object whoops with a count property where

[00:30] it's count minus the step and that is the API that we're looking for. Oh and of course we also need our count set in here so we're getting a bunch of type errors because we haven't implemented our reducer to support this API yet. To make things a little bit easier we're going to have

[00:49] our state be typed here with count as number and then we'll have our action will just be equal to the state. So that's the API that we're exposing for right now just for a moment here. So you just

[01:04] pass us the same API for your action as you do as we have for our state. So then our count this is actually now going to be our state object and our action will be an action object and to make all

[01:20] this work we can just return the action and now if I increment and decrement all that is working just fine but we've got a problem here with one of the requirements that we had. So if I add some

[01:34] other state and then we console log that state you'll notice we have our some other state here but as soon as we make a state change that some other state is gone and that's because we're

[01:47] updating this or calling set state with that new count. So if we wanted to we could say some other state is state dot some other state yeah that would work TypeScript doesn't like it but who cares so there we go we're maintaining that state we want to simplify it further you could actually

[02:07] just say dot dot dot state and in fact let's not override it we want to do it on the correct side so we'll say dot dot dot state combined with that count and so now that's going to carry our state with us but we actually have that state when we are reducing things so we could actually do this

[02:26] take the action take the state whatever the action is will override that state and so now we don't have to bother doing this here whoops we can get rid of it right there and we're going to maintain that other state so if you had something that had a lot of elements of state and you're

[02:43] like I just want to update this one thing then this is how you might put together an API that supported that. So there you go that is getting us actually a little bit closer to some aspect of what it's like to work with reducers typically this actually resembles the class component syntax

[03:02] for set state that we did for it feels like many many years ago at this point but yeah set state from classes operated in a similar manner where you just provide an object with the properties that you want to update and it will merge those together and that is the API we provided pretty cool

[00:00] So we're going to expand this even further and say, what if we had multiple state properties? Maybe it's not just a count, but it's a count and some other state. So we're going to change to an object of state rather than just a number. So our initial state is going to be this object that has a count property.

[00:19] This will no longer be the count, we'll call it state and we'll call this set state. Then we can pluck the count off of the state with destructuring here. Then our increment and decrement functions will call set state providing the count change right here.

[00:34] So we're going back to specifying what we want the state to be. But we're going to do a little bit more than that because we want to be able to make it so you can have some other state, but still not have to specify that other state. So I want to be able to say, let's increment, we'll call set state with,

[00:54] here's the count property, but the resulting state should still have this some other state. So we've got to merge the old state with the changes that we're making. So that is your objective in this exercise. Let's get going.

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

State Object

Transcript