Merge pull request #1121 from sukarxn/feature/memoize-context-provider-values

perf: optimize ui components with react hooks memoization

surfsense_web/components/editor/plate-editor.tsx

@@ -158,14 +158,16 @@ export function PlateEditor({
 	// When not forced read-only, the user can toggle between editing/viewing.
 	const canToggleMode = !readOnly;
 
+	const contextProviderValue = useMemo(()=> ({
+		onSave,
+		hasUnsavedChanges,
+		isSaving,
+		canToggleMode,
+	}), [onSave, hasUnsavedChanges, isSaving, canToggleMode]);
+
 	return (
 		<EditorSaveContext.Provider
-			value={{
+			value={contextProviderValue}
-				onSave,
-				hasUnsavedChanges,
-				isSaving,
-				canToggleMode,
-			}}
 		>
 			<Plate
 				editor={editor}

surfsense_web/components/ui/animated-tabs.tsx

@@ -7,6 +7,7 @@ import React, {
 	useCallback,
 	useContext,
 	useEffect,
+	useMemo,
 	useRef,
 	useState,
 } from "react";
@@ -201,9 +202,9 @@ const Tabs = forwardRef<
 		},
 		[onValueChange, value]
 	);
-
+	const contextValue = useMemo(() => ({ activeValue, onValueChange: handleValueChange }), [activeValue, handleValueChange]);
 	return (
-		<TabsContext.Provider value={{ activeValue, onValueChange: handleValueChange }}>
+		<TabsContext.Provider value={contextValue}>
 			<div ref={ref} className={cn("tabs-container", className)} {...props}>
 				{children}
 			</div>

surfsense_web/components/ui/toggle-group.tsx

@@ -5,6 +5,7 @@ import type { VariantProps } from "class-variance-authority";
 import * as React from "react";
 import { toggleVariants } from "@/components/ui/toggle";
 import { cn } from "@/lib/utils";
+import { useMemo } from "react";
 
 const ToggleGroupContext = React.createContext<
 	VariantProps<typeof toggleVariants> & {
@@ -27,6 +28,8 @@ function ToggleGroup({
 	VariantProps<typeof toggleVariants> & {
 		spacing?: number;
 	}) {
+	const contextValue = useMemo(() => ({variant, size, spacing }), [variant, size, spacing]);
+	
 	return (
 		<ToggleGroupPrimitive.Root
 			data-slot="toggle-group"
@@ -40,7 +43,7 @@ function ToggleGroup({
 			)}
 			{...props}
 		>
-			<ToggleGroupContext.Provider value={{ variant, size, spacing }}>
+			<ToggleGroupContext.Provider value={contextValue}>
 				{children}
 			</ToggleGroupContext.Provider>
 		</ToggleGroupPrimitive.Root>

surfsense_web/contexts/LocaleContext.tsx

@@ -1,12 +1,13 @@
 "use client";
 
 import type React from "react";
-import { createContext, useContext, useEffect, useState } from "react";
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
 import enMessages from "../messages/en.json";
 import esMessages from "../messages/es.json";
 import hiMessages from "../messages/hi.json";
 import ptMessages from "../messages/pt.json";
 import zhMessages from "../messages/zh.json";
+import { set } from "zod";
 
 type Locale = "en" | "es" | "pt" | "hi" | "zh";
 
@@ -49,14 +50,14 @@ export function LocaleProvider({ children }: { children: React.ReactNode }) {
 	}, []);
 
 	// Update locale and persist to localStorage
-	const setLocale = (newLocale: Locale) => {
+	const setLocale = useCallback((newLocale: Locale) => {
 		setLocaleState(newLocale);
 		if (typeof window !== "undefined") {
 			localStorage.setItem(LOCALE_STORAGE_KEY, newLocale);
 			// Update HTML lang attribute
 			document.documentElement.lang = newLocale;
 		}
-	};
+	}, []);
 
 	// Set HTML lang attribute when locale changes
 	useEffect(() => {
@@ -65,8 +66,10 @@ export function LocaleProvider({ children }: { children: React.ReactNode }) {
 		}
 	}, [locale, mounted]);
 
+	const contextValue = useMemo(() => ({ locale, messages, setLocale }), [locale, messages, setLocale]);
+
 	return (
-		<LocaleContext.Provider value={{ locale, messages, setLocale }}>
+		<LocaleContext.Provider value={contextValue}>
 			{children}
 		</LocaleContext.Provider>
 	);