Context Provider

[00:00] Alrighty, so let's start with the type that we need for our search params context So I'm going to do right type search params tuple It's a read-only array of the URL search params type and a type of the set global search params

[00:17] This type is exactly the same as what we're returning from our use search params And this is going to be the value of our context So let's create our context our search params context, which will be the react create context of the search params Temple, let's get rid of the react dot here and pull in that import from react

[00:35] And so now we've got our search params context That we can render for our app here So what we can do actually to make things pretty easy is instead of use search params right here

[00:51] I'm going to copy that and we're going to call this our search search params provider And we'll accept children. That's our react node and then down here instead of returning this this is actually going to be our value and Then we can return

[01:09] Our search params context our AI assistant wants to do dot provider You no longer need to do that. If you've been doing react for a while, you might have done that also But react doesn't require you to have the dot provider anymore. In fact, it's deprecated. So stop doing that

[01:25] But we render our search params context. Here's our value and we'll render the children along with that and Now we'll create a use search params hook that simply returns use Use search params context will bring in use from react and

[01:45] That it is going to make it all work all over the place except first We need to wrap everything in the search params provider so that they're all accessing The same params that are managed by the search params provider. So with that all done Now they're accessing the same params. And so therefore

[02:06] We are updating the search for what's in the URL and we're also updating The params that are used to manage the sorting and the filtering of the blog posts So just quick review on this. We created a type for our context. We Initialized our context here

[02:25] we updated our hook to instead be a provider that rendered our context and then we made our simple hook that consumes that context and then we wrap everything in our app with the Context provider so that all of the components that use our hook Will access the same context provider

[02:46] So for example, this this is important because if I tried to do a matching post outside of here Now we're not going to have them using the same Context value. So that is your little intro to context

[00:00] All right. So Kelly, the coworker, was refactoring the code. We're really grateful for Kelly, but she didn't quite finish because things are broken now with the refactorings that were done. We're no longer properly filtering the blog posts. And the reason is because we're using

[00:14] use search params in two places and they are separate. So we need to add some context for our use search params. So we're going to create a search parameter provider and provide and that's going to manage our search params stuff. And then we'll just have our use search params be a simple

[00:31] hook that uses that context provider and provides the same search params stuff to all of the components who care about the search params. So that's your job. When you're all done, this of course should work. So good luck.

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

Context Provider

Transcript