React useEffect missing dependencies

Question

I'm getting a warning because my useEffect is missing dependencies, but I do not want to add these dependencies because will refresh the page every time I change the input value of these dependencies field.

I have two state data for my start and end date:

const [ startDate, setStartDate ] = useState(moment().subtract(3, 'month').format('YYYY-MM-DD'));
const [ endDate, setEndDate ] = useState(moment().format('YYYY-MM-DD'));

As default, I load the data I'm my useEffect based on the date range:

useEffect(() => {
    async function fetchData() {
        setDataArr(await myAPI.get({
            propertyID,
            userID,
            startDate,
            endDate,
        }));
    }
    fetchData();
}, [propertyID, userID]);

Then, I use them in my form. The goal is to research the data from the database based on the date range selected.

<Form inline>
    <FormGroup className="mb-10 mr-sm-10 mb-sm-0" inline>
        <Label for="startDate" className="mr-sm-10">Start Date:</Label>
        <DatePicker name="startDate" id="startDate" style={{maxWidth: '110px'}}
            value={startDate} onChange={(e) => setStartDate(e ? moment(e).format('YYYY-MM-DD') : '')}
        />
    </FormGroup>
    <FormGroup className="mb-10 mr-sm-10 mb-sm-0" inline>
        <Label for="endDate" className="mr-sm-10">End Date:</Label>
        <DatePicker name="endDate" id="endDate" style={{maxWidth: '110px'}}
            value={endDate} onChange={(e) => setEndDate(e ? moment(e).format('YYYY-MM-DD') : '')}
        />
    </FormGroup>
    <Button className="btn btn-primary" onClick={search}>Update</Button>
</Form>

I'm getting the warning saying that the startDate and endDate are missing in useEffect dependency array, but if I add them, the component reload every time I change one of the date inputs.

dave · Accepted Answer · 2021-06-01 16:39:36Z

2

I would probably do:

const [ startDate, setStartDate ] = useState(moment().subtract(3, 'month').format('YYYY-MM-DD'));
const [ endDate, setEndDate ] = useState(moment().format('YYYY-MM-DD'));
const [ dateRange, setDateRange ] = useState({startDate, endDate});

<Button
    className="btn btn-primary"
    onClick={() => {
        setDateRange({
            startDate,
            endDate,
        })
    }}
>
    Update
</Button>

useEffect(() => {
    async function fetchData() {
        setDataArr(await myAPI.get({
            propertyID,
            userID,
            ...dateRange
        }));
    }
    fetchData();
}, [propertyID, userID, dateRange]);

And now, you can set startDate and endDate without triggering the update, but it will update when they click search (since that will trigger fetchData when it updates dateRange.

answered Jun 1, 2021 at 16:39

dave

65.1k6 gold badges81 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

myTest532 myTest532 Over a year ago

Very smart solution. Thank you.

Kartik Malik Over a year ago

if you want to fetch data only when the user hit submit, then you can remove useEffect and just call fetch inside onClick not sure if that is your use case or not.

Collectives™ on Stack Overflow

React useEffect missing dependencies

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related