What steps should I take to populate DatePicker and TimePicker components with backend data?

Frontend and Backend Development
1

I’m developing a React application that utilizes the Ant-Design UI framework. I need to automatically fill the date and time picker components with information obtained from the backend. This will allow users to modify the date and time values before making an API request to save the changes. I’ve implemented the form.setFieldsValue method within a useEffect hook, including form in the dependency array. However, I’ve encountered an issue where the date picker flickers, complicating date/time selection. Conversely, after removing the dependency array, the form fields do not get populated with the backend data. Here’s the code snippet:

useEffect(() => {
  const hoursData = openHours?.data?.data;
  form.setFieldsValue({
    firstSessionStart:
      hoursData?.firstTerm?.from &&
      moment(hoursData.firstTerm.from, dateFormat).isValid()
        ? moment(hoursData.firstTerm.from, dateFormat)
        : "",
    firstSessionEnd:
      hoursData?.firstTerm?.to &&
      moment(hoursData.firstTerm.to, dateFormat).isValid()
        ? moment(hoursData.firstTerm.to, dateFormat)
        : "",
    // Other fields follow the same logic...
  });
}, []);

This is the core of what I am trying to achieve.

2

Hey! Try using a state to manage form values. Set your initial state with backend dat and then just update the form wth form.setFieldsValue. This helps eliminate the flickering issue as the assignment happens outside useEffect. might be worth a shot. :blush:

3

Another approach you might consider is using the ref to directly manipulate the DOM elements if the useEffect solution does not work out. This could give you more control over exactly when the DatePicker or TimePicker gets updated, thereby tackling the flickering issue more precisely. This approach can provide a more predictable way to manage component updates, especially for complex components like the Ant-Design pickers. Make sure to synchronize the ref updates with your form values to ensure consistency across user interactions.

4

Have you checked if there’s any unnecessary re-renders causing the flickering? Sometimes wrapping your component with React.memo can help optimize performance by preventing re-renders when props or state haven’t changed. It might be interesting to observe if that impacts the flickering! What’s everyone’s experience like with React.memo so far? :thinking:

5

You may also want to consider utilizing the useImperativeHandle hook in conjunction with forwardRef to manage the DatePicker and TimePicker components. By doing so, you might gain finer control over the component’s internal behavior while still allowing external state or data updates from the backend. This can help mitigate flickering issues by ensuring that updates are made only when necessary, and it allows you to maintain more granular control over when the component should re-render.

6

you can try debouncing the setFildsValues call, it might help reduce flicker by limiting how often it’s executed. Libraries like lodash or your own custom debounce function can help here. had a similar issue once and this approach did the trick for me. give it a try!