perf(webapp): memoize shared context values

Author: carderne

.oxlintrc.json

@@ -57,6 +57,7 @@
     "react/jsx-no-target-blank": "error",
     "react/jsx-fragments": "error",
     "react/self-closing-comp": "error",
+    "react/jsx-no-constructed-context-values": "error",
     "no-lone-blocks": "error",
     "typescript/prefer-function-type": "error",
     "typescript/prefer-for-of": "error",
@@ -91,6 +92,15 @@
       "rules": {
         "prefer-object-has-own": "off"
       }
+    },
+    {
+      "files": [
+        "apps/webapp/app/components/primitives/charts/Chart.tsx",
+        "apps/webapp/app/components/primitives/Timeline.tsx"
+      ],
+      "rules": {
+        "react/jsx-no-constructed-context-values": "off"
+      }
     }
   ]
 }

apps/webapp/app/components/SetupCommands.tsx

@@ -1,5 +1,5 @@
 import { CheckIcon, SparklesIcon } from "@heroicons/react/20/solid";
-import { createContext, useContext, useRef, useState } from "react";
+import { createContext, useContext, useMemo, useRef, useState } from "react";
 import { useAppOrigin } from "~/hooks/useAppOrigin";
 import { useProject } from "~/hooks/useProject";
 import { useTriggerCliTag } from "~/hooks/useTriggerCliTag";
@@ -24,10 +24,13 @@ const PackageManagerContext = createContext<PackageManagerContextType | undefine
 export function PackageManagerProvider({ children }: { children: React.ReactNode }) {
   const [activePackageManager, setActivePackageManager] = useState("npm");
 
+  const contextValue = useMemo(
+    () => ({ activePackageManager, setActivePackageManager }),
+    [activePackageManager]
+  );
+
   return (
-    <PackageManagerContext.Provider value={{ activePackageManager, setActivePackageManager }}>
-      {children}
-    </PackageManagerContext.Provider>
+    <PackageManagerContext.Provider value={contextValue}>{children}</PackageManagerContext.Provider>
   );
 }
 

apps/webapp/app/components/primitives/LocaleProvider.tsx

@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-import { createContext, useContext } from "react";
+import { createContext, useContext, useMemo } from "react";
 
 type LocaleContext = {
   locales: string[];
@@ -13,7 +13,7 @@ type LocaleContextProviderProps = {
 const Context = createContext<LocaleContext | null>(null);
 
 export const LocaleContextProvider = ({ locales, children }: LocaleContextProviderProps) => {
-  const value = { locales };
+  const value = useMemo(() => ({ locales }), [locales]);
 
   return <Context.Provider value={value}>{children}</Context.Provider>;
 };

apps/webapp/app/components/primitives/OperatingSystemProvider.tsx

@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-import { createContext, useContext } from "react";
+import { createContext, useContext, useMemo } from "react";
 
 export type OperatingSystemPlatform = "mac" | "windows";
 
@@ -18,7 +18,9 @@ export const OperatingSystemContextProvider = ({
   platform,
   children,
 }: OperatingSystemContextProviderProps) => {
-  return <Context.Provider value={{ platform }}>{children}</Context.Provider>;
+  const value = useMemo(() => ({ platform }), [platform]);
+
+  return <Context.Provider value={value}>{children}</Context.Provider>;
 };
 
 const throwIfNoProvider = () => {

apps/webapp/app/components/primitives/SelectedItemsProvider.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { createContext, useCallback, useContext, useReducer } from "react";
+import { createContext, useCallback, useContext, useMemo, useReducer } from "react";
 
 type SelectedItemsContext = {
   selectedItems: Set<string>;
@@ -60,21 +60,14 @@ export function SelectedItemsProvider({
     [state]
   );
 
+  const contextValue = useMemo(
+    () => ({ selectedItems: state.items, select, deselect, toggle, deselectAll, has, hasAll }),
+    [state.items, select, deselect, toggle, deselectAll, has, hasAll]
+  );
+
   return (
-    <SelectedItemsContext.Provider
-      value={{ selectedItems: state.items, select, deselect, toggle, deselectAll, has, hasAll }}
-    >
-      {typeof children === "function"
-        ? children({
-            selectedItems: state.items,
-            select,
-            deselect,
-            toggle,
-            deselectAll,
-            has,
-            hasAll,
-          })
-        : children}
+    <SelectedItemsContext.Provider value={contextValue}>
+      {typeof children === "function" ? children(contextValue) : children}
     </SelectedItemsContext.Provider>
   );
 }

apps/webapp/app/components/primitives/Table.tsx

@@ -1,7 +1,14 @@
 import { ChevronDownIcon, ChevronUpDownIcon, ChevronUpIcon } from "@heroicons/react/20/solid";
 import { Link } from "@remix-run/react";
 import { ClipboardCheckIcon, ClipboardIcon } from "lucide-react";
-import React, { type ReactNode, createContext, forwardRef, useContext, useState } from "react";
+import React, {
+  type ReactNode,
+  createContext,
+  forwardRef,
+  useContext,
+  useMemo,
+  useState,
+} from "react";
 import { useCopy } from "~/hooks/useCopy";
 import { cn } from "~/utils/cn";
 import { Popover, PopoverContent, PopoverVerticalEllipseTrigger } from "./Popover";
@@ -84,8 +91,10 @@ export const Table = forwardRef<HTMLTableElement, TableProps & { variant?: Table
     },
     ref
   ) => {
+    const contextValue = useMemo(() => ({ variant }), [variant]);
+
     return (
-      <TableContext.Provider value={{ variant }}>
+      <TableContext.Provider value={contextValue}>
         <div
           className={cn(
             "whitespace-nowrap scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control",

apps/webapp/app/components/primitives/charts/DateRangeContext.tsx

@@ -1,4 +1,11 @@
-import React, { createContext, useState, useContext, type ReactNode } from "react";
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+  type ReactNode,
+} from "react";
 
 type DateRangeContextType = {
   /** Start date as ISO string (YYYY-MM-DD) or custom format */
@@ -87,28 +94,22 @@ export function DateRangeProvider({
   const [startDate, setStartDate] = useState<string>(defaultStartISO);
   const [endDate, setEndDate] = useState<string>(defaultEndISO);
 
-  const setDateRange = (start: string, end: string) => {
+  const setDateRange = useCallback((start: string, end: string) => {
     setStartDate(start);
     setEndDate(end);
-  };
+  }, []);
 
-  const resetDateRange = () => {
+  const resetDateRange = useCallback(() => {
     setStartDate(defaultStartISO);
     setEndDate(defaultEndISO);
-  };
-
-  return (
-    <DateRangeContext.Provider
-      value={{
-        startDate,
-        endDate,
-        setDateRange,
-        resetDateRange,
-      }}
-    >
-      {children}
-    </DateRangeContext.Provider>
+  }, [defaultEndISO, defaultStartISO]);
+
+  const contextValue = useMemo(
+    () => ({ startDate, endDate, setDateRange, resetDateRange }),
+    [startDate, endDate, setDateRange, resetDateRange]
   );
+
+  return <DateRangeContext.Provider value={contextValue}>{children}</DateRangeContext.Provider>;
 }
 
 export function useDateRange(): DateRangeContextType | null {