Reactjs – Next server-side components and context

Next.js (v15) clearly states that Context/Providers aren’t supported, and instead you can simply put an await function inside a page, and they’ll manage caching.

What is the supported way to not have to pass that state around deeply in nested components?

And how would one higher level component be notified (i.e. reactive) if a child component gets updated value?

For example:

// app/settings/page.tsx

export default async function SettingsPage(){
   const user = await getUser();
   return (
      <div>
          <widget1 user={user} /> // I really don't want to have to keep passing data
          <widget2 />
      </div>
   );
}


async function widget2(){
   const user = await getUser();
   // what happens if this user data gets out of sync with parent data?

   return <div>{user}</div>
}