Use clearer names

src/grid/Grid.tsx

@@ -128,10 +128,10 @@ const LayoutContext = createContext<LayoutContext | null>(null);
  * Enables Grid to react to layout changes. You must call this in your Layout
  * component or else Grid will not be reactive.
  */
-export function useLayout(): void {
+export function useUpdateLayout(): void {
   const context = useContext(LayoutContext);
   if (context === null)
-    throw new Error("useLayout called outside of a Grid layout component");
+    throw new Error("useUpdateLayout called outside a Grid layout context");
 
   // On every render, tell Grid that the layout may have changed
   useEffect(() =>
@@ -240,7 +240,7 @@ export function Grid<
   const [gridRoot, gridRef2] = useState<HTMLElement | null>(null);
   const gridRef = useMergedRefs<HTMLElement>(gridRef1, gridRef2);
 
-  const [layoutRoot, layoutRef] = useState<HTMLElement | null>(null);
+  const [layoutRoot, setLayoutRoot] = useState<HTMLElement | null>(null);
   const [generation, setGeneration] = useState<number | null>(null);
   const tiles = useInitial(() => new Map<string, Tile<TileModel>>());
   const prefersReducedMotion = usePrefersReducedMotion();
@@ -490,7 +490,12 @@ export function Grid<
       style={style}
     >
       <LayoutContext.Provider value={context}>
-        <LayoutMemo ref={layoutRef} Layout={Layout} model={model} Slot={Slot} />
+        <LayoutMemo
+          ref={setLayoutRoot}
+          Layout={Layout}
+          model={model}
+          Slot={Slot}
+        />
       </LayoutContext.Provider>
       {tileTransitions((spring, { id, model, onDrag, width, height }) => (
         <TileWrapper

src/grid/GridLayout.tsx

@@ -27,7 +27,7 @@ import {
   TileModel,
   arrangeTiles,
 } from "./CallLayout";
-import { DragCallback, useLayout } from "./Grid";
+import { DragCallback, useUpdateLayout } from "./Grid";
 
 interface GridCSSProperties extends CSSProperties {
   "--gap": string;
@@ -48,7 +48,7 @@ export const makeGridLayout: CallLayout<GridLayoutModel> = ({
   // The "fixed" (non-scrolling) part of the layout is where the spotlight tile
   // lives
   fixed: forwardRef(function GridLayoutFixed({ model, Slot }, ref) {
-    useLayout();
+    useUpdateLayout();
     const alignment = useObservableEagerState(
       useInitial(() =>
         spotlightAlignment.pipe(
@@ -95,7 +95,7 @@ export const makeGridLayout: CallLayout<GridLayoutModel> = ({
 
   // The scrolling part of the layout is where all the grid tiles live
   scrolling: forwardRef(function GridLayout({ model, Slot }, ref) {
-    useLayout();
+    useUpdateLayout();
     const { width, height: minHeight } = useObservableEagerState(minBounds);
     const { gap, tileWidth, tileHeight } = useMemo(
       () => arrangeTiles(width, minHeight, model.grid.length),

src/grid/OneOnOneLayout.tsx

@@ -21,7 +21,7 @@ import classNames from "classnames";
 import { OneOnOneLayout as OneOnOneLayoutModel } from "../state/CallViewModel";
 import { CallLayout, GridTileModel, arrangeTiles } from "./CallLayout";
 import styles from "./OneOnOneLayout.module.css";
-import { DragCallback, useLayout } from "./Grid";
+import { DragCallback, useUpdateLayout } from "./Grid";
 
 /**
  * An implementation of the "one-on-one" layout, in which the remote participant
@@ -34,12 +34,12 @@ export const makeOneOnOneLayout: CallLayout<OneOnOneLayoutModel> = ({
   scrollingOnTop: false,
 
   fixed: forwardRef(function OneOnOneLayoutFixed(_props, ref) {
-    useLayout();
+    useUpdateLayout();
     return <div ref={ref} />;
   }),
 
   scrolling: forwardRef(function OneOnOneLayoutScrolling({ model, Slot }, ref) {
-    useLayout();
+    useUpdateLayout();
     const { width, height } = useObservableEagerState(minBounds);
     const pipAlignmentValue = useObservableEagerState(pipAlignment);
     const { tileWidth, tileHeight } = useMemo(

src/grid/SpotlightExpandedLayout.tsx

@@ -19,7 +19,7 @@ import { useObservableEagerState } from "observable-hooks";
 
 import { SpotlightExpandedLayout as SpotlightExpandedLayoutModel } from "../state/CallViewModel";
 import { CallLayout, GridTileModel, SpotlightTileModel } from "./CallLayout";
-import { DragCallback, useLayout } from "./Grid";
+import { DragCallback, useUpdateLayout } from "./Grid";
 import styles from "./SpotlightExpandedLayout.module.css";
 
 /**
@@ -35,7 +35,7 @@ export const makeSpotlightExpandedLayout: CallLayout<
     { model, Slot },
     ref,
   ) {
-    useLayout();
+    useUpdateLayout();
     const spotlightTileModel: SpotlightTileModel = useMemo(
       () => ({ type: "spotlight", vms: model.spotlight, maximised: true }),
       [model.spotlight],
@@ -56,7 +56,7 @@ export const makeSpotlightExpandedLayout: CallLayout<
     { model, Slot },
     ref,
   ) {
-    useLayout();
+    useUpdateLayout();
     const pipAlignmentValue = useObservableEagerState(pipAlignment);
 
     const pipTileModel: GridTileModel | undefined = useMemo(

src/grid/SpotlightLandscapeLayout.tsx

@@ -21,7 +21,7 @@ import classNames from "classnames";
 import { CallLayout, GridTileModel, TileModel } from "./CallLayout";
 import { SpotlightLandscapeLayout as SpotlightLandscapeLayoutModel } from "../state/CallViewModel";
 import styles from "./SpotlightLandscapeLayout.module.css";
-import { useLayout } from "./Grid";
+import { useUpdateLayout } from "./Grid";
 
 /**
  * An implementation of the "spotlight landscape" layout, in which the spotlight
@@ -37,7 +37,7 @@ export const makeSpotlightLandscapeLayout: CallLayout<
     { model, Slot },
     ref,
   ) {
-    useLayout();
+    useUpdateLayout();
     useObservableEagerState(minBounds);
     const tileModel: TileModel = useMemo(
       () => ({
@@ -62,7 +62,7 @@ export const makeSpotlightLandscapeLayout: CallLayout<
     { model, Slot },
     ref,
   ) {
-    useLayout();
+    useUpdateLayout();
     useObservableEagerState(minBounds);
     const tileModels: GridTileModel[] = useMemo(
       () => model.grid.map((vm) => ({ type: "grid", vm })),

src/grid/SpotlightPortraitLayout.tsx

@@ -26,7 +26,7 @@ import {
 } from "./CallLayout";
 import { SpotlightPortraitLayout as SpotlightPortraitLayoutModel } from "../state/CallViewModel";
 import styles from "./SpotlightPortraitLayout.module.css";
-import { useLayout } from "./Grid";
+import { useUpdateLayout } from "./Grid";
 
 interface GridCSSProperties extends CSSProperties {
   "--grid-gap": string;
@@ -48,7 +48,7 @@ export const makeSpotlightPortraitLayout: CallLayout<
     { model, Slot },
     ref,
   ) {
-    useLayout();
+    useUpdateLayout();
     const tileModel: TileModel = useMemo(
       () => ({
         type: "spotlight",
@@ -71,7 +71,7 @@ export const makeSpotlightPortraitLayout: CallLayout<
     { model, Slot },
     ref,
   ) {
-    useLayout();
+    useUpdateLayout();
     const { width } = useObservableEagerState(minBounds);
     const { gap, tileWidth, tileHeight } = arrangeTiles(
       width,