CORE-2604 Fix scroll loop (#133)

* Prevent scroll loop by using useLayoutEffect

* Prevent useMatchMediaQuery from removing and re-attaching its change listeners on every render

* Actually handle changing matchMedia.matches

* Version bump

Author: Dantemss

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@openstax/ui-components",
-  "version": "1.23.4",
+  "version": "1.23.5",
   "license": "MIT",
   "repository": "https://github.com/openstax/ui-components.git",
   "publishConfig": {

package.json

@@ -116,8 +116,10 @@ export const useScrollRestoration = (
 ) => {
   const [scrollPosition, setScrollPosition] = React.useState(0);
 
-  // Restore scroll position after render
-  requestAnimationFrame(() => {
+  // useLayoutEffect without deps runs after every render, before paint,
+  // preventing the re-render loop that a bare requestAnimationFrame in the
+  // render body causes (each RAF fires a scroll event → state update → loop).
+  React.useLayoutEffect(() => {
     if (ref.current) {
       ref.current.scrollTop = scrollPosition;
     }

src/components/SidebarNav/hooks.ts

@@ -98,6 +98,14 @@ describe("useMatchMediaQuery", () => {
     expect(screen.getByTestId("result").textContent).toBe("Matches");
   });
 
+  test("it syncs matches when the query prop changes", () => {
+    const component = render(<MediaComponent query="(min-width: 600px)" />);
+    expect(screen.getByTestId("result").textContent).toBe("Matches");
+
+    component.rerender(<MediaComponent query="(min-width: 800px)" />);
+    expect(screen.getByTestId("result").textContent).toBe("Does not match");
+  });
+
   test("it attaches and detaches event listeners", () => {
     const mock = {
       addEventListener: jest.fn(),

src/hooks.spec.tsx

@@ -21,7 +21,7 @@ export const useSetAppError = () => {
 }
 
 export const useMatchMediaQuery = (query: string) => {
-  const matchMedia = window.matchMedia(query);
+  const matchMedia = React.useMemo(() => window.matchMedia(query), [query]);
   const [matches, setMatches] = React.useState(matchMedia.matches);
 
   const listener = React.useCallback((e: MediaQueryListEvent) => {
@@ -33,6 +33,7 @@ export const useMatchMediaQuery = (query: string) => {
   }, []);
 
   React.useEffect(() => {
+    setMatches(matchMedia.matches);
     if (typeof matchMedia.addEventListener === "function") {
       matchMedia.addEventListener("change", listener);
     } else {