React Hooks Forms: defaultValues not working as expected - reactjs

Question

I'm using hooks forms to fetch articles based on user's region. It can be changed any time, with select input, to change articles location.
import React, { useState, useEffect } from 'react';
import useForm from 'react-hook-form';
import { getRegions } from '../../services/regions';
import s from './style.module.scss';
function UpdateRegion({ putRegion, region }) {
const [regionsList, setRegionsList] = useState(null);
const [isLoading, setIsLoading] = useState(null);
const {
register, handleSubmit, watch, setValue,
} = useForm({
defaultValues: {
id: region !== null && region.id,
},
});
const { id } = watch();
const onSubmit = (data) => putRegion(regionsList.find((r) => (r.id === data.id)));
console.log('WATCH', id);
console.log('userRegionId', region !== null && region.id);
useEffect(() => {
register({ name: 'id' });
}, [register]);
const regions = async () => {
try {
setIsLoading(true);
const data = await getRegions();
setRegionsList(data);
setIsLoading(false);
} catch (error) {
setIsLoading(false);
console.log(error);
}
};
useEffect(() => {
if (regionsList === null && !isLoading) {
regions();
}
}, []);
useEffect(() => {
if (region !== null) {
setValue('id', region.id || '');
}
}, [region]);
return (
<form className={s.container}>
<select
name="id"
ref={register}
onChange={handleSubmit(onSubmit)}
className={s.container__select}
>
{regionsList !== null && (
regionsList.map((region) => (
<option
value={region.id}
key={region.id}
className={s.container__select__option}
>
{region.name}
</option>
))
)}
</select>
</form>
);
}
export default UpdateRegion;
DefaultValue should be all the time equal to region.id, and it works only if I refresh the page. If I change the page, and come back (without refreshing), my defaultValue is equal to the first option from select.
Why this is happening ?
EDIT
I resolved my issue by removing hooks forms:
import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import Loading from 'Components/Loading';
import classNames from 'classnames';
import { getRegions } from '../../services/regions';
import s from './style.module.scss';
function UpdateRegion({ putRegion, region, className }) {
const [regionsList, setRegionsList] = useState(null);
const [isLoading, setIsLoading] = useState(null);
const regions = async () => {
try {
setIsLoading(true);
const data = await getRegions();
setRegionsList(data);
setIsLoading(false);
} catch (error) {
setIsLoading(false);
}
};
useEffect(() => {
if (regionsList === null && !isLoading) {
regions();
}
}, []); // eslint-disable-line
function changeRegion(e) {
putRegion(regionsList.find((r) => (r.id === e.target.value)));
}
if (region !== null) {
return (
<form className={classNames(s.container, className)}>
<select
name="id"
onChange={(e) => changeRegion(e)}
className={s.container__select}
value={region !== null && region.id}
>
{regionsList !== null && (
regionsList.map((r) => (
<option
value={r.id}
key={r.id}
className={s.container__select__option}
>
{r.name}
</option>
))
)}
</select>
</form>
);
} return <Loading small />;
}
UpdateRegion.propTypes = {
putRegion: PropTypes.func.isRequired,
region: PropTypes.object.isRequired,
className: PropTypes.string,
};
UpdateRegion.defaultProps = {
className: '',
};
export default UpdateRegion;

Answer 1

I think you have a wrong opinion about the defaultValue property. Let's try to explain why. First, when your hook calls for the first time your default value that has been passed from outside will be used later and it won't be changed any more. So, using the useEffect you will be able to observe and update the actual region id in your component.