Skip to content

Invalid date warning in StrictMode  #224

Open
@veronika-viedoc

Description

After updating to React v.18 we started to get "Invalid date provided" warnings in the console. The warnings disappear when we remove StrictMode. We are using a custom formatDate function that uses the Intl.DateTimeFormat to format the date. It seems that during the second render the preloadedDate value is the formatted value and not the value that we provide to the component.

I've made an example here: https://codesandbox.io/p/sandbox/serverless-violet-8xnj43

image

const getFormatDate = () => {
  const o = new Intl.DateTimeFormat([], { dateStyle: "short" });

  return (date) => o.format(date);
};

export default function App() {
  const [value, setValue] = useState(new Date("2024-10-21T22:00:00.000Z"));

  const options = {
    formatDate: getFormatDate(),
  };

  return (
    <>
      <Flatpickr
        options={options}
        onChange={([date]) => setValue(date)}
        value={value}
        render={({ value }, ref) => (
          <input
            ref={ref}
            readOnly
            value={value instanceof Date ? value.toISOString() : value ?? ""}
          />
        )}
      ></Flatpickr>
    </>
  );
}

I'm not sure if there is something wrong with the way we have implemented it or if this is an actual issue. Any help is appreciated!

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions