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

[devevignesh]

Version Number

7.51.4

Codesandbox/Expo snack

https://stackblitz.com/edit/stackblitz-starters-z3d33t?file=app%2Fpage.tsx

Steps to reproduce

The problem with resetting a select field value using the reset function in the useEffect that depends on useSWR data is not working as expected. However this works correctly in Next.js version 13.5.1. The provided sandbox example uses Next.js version 14.1.1 where the issue is noticed

Expected behaviour

It should reset the select field value once the data is loaded

What browsers are you seeing the problem on?

No response

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[sungh0lim]

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} />;
}

[bluebill1049]

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>
  );
}