Advanced React APIs

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.