Memoize ThemeContext.Provider value (pacocoursey#135)

Every time <Theme /> renders a new object is constructed and passed to ThemeContext.Provider. This guarantees that regardless of what inputs changed the Context will be propagated. This is particularly harmful when React is doing hydration because if an unhydrated Suspense boudnary exists in the sub-tree of the Provider it will fall back to client rendering regardless of whether the context is an actual dependency for that Suspense boundary.

This commit adds memoization so the value only changes if one of it's inputs change
To make this memoization effective the default argument for `themes` needed to be statically extracted (it constructs a new array on each function invocation otherwise)

src/index.tsx

@@ -5,6 +5,7 @@ import React, {
   useContext,
   useEffect,
   useState,
+  useMemo,
   memo
 } from 'react'
 import type { UseThemeProps, ThemeProviderProps } from './types'
@@ -25,13 +26,15 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = props => {
   return <Theme {...props} />
 }
 
+const defaultThemes = ['light', 'dark'];
+
 const Theme: React.FC<ThemeProviderProps> = ({
   forcedTheme,
   disableTransitionOnChange = false,
   enableSystem = true,
   enableColorScheme = true,
   storageKey = 'theme',
-  themes = ['light', 'dark'],
+  themes = defaultThemes,
   defaultTheme = enableSystem ? 'system' : 'light',
   attribute = 'data-theme',
   value,
@@ -135,16 +138,18 @@ const Theme: React.FC<ThemeProviderProps> = ({
     applyTheme(forcedTheme ?? theme)
   }, [forcedTheme, theme])
 
+  const providerValue = useMemo(() => ({
+    theme,
+    setTheme,
+    forcedTheme,
+    resolvedTheme: theme === 'system' ? resolvedTheme : theme,
+    themes: enableSystem ? [...themes, 'system'] : themes,
+    systemTheme: (enableSystem ? resolvedTheme : undefined) as 'light' | 'dark' | undefined
+  }), [theme, setTheme, forcedTheme, resolvedTheme, enableSystem, themes]);
+
   return (
     <ThemeContext.Provider
-      value={{
-        theme,
-        setTheme,
-        forcedTheme,
-        resolvedTheme: theme === 'system' ? resolvedTheme : theme,
-        themes: enableSystem ? [...themes, 'system'] : themes,
-        systemTheme: (enableSystem ? resolvedTheme : undefined) as 'light' | 'dark' | undefined
-      }}
+      value={providerValue}
     >
       <ThemeScript
         {...{