MUI DatePicker hangs on big date changes

Question

MUI DatePicker (either from Labs or X) was working fine. I cannot work out what happened, but it now hangs if I want to change the date by ten years. It seems like the code goes into an infinite loop, but there's no output to the console. The code is

function DateSelector(props) {
  const setValue = value => {
    if (value !== null) {
      const checked = checkDate(value);
      props.handler(checked);
    }
  }
  return (
    <DatePicker
      label={props.label}
      inputFormat="d/M/y"
      mask=""
      value={props.date}
      onChange={(value) => {
        setValue(value);
      }}
      renderInput={(params) => (
        <Tooltip title={"select " + props.label + " date"} arrow>
          <TextField size="small" {...params} />
        </Tooltip>
      )}
    />
  );
}

props.date is an App-level state that is handed down to the picker component. checkDate is a simple function to ensure the date is in the correct range (I've bug-tested it, and it's not the cause of the problem as far as I can see). props.handler changes the App-level state. I wonder if the problem is that I'm manipulating state at the App-level directly through the picker.

Answer 1

This is now resolved!

The problem here is that props.date is a date object stored as an App state that is passed to the component. The component is modifying this directly! Instead it should work with a deep copy of the date object.

Instead of

value={props.date}

it should have

value={new Date(props.date.getTime())}