Skip to content

ReactHydration

React helpers for applying dehydrated Effect Atom state to a React subtree. The HydrationBoundary component reads the nearest RegistryContext, hydrates new Atom values before children render, and delays updates for existing Atom values until after commit so React transitions do not update the current UI too early.

2 exports Added in v4.0.0 Source

Components

HydrationBoundary

Added in v4.0.0 Source

Provides a React hydration boundary that loads dehydrated Atom values into the current Atom registry.

When to use

Use to apply dehydrated Atom state to a React subtree that reads from the nearest RegistryContext.

Details

New Atom values are hydrated during render so descendants can read them immediately, while values for existing Atoms are deferred until after commit so transition data does not update the current UI before React accepts it.

See

  • Hydration.dehydrate for producing dehydrated Atom state
  • Hydration.hydrate for lower-level non-React hydration

Signature

declare const HydrationBoundary: React.FC<HydrationBoundaryProps>;

HydrationBoundaryProps interface

Added in v4.0.0 Source

Props for a boundary that applies dehydrated Atom values to the nearest RegistryContext while rendering its children.

Signature

interface HydrationBoundaryProps {
  children?: ReactNode;
  state?: Iterable<DehydratedAtom, any, any>;
}