# Pending \[Render pending, rejected, and fulfilled UI for any observable] Subscribes to any `ObservableLike` and renders pending / rejected / fulfilled UI. The `rejected` render prop receives `{ error: unknown }`. If `rejected` is omitted it renders nothing and logs the error to `console.error`. Reload is not carried on the status object: get it from the [`useStateData`](/react/use-state-data) handle's `reload()` (or `getAttachedReload(source$)` for a standalone observable). `Pending` is the preferred way to unwrap async state for rendering — it keeps the unwrap at the render edge ([late unwrapping](/core-concepts/late-unwrapping)), whereas the [`usePending`](/react/use-pending) hook pulls the status branch up into the component body. It also revalidates smoothly: a reload refetches in place (`data$` keeps its identity and skips the interim `PENDING`), so `Pending` holds the last fulfilled value across a background refresh — a live `stale` update swaps the content underneath with no pending flash. ```tsx import { useMemo, useState } from "react"; import { Pending, useStateData } from "rxfy-react"; import { todosState, fetchTodos } from "./todos"; function Todos() { const [filter] = useState<"all" | "active" | "done">("all"); const params = useMemo(() => ({ filter }), [filter]); const { data$, reload } = useStateData({ state: todosState, fetchFn: fetchTodos, params }); return ( Loading...

} rejected={({ error }) => (

Error: {String(error)}

)} > {({ todos }) => (

))}

)} ); } ``` ```ts function Pending(props: IPendingProps): React.ReactNode; ``` Its props are: ```ts type IPendingProps = { value$: ObservableLike; // source to subscribe to pending?: IRenderable; // shown while PENDING (default: nothing) rejected?: IRenderable>; // shown on REJECTED children: IRenderable; // shown with the FULFILLED value getDefaultValue?: () => T; // start FULFILLED instead of PENDING }; type IRenderable = React.ReactNode | ((data: TData) => React.ReactNode); type ObservableLike = Observable | T; ``` :::warning `Pending` is powered by the lower-level [`usePending`](/react/use-pending) hook. The `source$` you pass must be referentially stable across renders, and `data$` from `useStateData` already is. :::