Add memo

.gitignore

@@ -1,25 +1,9 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
-
-node_modules
 dist
-dist-ssr
+node_modules
 storybook-static
-*.local
-
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
-.DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
+.vscode
+.bashrc
+.zshenv
+.npmrc
+public/themes/*.css
+bundle.html

src/Form.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, CSSProperties, useMemo, useEffect } from 'react';
+import React, { useCallback, CSSProperties, useMemo, useEffect, memo } from 'react';
 
 import { FormContext } from './FormContext';
 import { FormApi } from './FormApi';
@@ -94,4 +94,4 @@ export const Form = <
   );
 }
 
-export default Form;
+export default memo(Form) as typeof Form;

src/FormArrayItem.tsx

@@ -1,5 +1,5 @@
-import React, { useCallback } from "react"
-import { FormItem, FormItemProps } from "./FormItem"
+import React, { memo, useCallback } from "react"
+import FormItem, { FormItemProps } from "./FormItem"
 import { FieldUpdate, FieldUpdateCb, ValidationRule } from "./types"
 import { useField } from "./useForm"
 import { FormApi } from "./FormApi"
@@ -64,11 +64,13 @@ export type FormArrayItemProps<FieldName extends string = string, Value extends
   onChange?: (value: FieldUpdate<Value>, event?: unknown) => unknown
 }
 
-export const FormArrayItem = <FieldName extends string = string, Value extends unknown[] = unknown[]>({ children, ...props }: FormArrayItemProps<FieldName, Value>) => {
+const FormArrayItem = <FieldName extends string = string, Value extends unknown[] = unknown[]>({ children, ...props }: FormArrayItemProps<FieldName, Value>) => {
   const form = useFormInstance();
   const formArray = useArrayField(form, props.name);
 
   return <FormItem {...props}>
     {() => children(formArray)}
   </FormItem>
 }
+
+export default memo(FormArrayItem) as typeof FormArrayItem

src/FormItem.tsx

@@ -1,4 +1,4 @@
-import React, { CSSProperties, useCallback, useRef } from 'react';
+import React, { CSSProperties, useCallback, useRef, memo } from 'react';
 import { useDebounce } from 'react-use';
 import { useFormContext } from './FormContext';
 import { ValidationRule, ValidationStatus, ValidationError } from './types';
@@ -28,7 +28,7 @@ export type FormItemProps<
   validationDebounceDelay?: number
 }
 
-export const FormItem = <Value, FieldName extends string = string, Children extends FormItemChildren = FormItemChildren>(props: FormItemProps<FieldName, Value, Children>) => {
+const FormItem = <Value, FieldName extends string = string, Children extends FormItemChildren = FormItemChildren>(props: FormItemProps<FieldName, Value, Children>) => {
   const {
     children,
     name,
@@ -86,3 +86,5 @@ export const FormItem = <Value, FieldName extends string = string, Children exte
 };
 
 FormItem.displayName = 'FormItem';
+
+export default memo(FormItem) as typeof FormItem

src/index.ts

@@ -1,5 +1,6 @@
 import Form from './Form.tsx';
-import { FormItem, FormItemProps } from './FormItem.tsx';
+import FormItem, { FormItemProps } from './FormItem.tsx';
+export { default as FormArrayItem } from './FormArrayItem.tsx';
 export * from './Form.tsx';
 export * from './FormItem.tsx';
 export * from './types.ts';

src/useForm.tsx

@@ -3,8 +3,8 @@ import { FormApi } from "./FormApi";
 import { FormApiGenericTypes, ArrayOnly, ArrayOnlyFields } from "./typesHelpers";
 import { FieldUpdate, ValidationRule, ValidationError } from "./types";
 import { Form, FormProps } from "./Form";
-import { FormItem, FormItemProps } from "./FormItem";
-import { FormArrayItem, FormArrayItemProps, useArrayField } from "./FormArrayItem";
+import FormItem, { FormItemProps } from "./FormItem";
+import FormArrayItem, { FormArrayItemProps, useArrayField } from "./FormArrayItem";
 
 export const useCreateForm = <State extends Record<string, unknown>>(initialState: State) => {
   const formApiRef = React.useRef<FormApi<State>>(new FormApi(initialState));