useCallback

[00:00] Great, so now we come down here to our setSearchParams. We're returning that here. And if somebody uses setSearchParams inside of a useEffect, then any time the components are re-rendered, that useEffect would run, which would be unnecessary. So we're going to stabilize this setSearchParams by wrapping it in useCallback.

[00:19] So setSearchParams is useCallback version of this setSearchParams. So we'll just do this and that. And then our dependency array will be empty because we actually don't have any dependencies. Yeah, and that's really it.

[00:38] If you wanted to, you could change this to an arrow function. There you go. That could look better, I guess, if you wanted to. But yeah, we don't have any dependencies in here that are something that React can track. If we wanted to use the current search params,

[00:57] like, there we go. So here, we're no longer assigning search params here. We're referencing the ones from up here. And so React is like, hey, you need to set search params in there so that I can update the callback whenever that changes. Otherwise, we'll have an old version of the function that is referencing an old version of the search params. And so that's why it's giving us that warning right there.

[01:17] But by doing this, then anytime there's a state change in our search params, that'll trigger re-renders everywhere. This is honestly where the dependency array stuff gets kind of annoying, if I'm being completely honest. But most of the time, you don't really have to deal with this. It's only occasionally, and you just have to be kind of thoughtful about,

[01:37] how do I limit the number of dependencies I need to include in here? And a lot of that just involves putting more things into the use effect or putting more things into the use callback and referencing things that are like imports for modules. That's not going to be trackable by React anyway, so it doesn't say that you need to include that

[01:57] in your dependency array, stuff like that. Okay, great. So now this is not going to trigger a use effect unnecessarily just because the set search params changed. Because set search params is 100% stable, there's nothing in the world that can make set search params be different because we have our dependency array and it's empty.

[02:16] So, well done.

[00:00] So, what we've got works out pretty well for our specific use case, but once you make a reusable hook, you want to think about use cases that you haven't thought about yet. Things that people will do with your hook that you didn't intend on or plan on initially,

[00:16] and it's perfectly reasonable for somebody to use your setSearchParams function in a use effect. And if they do, they need to provide that as part of the dependency array, because if they don't, then they could be calling setSearchParams with an old version of that function, which

[00:34] can definitely cause problems. So we always want to include this in our dependency array, but the problem is that now setSearchParams is going to be different every single time a re-render happens, and so we're going to be calling this use effect every single time a re-render happens, which we may not actually want.

[00:52] So, and of course, some condition needs to be in there also. Don't forget your dependencies, folks. So your job is to make it so that by including setSearchParams, we're not triggering the use effect unnecessarily. It should only be triggered when some condition changes. setSearchParams should be stable.

[01:10] You're going to stabilize it with useCallback. All right, that should be enough for you to get going on with, so let's get going on.

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

useCallback

Transcript