Реакция: выбор даты занимает 18 секунд

Question

Я делаю проект и мне нужно реализовать выбор даты, он работает, но занимает 18 секунд, что очень плохо. Может быть, потому что мое приложение загружает массив из 40 КБ, который отображается на линейном графике? В консоли выдается следующее сообщение:

[Violation] Forced reflow while executing JavaScript took 18133ms

Как я могу улучшить свой код? Мой код следующий.

Код основного родительского компонента

import React, { useState, useEffect } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';
import Grid from '@material-ui/core/Grid';
import Labels from './Labels';
import DatePickerStart from './DatePickerStart';
import DatePickerEnd from './DatePickerEnd';
import LineGraph from './LineGraph';
import temperatureData from '../temperature.json';

const useStyles = makeStyles((theme) => ({
    root: {
        flexGrow: 1,
    },
    paper: {
        padding: theme.spacing(2),
        textAlign: 'center',
        color: theme.palette.text.secondary,
    },
}));

export default function AutoGrid() {
    const classes = useStyles();
    const [startDate, setStartDate] = useState(new Date());
    const [endDate, setEndDate] = useState(new Date());

    const handleStartDateChange = startDate => {
        //console.log(date);
        setStartDate(startDate);
    };

    const handleEndDateChange = endDate => {
        //console.log(date);
        setEndDate(endDate);
    };
    return (
        <div className={ classes.root }>
            <Grid container spacing={ 3 }>
                <Grid item xs={ 3 }>
                    <Paper className={ classes.paper }>
                        <Labels />
                    </Paper>
                </Grid>
                <Grid item xs={ 6 }>
                    <DatePickerStart startDate={ startDate } handleStartDate={ handleStartDateChange } />
                    <DatePickerEnd endDate={ endDate } handleEndDate={ handleEndDateChange } />
                    <Paper className={ classes.paper }>
                        <LineGraph data={ temperatureData } />
                    </Paper>
                </Grid>
            </Grid>
        </div>
    );
};

компонент Datepicker

import React из 'реакции'; Импортировать DatePicker из «response-date-picker»;

export default function DatePick(props) {


    return (
        <div>
            <DatePicker
                onChange={ props.handleStartDate }
                value={ props.startDate }
            />
        </div>
    );

}