CODEWITHSUNDEEP
javascriptreactjs
yung peso
yung peso

Reputation: 1796

React Hook useEffect has a missing dependency. Why am I getting this error when nothing is broken?

not sure what is causing me to get this React error. My application works and my URL slugs are in affect and working, however this error is popping up and I'm not entirely sure why?

Full Error:

  Line 30:5:  React Hook useEffect has a missing dependency: 'slug'. Either include it or remove the dependency array  react-hooks/exhaustive-deps

All I'm trying to do is pass API data to my page for rendering and creating a URL parameter with my slug

import React, { useState, useEffect } from 'react';
import axiosInstance from '../axios';
import { useParams } from 'react-router-dom';
//MaterialUI
import CssBaseline from '@material-ui/core/CssBaseline';
import { makeStyles } from '@material-ui/core/styles';
import Container from '@material-ui/core/Container';
import Typography from '@material-ui/core/Typography';

const useStyles = makeStyles((theme) => ({
    paper: {
        marginTop: theme.spacing(8),
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
    },
}));

export default function Bucket() {
    const { slug } = useParams();
    const classes = useStyles();

    const [data, setData] = useState({ bucket: [] });

    useEffect(() => {
        axiosInstance.get(slug).then((res) => {
            setData({ bucket: res.data });
            console.log(res.data);
        });
    }, [setData]);  //this is where the error is

    return (
        <Container component="main" maxWidth="md">
            <CssBaseline />
            <div className={classes.paper}></div>
            <div className={classes.heroContent}>
                <Container maxWidth="sm">
                    <Typography
                        component="h1"
                        variant="h2"
                        align="center"
                        color="textPrimary"
                        gutterBottom
                    >
                        {data.bucket.title}
                    </Typography>
                    <Typography
                        variant="h5"
                        align="center"
                        color="textSecondary"
                        paragraph
                    >
                        {data.bucket.about}
                    </Typography>
                </Container>
            </div>
        </Container>
    );
}

Thank you for the debugging help!

Upvotes: 0

Views: 224

Answers (2)

Siddhant Varma
Siddhant Varma

Reputation: 594

You aren't using slug anywhere apart from the effect, simply move it into the effect to get rid of this error.

   useEffect(() => {
        axiosInstance.get(slug).then((res) => {
            setData({ bucket: res.data });
            console.log(res.data);
        });
    }, [slug,setData]);

Upvotes: 2

Tony Drummond
Tony Drummond

Reputation: 375

You just add it into the dependency array. I will further clarify that slug needs to be a dependency because you want the useEffect to run again if it changes.

useEffect(() => {
        axiosInstance.get(slug).then((res) => {
            setData({ bucket: res.data });
            console.log(res.data);
        });
    }, [setData, slug]);

Upvotes: 2

Related Questions