Action Function

[00:00] Again, I typically like to start by updating the use and then we can update the implementation. So the way that we want to use this is we're going to take the current state and use that to return the new state.

[00:14] So current state dot count plus the step and do the same thing for our decrement. So here we'll just decrement and this will be minus the step. And with that, now this is the API we want to support.

[00:30] To make it work, we're going to have to make it so that the action can be either the partial of the state or a function that accepts state and returns the partial state. So that makes TypeScript happy, but it actually doesn't work. So if we save this, yoink, yoink, yoink, yoink, yoink, and the reason is that we're passing a function.

[00:49] So this action is function. We're spreading the function. That isn't quite right. So we need to handle the situation where the action is a function. To do that, we're going to do a little ternary right here. I know some of you are going to throw up in your mouths. Feel free to multiline this thing if you like, but we're going to say type of action is a

[01:09] function. If it is, then we're going to call that with the state. Otherwise, we'll just use the action and then we'll spread the results, the completion value of this expression, into the larger object of state that we are creating here.

[01:26] And with that all situated, now our counter is working, hooray! And the step still works, yoink. So we're in a good spot here. So we updated our state updater functions here so that they access the current version

[01:44] of the state, and then we proceed. So I don't think it's been made totally clear why this is so necessary. So for one, if this is happening asynchronously, here, actually, let's show you the problem first.

[02:01] So if we just pass an object like this, it technically does work. However, if we were to, say, set timeout and stick this in there and then do this after 500 milliseconds, now if I click, boom, boom, boom, boom, boom, it only increments by one

[02:21] because at the time that increment was created for each one of those clicks, the count was at zero. And so we have a stale version of the count right there. The other thing that this helps us to, and actually, let me just show you that we don't

[02:37] have the problem here by doing the same for our decrement, except we'll leave decrement being the callback form. So here we go. So with the callback form, I click decrement three times, one, two, three, and it actually

[02:55] does decrement properly because we're always getting whatever the current state is at this time, which will be incremented properly. The other thing that this helps us avoid, if we get rid of this, is let's say we want to call this multiple times. So we'll call it three times for each one of these.

[03:14] So you would expect that by decrementing, it's going to go minus three. Boom, that works, hit it three times. But here we're saying set state, count plus step, count plus step, count plus step. That count variable, there's nothing in our code that will allow this count variable to

[03:31] be anything other than zero on this initial render, or now it's at minus three. So like, in fact, this is a const declaration, and so we can't reassign it to anything else. So for all of these set state calls, this value is going to be negative three, and that's why when I hit increment, it's setting it to negative two.

[03:51] So it's just incrementing it by one, even though we're calling it three times. So for these two reasons, if your state depends on previous versions of the state, then you should definitely be using the callback form. So there you go. That's why it was important that we update our reducer to support that so that we can

[04:10] handle those interesting scenarios. I hope that you learned something interesting. Let's move on.

[00:00] You know how I said we were getting pretty close to the way that setState worked in class components? Yeah, we're going to take that even further and make it so that when you call setState, you can actually call it with the previous state and use that, or I guess the current state, and use that to calculate

[00:18] or compute the next state. The reason this is actually really valuable is because if we were to put this setState call inside of a promise then handler, or after an await, or something like that, then what we had previously,

[00:34] which is just this, this could fall prey to the count being stale. So it's old version of count that we had when this setState, or when this increment function was established. By doing things this way, we avoid that problem,

[00:51] and also if you call setState a couple of times, then you avoid not having access to the latest version of the state. So the function form, or the action function that we're going to provide here, actually does solve some interesting issues, and the typical rule is

[01:10] if your previous state, or if your state change depends on the current state, then you should use the function form like this, which we have in our useState hook also supports a callback like this. So typically you want to do it that way if you're going to depend on the previous version of the state. So we're going to support that API,

[01:31] this is going to get us even closer to the way that this.setState worked back in the class component days. So, should be fun, and we're just taking things a little further and exploring a little bit more what we can do with this useReducer API.

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

Action Function

Transcript