Modernize how we use React contexts (#3359)

* Replace useContext with use

The docs recommend the use hook because it is simpler and allows itself to be called conditionally.

* Simplify our context providers

React 19 lets you omit the '.Provider' bit.

src/App.tsx

@@ -77,7 +77,7 @@ export const App: FC<Props> = ({ vm }) => {
             {loaded ? (
               <Suspense fallback={null}>
                 <ClientProvider>
-                  <MediaDevicesContext.Provider value={vm.mediaDevices}>
+                  <MediaDevicesContext value={vm.mediaDevices}>
                     <ProcessorProvider>
                       <Sentry.ErrorBoundary
                         fallback={(error) => (
@@ -96,7 +96,7 @@ export const App: FC<Props> = ({ vm }) => {
                         </Routes>
                       </Sentry.ErrorBoundary>
                     </ProcessorProvider>
-                  </MediaDevicesContext.Provider>
+                  </MediaDevicesContext>
                 </ClientProvider>
               </Suspense>
             ) : (

src/ClientContext.tsx

@@ -11,7 +11,7 @@ import {
   useEffect,
   useState,
   createContext,
-  useContext,
+  use,
   useRef,
   useMemo,
   type JSX,
@@ -69,8 +69,7 @@ const ClientContext = createContext<ClientState | undefined>(undefined);
 
 export const ClientContextProvider = ClientContext.Provider;
 
-export const useClientState = (): ClientState | undefined =>
-  useContext(ClientContext);
+export const useClientState = (): ClientState | undefined => use(ClientContext);
 
 export function useClient(): {
   client?: MatrixClient;
@@ -350,9 +349,7 @@ export const ClientProvider: FC<Props> = ({ children }) => {
     return <ErrorPage widget={widget} error={alreadyOpenedErr} />;
   }
 
-  return (
-    <ClientContext.Provider value={state}>{children}</ClientContext.Provider>
-  );
+  return <ClientContext value={state}>{children}</ClientContext>;
 };
 
 export type InitResult = {

src/MediaDevicesContext.ts

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { createContext, useContext, useMemo } from "react";
+import { createContext, use, useMemo } from "react";
 import { useObservableEagerState } from "observable-hooks";
 
 import { type MediaDevices } from "./state/MediaDevices";
@@ -15,7 +15,7 @@ export const MediaDevicesContext = createContext<MediaDevices | undefined>(
 );
 
 export function useMediaDevices(): MediaDevices {
-  const mediaDevices = useContext(MediaDevicesContext);
+  const mediaDevices = use(MediaDevicesContext);
   if (mediaDevices === undefined)
     throw new Error(
       "useMediaDevices must be used within a MediaDevices context provider",

src/grid/Grid.tsx

@@ -24,7 +24,7 @@ import {
   createContext,
   forwardRef,
   memo,
-  useContext,
+  use,
   useEffect,
   useMemo,
   useRef,
@@ -124,7 +124,7 @@ interface LayoutContext {
 const LayoutContext = createContext<LayoutContext | null>(null);
 
 function useLayoutContext(): LayoutContext {
-  const context = useContext(LayoutContext);
+  const context = use(LayoutContext);
   if (context === null)
     throw new Error("useUpdateLayout called outside a Grid layout context");
   return context;
@@ -532,14 +532,14 @@ export function Grid<
       className={classNames(className, styles.grid)}
       style={style}
     >
-      <LayoutContext.Provider value={context}>
+      <LayoutContext value={context}>
         <LayoutMemo
           ref={setLayoutRoot}
           Layout={Layout}
           model={model}
           Slot={Slot}
         />
-      </LayoutContext.Provider>
+      </LayoutContext>
       {tileTransitions((spring, { id, model, onDrag, width, height }) => (
         <TileWrapper
           key={id}

src/livekit/TrackProcessorContext.tsx

@@ -14,7 +14,7 @@ import {
   createContext,
   type FC,
   type JSX,
-  useContext,
+  use,
   useEffect,
   useMemo,
 } from "react";
@@ -34,7 +34,7 @@ type ProcessorState = {
 const ProcessorContext = createContext<ProcessorState | undefined>(undefined);
 
 export function useTrackProcessor(): ProcessorState {
-  const state = useContext(ProcessorContext);
+  const state = use(ProcessorContext);
   if (state === undefined)
     throw new Error(
       "useTrackProcessor must be used within a ProcessorProvider",
@@ -83,9 +83,5 @@ export const ProcessorProvider: FC<Props> = ({ children }) => {
     [supported, blurActivated, blur],
   );
 
-  return (
-    <ProcessorContext.Provider value={processorState}>
-      {children}
-    </ProcessorContext.Provider>
-  );
+  return <ProcessorContext value={processorState}>{children}</ProcessorContext>;
 };

src/reactions/useReactionsSender.tsx

@@ -8,7 +8,7 @@ Please see LICENSE in the repository root for full details.
 import { EventType, RelationType } from "matrix-js-sdk";
 import {
   createContext,
-  useContext,
+  use,
   type ReactNode,
   useCallback,
   useMemo,
@@ -34,7 +34,7 @@ const ReactionsSenderContext = createContext<
 >(undefined);
 
 export const useReactionsSender = (): ReactionsSenderContextType => {
-  const context = useContext(ReactionsSenderContext);
+  const context = use(ReactionsSenderContext);
   if (!context) {
     throw new Error("useReactions must be used within a ReactionsProvider");
   }
@@ -157,7 +157,7 @@ export const ReactionsSenderProvider = ({
   );
 
   return (
-    <ReactionsSenderContext.Provider
+    <ReactionsSenderContext
       value={{
         supportsReactions,
         toggleRaisedHand,
@@ -165,6 +165,6 @@ export const ReactionsSenderProvider = ({
       }}
     >
       {children}
-    </ReactionsSenderContext.Provider>
+    </ReactionsSenderContext>
   );
 };

src/room/GroupCallView.test.tsx

@@ -149,7 +149,7 @@ function createGroupCallView(
   const { getByText } = render(
     <BrowserRouter>
       <TooltipProvider>
-        <MediaDevicesContext.Provider value={mockMediaDevices({})}>
+        <MediaDevicesContext value={mockMediaDevices({})}>
           <ProcessorProvider>
             <GroupCallView
               client={client}
@@ -164,7 +164,7 @@ function createGroupCallView(
               widget={widget}
             />
           </ProcessorProvider>
-        </MediaDevicesContext.Provider>
+        </MediaDevicesContext>
       </TooltipProvider>
     </BrowserRouter>,
   );

src/room/InCallView.test.tsx

@@ -149,13 +149,13 @@ function createInCallView(): RenderResult & {
   rtcSession.joined = true;
   const renderResult = render(
     <BrowserRouter>
-      <MediaDevicesContext.Provider value={mockMediaDevices({})}>
+      <MediaDevicesContext value={mockMediaDevices({})}>
         <ReactionsSenderProvider
           vm={vm}
           rtcSession={rtcSession as unknown as MatrixRTCSession}
         >
           <TooltipProvider>
-            <RoomContext.Provider value={livekitRoom}>
+            <RoomContext value={livekitRoom}>
               <InCallView
                 client={client}
                 hideHeader={true}
@@ -182,10 +182,10 @@ function createInCallView(): RenderResult & {
                 connState={ConnectionState.Connected}
                 onShareClick={null}
               />
-            </RoomContext.Provider>
+            </RoomContext>
           </TooltipProvider>
         </ReactionsSenderProvider>
-      </MediaDevicesContext.Provider>
+      </MediaDevicesContext>
     </BrowserRouter>,
   );
   return {

src/room/InCallView.tsx

@@ -172,7 +172,7 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
   if (livekitRoom === undefined || vm === null) return null;
 
   return (
-    <RoomContext.Provider value={livekitRoom}>
+    <RoomContext value={livekitRoom}>
       <ReactionsSenderProvider vm={vm} rtcSession={props.rtcSession}>
         <InCallView
           {...props}
@@ -181,7 +181,7 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
           connState={connState}
         />
       </ReactionsSenderProvider>
-    </RoomContext.Provider>
+    </RoomContext>
   );
 };
 

src/room/MuteStates.test.tsx

@@ -124,14 +124,14 @@ describe("useMuteStates", () => {
 
     render(
       <MemoryRouter>
-        <MediaDevicesContext.Provider
+        <MediaDevicesContext
           value={mockMediaDevices({
             microphone: false,
             camera: false,
           })}
         >
           <TestComponent />
-        </MediaDevicesContext.Provider>
+        </MediaDevicesContext>
       </MemoryRouter>,
     );
     expect(screen.getByTestId("audio-enabled").textContent).toBe("false");
@@ -143,9 +143,9 @@ describe("useMuteStates", () => {
 
     render(
       <MemoryRouter>
-        <MediaDevicesContext.Provider value={mockMediaDevices()}>
+        <MediaDevicesContext value={mockMediaDevices()}>
           <TestComponent />
-        </MediaDevicesContext.Provider>
+        </MediaDevicesContext>
       </MemoryRouter>,
     );
     expect(screen.getByTestId("audio-enabled").textContent).toBe("true");
@@ -159,9 +159,9 @@ describe("useMuteStates", () => {
 
     render(
       <MemoryRouter>
-        <MediaDevicesContext.Provider value={mockMediaDevices()}>
+        <MediaDevicesContext value={mockMediaDevices()}>
           <TestComponent isJoined />
-        </MediaDevicesContext.Provider>
+        </MediaDevicesContext>
       </MemoryRouter>,
     );
     expect(screen.getByTestId("audio-enabled").textContent).toBe("false");
@@ -178,9 +178,9 @@ describe("useMuteStates", () => {
 
     render(
       <MemoryRouter>
-        <MediaDevicesContext.Provider value={mockMediaDevices()}>
+        <MediaDevicesContext value={mockMediaDevices()}>
           <TestComponent />
-        </MediaDevicesContext.Provider>
+        </MediaDevicesContext>
       </MemoryRouter>,
     );
     expect(screen.getByTestId("audio-enabled").textContent).toBe("false");
@@ -192,9 +192,9 @@ describe("useMuteStates", () => {
 
     render(
       <MemoryRouter initialEntries={["/room/?skipLobby=true"]}>
-        <MediaDevicesContext.Provider value={mockMediaDevices()}>
+        <MediaDevicesContext value={mockMediaDevices()}>
           <TestComponent />
-        </MediaDevicesContext.Provider>
+        </MediaDevicesContext>
       </MemoryRouter>,
     );
     expect(screen.getByTestId("audio-enabled").textContent).toBe("false");
@@ -224,13 +224,13 @@ describe("useMuteStates", () => {
 
       return (
         <MemoryRouter>
-          <MediaDevicesContext.Provider value={devices}>
+          <MediaDevicesContext value={devices}>
             <TestComponent />
             <button onClick={onConnectDevicesClick}>Connect devices</button>
             <button onClick={onDisconnectDevicesClick}>
               Disconnect devices
             </button>
-          </MediaDevicesContext.Provider>
+          </MediaDevicesContext>
         </MemoryRouter>
       );
     };

src/useAudioContext.test.tsx

@@ -105,9 +105,9 @@ afterEach(() => {
 
 test("can play a single sound", async () => {
   const { findByText } = render(
-    <MediaDevicesContext.Provider value={mockMediaDevices({})}>
+    <MediaDevicesContext value={mockMediaDevices({})}>
       <TestComponentWrapper />
-    </MediaDevicesContext.Provider>,
+    </MediaDevicesContext>,
   );
   await user.click(await findByText("Valid sound"));
   expect(testAudioContext.createBufferSource).toHaveBeenCalledOnce();
@@ -115,9 +115,9 @@ test("can play a single sound", async () => {
 
 test("will ignore sounds that are not registered", async () => {
   const { findByText } = render(
-    <MediaDevicesContext.Provider value={mockMediaDevices({})}>
+    <MediaDevicesContext value={mockMediaDevices({})}>
       <TestComponentWrapper />
-    </MediaDevicesContext.Provider>,
+    </MediaDevicesContext>,
   );
   await user.click(await findByText("Invalid sound"));
   expect(testAudioContext.createBufferSource).not.toHaveBeenCalled();
@@ -125,7 +125,7 @@ test("will ignore sounds that are not registered", async () => {
 
 test("will use the correct device", () => {
   render(
-    <MediaDevicesContext.Provider
+    <MediaDevicesContext
       value={mockMediaDevices({
         audioOutput: {
           available$: of(new Map<never, never>()),
@@ -135,7 +135,7 @@ test("will use the correct device", () => {
       })}
     >
       <TestComponentWrapper />
-    </MediaDevicesContext.Provider>,
+    </MediaDevicesContext>,
   );
   expect(testAudioContext.createBufferSource).not.toHaveBeenCalled();
   expect(testAudioContext.setSinkId).toHaveBeenCalledWith("chosen-device");
@@ -144,9 +144,9 @@ test("will use the correct device", () => {
 test("will use the correct volume level", async () => {
   soundEffectVolumeSetting.setValue(0.33);
   const { findByText } = render(
-    <MediaDevicesContext.Provider value={mockMediaDevices({})}>
+    <MediaDevicesContext value={mockMediaDevices({})}>
       <TestComponentWrapper />
-    </MediaDevicesContext.Provider>,
+    </MediaDevicesContext>,
   );
   await user.click(await findByText("Valid sound"));
   expect(testAudioContext.gain.gain.setValueAtTime).toHaveBeenCalledWith(
@@ -158,7 +158,7 @@ test("will use the correct volume level", async () => {
 
 test("will use the pan if earpiece is selected", async () => {
   const { findByText } = render(
-    <MediaDevicesContext.Provider
+    <MediaDevicesContext
       value={mockMediaDevices({
         audioOutput: {
           available$: of(new Map<never, never>()),
@@ -168,7 +168,7 @@ test("will use the pan if earpiece is selected", async () => {
       })}
     >
       <TestComponentWrapper />
-    </MediaDevicesContext.Provider>,
+    </MediaDevicesContext>,
   );
   await user.click(await findByText("Valid sound"));
   expect(testAudioContext.pan.pan.setValueAtTime).toHaveBeenCalledWith(1, 0);