useState not setting initial state?

Question

I have a SettingsDialog component that has the initial settings passed in as props. I'm then using useState to set the current form values initially to the passed in settings:

export default function SettingsDialog({ settings }) {
  const [values, setValues] = useState(settings);
}

However, this doesn't seem to be working. The values state object is always an empty object. If I add two console.log statements:

export default function SettingsDialog({ settings }) {
  const [values, setValues] = useState(settings);

  console.log('settings:', settings);
  console.log('values:', values);
}

the first logs out the settings object being passed in, but the second logs out an empty object.

Am I not understanding how the useState hook is supposed to work, or am I just doing something wrong?

Answer 1

The reason why you get the empty values (but the settings has value) is because, when you render the page the Dialog got initialized, but at this time, the value of both settings and values are null; then when you open the Dialog, the settings value has been initialized. But the values hasn't get updated;

if you wanna the values keep updating with settings, add:

useEffect(() => {
    setValues(settings);
}, [settings]);