fix: simplify optimistic state

Author: alexdevero

src/components/HookForm/HookForm.tsx

@@ -17,7 +17,7 @@ import { slowFormRequest } from '@/utils/slow-form-request'
 
 export const HookForm: FC = () => {
   const [isPending, startTransition] = useTransition()
-  const [optimisticState, addOptimisticState] = useOptimistic<string[]>([])
+  const [optimisticState, addOptimisticState] = useOptimistic<string>('')
   const {
     register,
     handleSubmit,
@@ -36,17 +36,17 @@ export const HookForm: FC = () => {
   const handleFormSubmit = (data: FormSchema) => {
     startTransition(async () => {
       try {
-        addOptimisticState(['Submitting form...'])
+        addOptimisticState('Submitting form...')
 
         await slowFormRequest(data)
 
-        addOptimisticState(['Form submitted successfully!'])
+        addOptimisticState('Form submitted successfully!')
         // Keep the optimistic state for 1 second
         await new Promise((resolve) => setTimeout(resolve, 1000))
 
         reset()
       } catch (error) {
-        addOptimisticState([`Form submission failed! ${JSON.stringify(error)}`])
+        addOptimisticState(`Form submission failed! ${JSON.stringify(error)}`)
       }
     })
   }
@@ -63,9 +63,7 @@ export const HookForm: FC = () => {
           </FieldWrapper>
         ))}
 
-        {optimisticState.map((state, index) => (
-          <p key={index}>{state}</p>
-        ))}
+        {optimisticState && <div>{optimisticState}</div>}
 
         <Button disabled={isPending}>Submit</Button>
       </Form>

src/components/ReactForm/ReactForm.tsx

@@ -20,13 +20,13 @@ type ErrorsState = Partial<{
 export const ReactForm: FC = () => {
   const [errors, setErrors] = useState<ErrorsState | null>(null)
 
-  const [optimisticState, addOptimisticState] = useOptimistic<string[]>([])
+  const [optimisticState, addOptimisticState] = useOptimistic<string>('')
 
   const handleFormSubmit = async (previousState: string, formData: FormData) => {
     try {
       setErrors(null)
 
-      addOptimisticState(['Submitting form...'])
+      addOptimisticState('Submitting form...')
 
       const formDataEntries = Object.fromEntries(formData.entries())
       const result = formSchema.safeParse(formDataEntries)
@@ -70,9 +70,7 @@ export const ReactForm: FC = () => {
           </FieldWrapper>
         ))}
 
-        {optimisticState.map((message) => (
-          <div key={message}>{message}</div>
-        ))}
+        {optimisticState && <div>{optimisticState}</div>}
 
         {state && <div>{state}</div>}