feat #65 - Fix infinite calls with react hooks

src/components/Form/FieldContext.ts

@@ -1,6 +1,7 @@
 import { createContext } from 'react'
 
-interface FieldContextProps {
+export interface FieldContextProps {
+	initialValues: Record<string, any>
 	loading: boolean
 	onSubmit: (data: any) => void
 }

src/components/Form/FormInput/index.tsx

@@ -1,6 +1,6 @@
-import FieldContext from '../FieldContext'
 import FieldLabel from '../FieldLabel'
 import { Controller, useFormContext, ValidationRules } from 'react-hook-form'
+import FieldContext, { FieldContextProps } from '../FieldContext'
 import Input, { InputProps } from '../../Input'
 import React, { FC, useContext } from 'react'
 
@@ -21,12 +21,16 @@ const FormInput: FC<FormInputProps> = ({
 	...rest
 }: FormInputProps) => {
 	const { control, errors } = useFormContext()
-	const { loading } = useContext(FieldContext)
+	const { initialValues, loading } = useContext<FieldContextProps>(
+		FieldContext
+	)
 
 	if (required) {
 		rules.required = true
 	}
 
+	const defaultValue = (initialValues[name] as string) || ''
+
 	return (
 		<div>
 			{label && (
@@ -38,7 +42,7 @@ const FormInput: FC<FormInputProps> = ({
 			)}
 			<Controller
 				control={control}
-				defaultValue=''
+				defaultValue={defaultValue}
 				name={name}
 				render={({ onChange, value }) => (
 					<Input

src/components/Form/index.tsx

@@ -3,7 +3,7 @@ import FieldContext from './FieldContext'
 import FormButton, { FormButtonProps } from './FormButton'
 import FormInput, { FormInputProps } from './FormInput'
 import { FormProvider, useForm } from 'react-hook-form'
-import React, { FC, ReactNode, useEffect } from 'react'
+import React, { FC, ReactNode } from 'react'
 
 const useStyles = createUseStyles({
 	container: {
@@ -15,7 +15,7 @@ const useStyles = createUseStyles({
 
 export interface FormProps {
 	children: ReactNode
-	initialValues?: object
+	initialValues?: Record<string, any>
 	loading?: boolean
 	onSubmit: (data: any) => void
 }
@@ -34,16 +34,14 @@ const Form: FC<FormProps> & FormSubComponents = ({
 	const classes = useStyles()
 	const methods = useForm()
 
-	const { handleSubmit, reset } = methods
-
-	useEffect(() => {
-		reset(initialValues)
-	}, [initialValues, reset])
+	const { handleSubmit } = methods
 
 	return (
 		<FormProvider {...methods}>
 			<form onSubmit={handleSubmit(onSubmit)}>
-				<FieldContext.Provider value={{ loading, onSubmit }}>
+				<FieldContext.Provider
+					value={{ initialValues, loading, onSubmit }}
+				>
 					<div className={classes.container}>{children}</div>
 				</FieldContext.Provider>
 			</form>