Add <AwaitAll> component

[layerok]

When I have a component that depends on multiple deferred values, then my code starts to have many levels of nesting that I don't really like. For example, see code snippet below

<Await resolve={cities}>
  {(cities) => (
    <Await resolve={cart}>
      {(cart) => (
        <Await resolve={categories}>
          {(categories) => (
            <Await resolve={products}>
              {(products) => (
                <Products
                  cart={cart}
                  categories={categories.data}
                  products={products}
                  cities={cities}
                />
              )}
            </Await>
          )}
        </Await>
      )}
    </Await>
  )}
</Await>

And I really prefer to have code that looks like this

<AwaitAll 
  cities={cities}
  cart={cart}
  categories={categories}
  products={products}
>
  {({ categories, cart, products, cities }) => (
    <Products
      products={products}
      cart={cart}
      categories={categories.data}
      cities={cities}
    />
  )}
</AwaitAll>

Even though It is possible to create<AwaitAll> component based on existent API. It wasn't obvious to me in the beginning. I suspect I'am not the only one.

export function AwaitAll({children, ...rest}) {
  const initialValue = (higherValues) =>
    typeof children === "function" ? children(higherValues) : children;

  const reducer = (acc, key) => {
    return (higherValues) => {
      return (
        <Await resolve={rest[key]}>
          {(value) => {
            return acc({
              ...higherValues,
              [key]: value,
            });
          }
          }
        </Await>
      );
    };
  };

  return Object.keys(rest).reduce(reducer, initialValue)({});
};

If there is a simpler solution, then I will be grateful for the help

[brophdawg11]

Await is just a "promise renderer" really, so I would just compose your promises in the loader:

function loader() {
  return defer({
    values: Promise.all([getCategories(), getCart(), getProducts(), getCities()],
  });
}

function Component() {
  let { values } = useLoaderData(); 
  return (
    <Suspense>
      <Await resolve={values}>
        {([categories, cart, products, cities]) => 
          <Products
            products={products}
            cart={cart}
            categories={categories.data}
            cities={cities}
          />}
      </Await>
    </Suspense>
  );
}

[layerok]

Composing promises in a loader does not always work for me. Because promises come from different loaders.
And I need very fine-grained control over promises in order to display the skeletons to the user as early as possible.

// layout.tsx
function loader() {
  return defer({
    cart: getCart(),
    cities: getCities()
  });
}

function Component() {
  const {cart, cities} = useLoaderData();
  
  return (<div>
    <Suspense fallback={<Header loading/>}>
      <AwaitAll cart={cart} cities={cities}>
        {({cart, cities}) => (
          <Header cart={cart} cities={cities}/>
        )}
      </AwaitAll>
    </Suspense>
    <Outlet/>
  </div>)
}


// products.tsx
function loader() {
  return defer({
    products: getCategories(),
    categories: getProducts()
  });
}

function Component() {
  const { categories, products } = useLoaderData();
  const { cart, cities } = useRouteLoaderData("layout")
  
  return (
    <div>
      <Suspense fallback={<Sidebar loading/>}>
        <AwaitAll categories={categories} cities={cities}>
          {({categories, cities}) => (
            <Sidebar categories={categories} cities={cities}/>
          )}
        </AwaitAll>
      </Suspense>
      
      <Suspense fallback={<Products loading/>}>
        <AwaitAll 
          cities={cities}
          cart={cart}
          categories={categories}
          products={products}
        >
          {({ categories, cart, products, cities }) => (
            <Products
              products={products}
              cart={cart}
              categories={categories.data}
              cities={cities}
            />
          )}
         </AwaitAll>
       <Suspense/>
    </div>
  )
}

What do you think about the design of my app?

[brophdawg11]

You could instead compose them into a memoized Promise.all in the component:

const { categories, products } = useLoaderData();
const { cart, cities } = useRouteLoaderData("layout")
const allPromise = useMemo(
  () => Promise.all([categories, products, cart, cities]),
  [categories, products, cart, cities]
);

return (
  <Suspense>
    <Await resolve={allPromise}>
      ([categories, product, cart, cities]) => ...
    </Await>
  </Suspense>
);

[layerok]

useMemo approach will work and I think it is good because I don't need to create unnecessary abstraction.
But one downside is that I need to think about naming for all compositions of promises that I have.
And second downside is that it isn't clear right away what we are resolving by just looking at Await component.

{/* isn't clear right away */}
<Await resolve={promisesForProducts}>...
{/* clear right away */}
<AwaitAll cart={cart} categories={categories} ...> ...

So I will probably continue to use AwaitAll component. The only thing is that I will change how I compose promises in my AwaitAll component to useMemo approach you suggested.

Probably AwaitAll shouldn't be part of the API because combination of Await + Promise.all +/- useMemo can be alternative to nested Await's.
But all this wasn't obvious to me in the beggining and documentation didn't help much.

But anyway react-router is amazing library, thanks for the effort

[layerok]

Earlier in this thread I wrote

But one downside is that I need to think about naming for all compositions of promises that I have.
And second downside is that it isn't clear right away what we are resolving by just looking at Await component.

Having learnt about React a little bit more I disagree with my previous arguments. Now I know that you can actually call hooks directly in the component props.

<Comp
  prop={useCallback(() => {...}, [])}
  prop2={useMemo(() => {...}, [])}
/>

Having said that here is the updated solution.

const { categories, products } = useLoaderData();
const { cart, cities } = useRouteLoaderData("layout")

return (
  <Suspense>
    <Await resolve={useMemo(() => Promise.all([categories, products, cart, cities]), [])}>
      ([categories, product, cart, cities]) => ...
    </Await>
  </Suspense>
);

Of course this solution is not suitable in cases when the Await component has to be rendered conditionally.