Variable BoundaryConst

Type Declaration

• error: <N, E, R1 = never, R2 = never>(
      tryRender: () => Element<N, E, R1>,
      catchRender: (error: E) => Element<N, never, R2>,
  ) => Element<N, never, R1 | R2>

  Error boundary that catches errors from a render function and displays a fallback element.

  Example

  // Using @effex/dom
  Boundary.error(
    () => riskyComponent(),
    (error) => $.div({}, $.of(`Something went wrong: ${String(error)}`))
  )
  Copy

• suspense: {
      <N, R1 = never, RF = never>(
          options: SuspenseOptions<N, never, R1, RF, never> & {
              catch?: undefined;
          },
      ): Element<N, never, R1 | RF | SuspenseBoundaryCtx>;
      <N, E, R1 = never, RF = never, RC = never>(
          options: SuspenseOptions<N, E, R1, RF, RC> & {
              catch: (error: E) => Element<N, never, RC>;
          },
      ): Element<N, never, R1 | RF | RC | SuspenseBoundaryCtx>;
  }

  Suspense boundary for async rendering with loading states.

  Renders the fallback while waiting for the async render to complete. Optionally delays showing the fallback to avoid loading flashes on fast responses. Optionally catches errors and renders an error state.

  The appropriate SuspenseBoundaryCtx layer (Client, SSR, Hydration) should be provided at the rendering entry point (mount, hydrate, renderToString).

  Example

  // Simple - show fallback immediately (using @effex/dom)
  Boundary.suspense({
    render: () => fetchAndRenderUser(userId),
    fallback: () => $.div({}, $.of("Loading...")),
  })
  Copy

  Example

  // With delay - avoid loading flash on fast responses
  Boundary.suspense({
    render: () => Effect.gen(function* () {
      const user = yield* fetchUser(userId)
      return yield* UserPage({ user })
    }),
    fallback: () => $.div({}, $.of("Loading user...")),
    delay: "200 millis",
  })
  Copy