Version Number 7.51.4 Codesandbox/Expo snack</h

Hello, <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-u

issue: useForm reset issue when used with useSWR and conditional rendering about react-hook-form HOT 2 CLOSED

devevignesh commented on June 25, 2024

issue: useForm reset issue when used with useSWR and conditional rendering

from react-hook-form.

Comments (2)

bluebill1049 commented on June 25, 2024 1

not related to this library try this code without using your other libs

'use client';

import { useEffect } from 'react';
import Image from 'next/image';
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import useSWR from 'swr';
import { useForm, Controller } from 'react-hook-form';
import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from '@/components/ui/form';
import Skeleton from 'react-loading-skeleton';
import 'react-loading-skeleton/dist/skeleton.css';

const fetcher = (...args) => fetch(...args).then((res) => res.json());

export default function Home() {
  const { data, isLoading } = useSWR(
    'https://run.mocky.io/v3/ab7d7e0e-899b-41a7-bd17-00e92fa1b446',
    fetcher
  );
  const form = useForm({
    defaultValues: {
      fruit: data?.fruit,
    },
  });

  console.log('page render...')

  useEffect(() => {
    if (data) {

      console.log('data', data?.fruit);
      form.reset({ fruit: 'apple' });
    }
  }, [data]);

  if (isLoading) {
    return <Skeleton count={5} />;
  }

  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <Controller
        control={form.control}
        name="fruit"
        render={({ field }) => {
          console.log('field.value', field.value)
          return null
        }}
      />
    </main>
  );
}

from react-hook-form.

sungh0lim commented on June 25, 2024

Hello, @devevignesh .
How about changing it like the code below?

const fetcher = (...args) => fetch(...args).then((res) => res.json());

const HomeForm = ({ fruit }: { fruit: string }) => {
  const form = useForm({
    defaultValues: {
      fruit,
    },
  });

  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <Form {...form}>
        <form className="space-y-8">
          <FormField
            control={form.control}
            name="fruit"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Username</FormLabel>
                <FormControl>
                  <Select onValueChange={field.onChange} {...field}>
                    <SelectTrigger className="w-[180px]">
                      <SelectValue placeholder="Select a fruit" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectGroup>
                        <SelectLabel>Fruits</SelectLabel>
                        <SelectItem value="apple">Apple</SelectItem>
                        <SelectItem value="banana">Banana</SelectItem>
                        <SelectItem value="blueberry">Blueberry</SelectItem>
                        <SelectItem value="grapes">Grapes</SelectItem>
                        <SelectItem value="pineapple">Pineapple</SelectItem>
                      </SelectGroup>
                    </SelectContent>
                  </Select>
                </FormControl>
                <pre>{JSON.stringify(field, null, 2)}</pre>
              </FormItem>
            )}
          />
        </form>
      </Form>
    </main>
  );
};

export default function Home() {
  const { data, error, isLoading } = useSWR(
    'https://run.mocky.io/v3/ab7d7e0e-899b-41a7-bd17-00e92fa1b446',
    fetcher
  );

  if (error) {
    return <div>Error</div>;
  }

  if (isLoading) {
    return <Skeleton count={5} />;
  }

  return <HomeForm fruit={data.fruit} />;
}