SelectValue doesn't re-render value on state update

[janoschherrmann]

Hey there, I want to implement a country switcher using the Select component. When the component renders, it checks for a previously selected country in a cookie, which is then used as the initial SelectValue.

What is weird is that even though the value from the cookie gets read correctly and the selectedCountryCode gets updated, the SelectValue doesn't render with the correctly updated value. It stays empty. Is does work though, if I set an initial value for selectedCountryCode (initial useState value), but that's not what I want, since the default value should come from the cookie and only as a last resort be set to the defaultCountryCode.

Any ideas why this might be happening?

import { countryCodeToFlag, countryCodes, defaultCountryCode } from '@/lib/constants';
import { CountryCode } from '@/lib/types';
import { useRouter } from '@/navigation';
import Cookies from 'js-cookie';
import { useTranslations } from 'next-intl';
import { useEffect, useState } from 'react';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select';

export function CountrySwitcher() {
  const router = useRouter();
  const t = useTranslations('CountrySwitcher');

  const [selectedCountryCode, setSelectedCountryCode] = useState<CountryCode>();

  const availableCountryCodes = countryCodes.filter(
    (countryCode) => countryCode !== selectedCountryCode,
  );

  useEffect(() => {
    const persistedCountryCode = Cookies.get('countryCode') as CountryCode;

    setSelectedCountryCode(persistedCountryCode || defaultCountryCode);
  }, []);

  return (
    <Select
      defaultValue={selectedCountryCode}
      onValueChange={(selectedCountryCode: CountryCode) => {
        setSelectedCountryCode(selectedCountryCode);

        Cookies.set('countryCode', selectedCountryCode);
        router.refresh();
      }}
    >
      <SelectTrigger className="w-[180px]">
        <SelectValue>
          {selectedCountryCode
            ? `${countryCodeToFlag[selectedCountryCode]} ${t(`countries.${selectedCountryCode}`)}`
            : ''}
        </SelectValue>
      </SelectTrigger>
      <SelectContent>
        {availableCountryCodes.map((availableCountryCode) => (
          <SelectItem key={availableCountryCode} value={availableCountryCode}>
            {`${countryCodeToFlag[availableCountryCode]} ${t(`countries.${availableCountryCode}`)}`}
          </SelectItem>
        ))}
      </SelectContent>
    </Select>
  );
}

[benoitgrelard]

Can you set it as the default value here?

const [selectedCountryCode, setSelectedCountryCode] = useState<CountryCode>(
  Cookies.get('countryCode') as CountryCode
);`