From d4b38563e755003c6d725317bc4e42809338a39d Mon Sep 17 00:00:00 2001
From: Robin <robin@robin.town>
Date: Mon, 23 Jun 2025 22:57:39 -0400
Subject: [PATCH] Replace useContext with use

The docs recommend the use hook because it is simpler and allows itself to be called conditionally.
---
 src/ClientContext.tsx                 | 5 ++---
 src/MediaDevicesContext.ts            | 4 ++--
 src/grid/Grid.tsx                     | 4 ++--
 src/livekit/TrackProcessorContext.tsx | 4 ++--
 src/reactions/useReactionsSender.tsx  | 4 ++--
 5 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/src/ClientContext.tsx b/src/ClientContext.tsx
index bde20dc8..c7402b7a 100644
--- a/src/ClientContext.tsx
+++ b/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;
diff --git a/src/MediaDevicesContext.ts b/src/MediaDevicesContext.ts
index 404815ba..cc3af742 100644
--- a/src/MediaDevicesContext.ts
+++ b/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",
diff --git a/src/grid/Grid.tsx b/src/grid/Grid.tsx
index 65525446..35373061 100644
--- a/src/grid/Grid.tsx
+++ b/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;
diff --git a/src/livekit/TrackProcessorContext.tsx b/src/livekit/TrackProcessorContext.tsx
index 7c61901d..8793381c 100644
--- a/src/livekit/TrackProcessorContext.tsx
+++ b/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",
diff --git a/src/reactions/useReactionsSender.tsx b/src/reactions/useReactionsSender.tsx
index 85f1505c..728781af 100644
--- a/src/reactions/useReactionsSender.tsx
+++ b/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");
   }