Memoize context value in FormProvider

vjee · Feb 11, 2024 · 981a1e1 · 981a1e1
1 parent c506195
commit 981a1e1
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 1 deletion.
diff --git a/.changeset/tricky-birds-switch.md b/.changeset/tricky-birds-switch.md
@@ -0,0 +1,5 @@
+---
+"@formulier/react": patch
+---
+
+Memoize context value in FormProvider
diff --git a/packages/react/src/form.ts b/packages/react/src/form.ts
@@ -10,7 +10,8 @@ import type {FormContext, FormProviderProps, Selector} from './types.js'
 const formContext = React.createContext<FormContext<Values, Primitives> | undefined>(undefined)
 
 function FormProvider<V extends Values, P extends Primitives = Primitives>({form, children}: FormProviderProps<V, P>) {
-	return React.createElement(formContext.Provider, {value: {form: form as Formulier<Values>}}, children)
+	const value = React.useMemo(() => ({form: form as Formulier<Values>}), [form])
+	return React.createElement(formContext.Provider, {value}, children)
 }
 
 function useFormInstance<V extends Values, P extends Primitives = Primitives>() {