Variable BoundaryConst

Type Declaration

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

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

  Example

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

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

  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) is provided automatically by mount(), hydrate(), or renderToString().

  Example

  // Simple - show fallback immediately
  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

  Example

  // With error handling
  Boundary.suspense({
    render: () => Effect.gen(function* () {
      const user = yield* fetchUser(userId)
      return yield* UserPage({ user })
    }),
    fallback: () => $.div({}, $.of("Loading...")),
    catch: (error) => $.div({}, $.of(`Error: ${String(error)}`)),
    delay: "200 millis",
  })
  Copy