I'm using react-datepicker inside a Controller from react-hook-form. The component works, but I'm seeing a strange issue: Every time I interact with the DatePicker (e.g., select a date), the component flashes or re-renders unexpectedly.
Here's a simplified version of the code:
<Controller
name="startDate"
control={control}
render={({ field }) => (
<DatePicker
{...field}
onChange={(value: Date) => {
field.onChange(value);
onDateChange?.(value); // custom handler
}}
/>
)}
/>
I suspected it might be related to the render prop recreating the handler on every render, but even after fixing that, the DatePicker still flashes or re-mounts.
versions:
"react-datepicker": "^7.6.0",
"react": "18.3.1",
"react-hook-form": "7.57.0",
Has anyone encountered this issue? Is there a known bug or incompatibility between react-datepicker and react-hook-form render props?
Answer
Upgrading to [email protected] resolved the problem.
I had to change the css imports:
from
import 'react-datepicker/dist/react-datepicker.css';
to
import 'node_modules/react-datepicker/dist/react-datepicker.css';
