Sharing Data with Children

A common pattern: fetch data in a parent and share it across child components or routes.

Because stores are lazy and caching, this just works. Pass the same store to multiple children: the request fires once, and every <Await> that renders it gets the same cached result.

import {
    RefreshStrategy,
    RemoteDataStore,
    useRemoteData,
    Await,
} from 'use-remote-data';

let i = 0;
const freshData = (): Promise<number> =>
    new Promise((resolve) => {
        i += 1;
        setTimeout(() => resolve(i), 1000);
    });

export function Component() {
    const store = useRemoteData(freshData, {
        refresh: RefreshStrategy.afterMillis(2000),
    });

    return (
        <div>
            <Child store={store} />
            <Child store={store} />
        </div>
    );
}

export function Child({ store }: { store: RemoteDataStore<number> }) {
    return (
        <Await store={store}>
            {(num, isStale) => (
                <p>
                    <span style={{ color: isStale ? 'darkgray' : 'black' }}>
                        {num}
                    </span>
                </p>
            )}
        </Await>
    );
}

Run snippet

Multiple keyed resources

When a parent needs to fetch many related resources (order items, user list, paginated data), use useRemoteDataMap in the parent and pass individual stores to children:

function OrderList({ orderIds }: { orderIds: number[] }) {
    const orders = useRemoteDataMap<number, Order>((id, signal) => fetchOrder(id, signal));

    return (
        <div>
            {orderIds.map((id) => (
                <Await key={id} store={orders.get(id)}>
                    {(order) => <OrderRow order={order} />}
                </Await>
            ))}
        </div>
    );
}

If multiple children call orders.get(5), they all receive the same cached store: one fetch, shared state. This is automatic deduplication without a global cache, query keys, or providers. Just React's normal data flow.

See the Performance page for benchmarks showing this pattern is faster than react-query at every sharing level.

Should I pass RemoteDataStore<T> or just T?

Ask yourself: does the child need to show its own loading state?

• Yes: pass RemoteDataStore<T>. The child renders <Await> and handles loading/error itself.
• No: the parent already handles loading via <Await>, so just pass the unwrapped T value.