How to pass actual data in props, and not from the previous render?

Question

React

Actually, the code (of course, I cut out everything superfluous):

import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import DatePicker from 'react-datepicker';
import "react-datepicker/dist/react-datepicker.css";

export default function DataOutput() {
    const [startDate, setStartDate] = useState(new Date());
    const [endDate, setEndDate] = useState(new Date());
    return (
        <div id="dataContainer">
            {/* Первый календарь для отметки начала временного промежутка */}
            <DatePicker
                selected={startDate}
                onChange={date => setStartDate(date)}
            />
            {/* Второй календарь для отметки конца временного промежутка */}
            <DatePicker
                selected={endDate}
                onChange={date => setEndDate(date)}
                minDate={startDate}
            />
            <Table startDate={startDate} endDate={endDate} />
        </div>
    );
}

function Table(props) {
    const [data, setData] = useState([]);
    const [startDate, setStartDate] = useState(props.startDate);
    const [endDate, setEndDate] = useState(props.endDate);

    useEffect(() => {
        setStartDate(props.startDate);
        setEndDate(props.endDate);

        {/* Тут я принимаю данные с сервера и записываю в setData(data) */ }
        {/* Надо брать с сервера данные за определённый временной промежуток и выдавать их в таблице */ }
        fetch('api.ru/?startDate' + startDate + 'endDate' + endDate).then(setData(data));
    }, [props.startDate, props.endDate]);

    return (
        <table>
            {/* В отдельной ф-ции генерю <tr>'ки, но тут это ни к чему, лишний код я просто повырезал */}
            <TableRows items={data} />
        </table>
    );
}

The problem with the code is this:

• When the page opens and the component is inserted, today's dates are indicated on the calendars (for example, 11/25/2020 and 11/25/2020), and they are also transferred to the Table, as a result of which the data for today is displayed in the table
  
• If you change, for example, the date in the second calendar (for example, 11/25/2020 and 11/27/2020), then the component is re-rendered and the data for today is displayed (11/25/2020 and 11/25/2020 are transferred to the Table)
  
• If you change the date in one of the calendars again (for example, 11/20/2020 and 11/27/2020), then re-rendering occurs again and data for the time interval from the previous paragraph is displayed (11/25/2020 and 11/27/2020 are transferred to Table)
  
• Well and so on
  

Those. re-rendering occurs when updating dates in calendars, but data on dates from the previous render is displayed. I know about useRef, I sat for several hours, did it on them, but to no avail, for some reason the result is the same. Mb, I just somehow insert useRefs in a wrong way, I don’t know.

Answer 1

Why are you duplicating props in the state? No need. Table component - strip startDate and endDate, use props.startDate and props.endDate instead when querying.