I have a situation where I want to set the default value of a radio group as a side effect of a deferred call. However, it would appear that the defaultValue property is ignored on a state update, and I’m at a loss to understand why. Here is a simple example, which I ran through https://playcode.io/react:

import React from 'react';

export function App(props) {
  const [defaultValue, setDefaultValue] = React.useState(1);

  React.useEffect(() => {
    setDefaultValue(2);
  });

  console.log(defaultValue);

  return (
    <div className='App'>
      <input type="radio" name="whatever" value="0" defaultChecked={defaultValue === 0}></input>Value 0
      <input type="radio" name="whatever" value="1" defaultChecked={defaultValue === 1}></input>Value 1
      <input type="radio" name="whatever" value="2" defaultChecked={defaultValue === 2}></input>Value 2
    </div>
  );
}

As you can see, the initial state of the default value is 1, which is then changed to 2 once useEffect() takes place.

I did manage to work around this by setting the “checked” property instead and putting in an onChange handler to store the value, but I’m really curious as to why defaultChecked isn’t working when the state changes.