Plan how to evolve code component overrides

balintbrews → credited aaronmchale → .

balintbrews → credited gábor hojtsy → .

balintbrews → credited lauriii → .

balintbrews → credited longwave → .

balintbrews → credited wim leers → .

Crediting people who were part of the discussion that led to the ADR at Drupal Dev Days in Leuven.

I really like the option 2 proposal that's in the ADR. My one nit though is I don't think we should do it as a custom hook, but instead as a plain async function that's passed to React 19's use() API. In other words, instead of:

import { useMenuData } from '@/lib/menu';

const NavigationMenu = ({ menuId, level }) => {
  const menuData = useMenuData(menuId, { level });
  // ...
}

to do:

import { use } from 'react';
import { fetchMenuData } from '@/lib/menu';

const NavigationMenu = ({ menuId, level }) => {
  const menuData = use(fetchMenuData(menuId, { level }));
  // ...
}

This would then also work for other UI frameworks when we add support for them in the future, which we might do soon as part of the CLI work. For example, in Svelte:

{#await fetchMenuData(menuId, { level }) then menuData}
...
{/await}

One hiccup with this approach though is that preact/compat doesn't implement the use() function. I opened https://github.com/preactjs/preact/issues/4756, but we can't count on that getting done in time. However, I think we can work around that by implementing our own use() function until such time as Preact implements the proper one, and ours can sidestep the need to work with Suspense, because we can rely on either server-side prefetching or async Astro island hydration to make sure we don't hydrate the component until we've already fetched the data and can return it synchronously by the time use() is called.