Line 31:7: React Hook useEffect has a missing dependency: 'url'. Either include it or remove the dependency array?

Question

I am having a small issue in my React application where it gives me this warning in the terminal, Line 31:7: React Hook useEffect has a missing dependency: 'url'. Either include it or remove the dependency array. Line 31:7: React Hook useEffect has a missing dependency: 'url'. Either include it or remove the dependency array. I have a feeling it has to do with how I made chose to mount the component with useEffect. but I am not sure anytime I type in the form the console will keep showing the object in does anyone know how I can fix this.

Component

import React, {useEffect, useState} from 'react'
import axios from 'axios'

const SingleHouse = () => {

    const house_id = window.location.href.split('/')[4]

    // console.log('HOUSE ID: ', house_id);
    //GET HOUSE OBJECT, USESTATE
    const url = `http://localhost:5000/api/house-details/${house_id}`
    const [mounted, setMounted] = useState(true)
    const [house, setHouse] = useState('')


    //HANDLE EMAIL FORM, USESTATE
    const [email, setEmail] = useState('');
    const[subject, setSubject] = useState('');
    const [message, setMessage] = useState('')


    useEffect(()=>{
        const loadData = async () => {
            const {data} = await axios.get(url);

            if(mounted) {
                setHouse(data)
            }
        }
        loadData()
        return()=>[setMounted(false)]
    },[mounted]);

    console.log(house)

    const sendMessage = (e) => {
        e.preventdefault();

        console.log('Email', email);
        console.log('Subject', subject);
        console.log('message', message)
    }
    
    return (
        <div className="HosueDescription__container">
           {house && ( <div className="HouseDescription__leftContainer">
             
                <img src={house.house_details.house_image} alt=""/>
                <h3>{`$${house.house_details.price.toLocaleString(navigator.language, { minimumFractionDigits: 0 })}`}</h3>
                <h3>{`${house.house_details.numOfBeds} Bedroom house in ${house.house_location.city} for ${house.house_details.isSaleOrRent}.`}</h3>
                <div className="number_container">
                    <h5> Bedrooms: {house.house_details.numOfBeds}</h5>
                    <h5> Bathrooms: {house.house_details.numOfBaths}</h5>
                    <h5> Garages: {house.house_details.numOfGarages}</h5>

                    <h4>2423 Duck Creek Road</h4>

                    <h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi fugiat autem cumque voluptas? Ratione error reprehenderit delectus odio quos iure soluta adipisci fugit, dolores amet neque! Quaerat ipsum laborum consectetur rem voluptas, ullam quisquam aut eligendi nesciunt culpa ad totam, corporis a! Velit consequatur molestias dolor corrupti iure sequi id expedita repellendus impedit neque. Impedit cupiditate laboriosam commodi aperiam nobis odio sunt, error adipisci atque ex minima nisi dignissimos unde! Quod est laudantium, neque dolor atque itaque. Est, dignissimos eum.</h4>


                </div>
         </div> )}
            <div className="HouseForm">
                <form className="Form" onSubmit={sendMessage} >
                    <label>Email</label>
                    <input type="email" onChange={(e)=>setEmail(e.target.value)} placeholder="Enter a valid email"/>
                    <label >Subject</label>
                    <input type="text" onChange={(e)=>setSubject(e.target.value)} placeholder="Enter a Subject"/>
                    <label >Message</label>
                    <textarea  cols="30" rows="10" onChange={(e)=>setMessage(e.target.value)} placeholder="Enter a message"></textarea>
                    <button>Send</button>
                </form>
            </div>
           
        </div>
    )
}

export default SingleHouse

Backend Route

// const express= require('express')

// const router = express.Router()
const router = require('express').Router();

const {House} = require('../../Models/House');



//HOUSE Fetch


router.get('/api/house-sale', async(req, res)=>{

    try{
        House.find({'house_details.isSaleOrRent': 'SALE'}).exec().then((data)=>{
            console.log(data);
            return res.status(200).json(data)
        })
    } catch(error) {
        return res.status(500).json({msg: 'server is currently Down :('})
    }
   
})


router.get('/api/house-rent', async(req, res)=>{

    try{
        House.find({'house_details.isSaleOrRent': 'RENT'}).exec().then((data)=>{
            return res.status(200).json(data)
        })
    } catch(error) {
        return res.status(500).json({msg: 'server is currently Down :('})
    }
   
})


router.get('/api/house-details/:id', async(req, res)=>{

    await House.findOne({_id:req.params.id}).exec().then(data=>{

        return res.status(200).json(data)
    }).catch(error =>{
        return res.status(400).json(error)
    })
})


module.exports = router;

Answer 1

Update dependency array of useEffect . React expects all variable/function used in side an useEffect must be dependency, so that useEffect take action on update in that dependencies.

useEffect(()=>{
  const loadData = async () => {
     const {data} = await axios.get(url);

     ...
}, [mounted, url]);

If particular variable/function is not used outside useEffect , you can declare within body of the useEffect .

Answer 2

Try to put this line into the useEffect:

    useEffect(()=>{
         const url = `http://localhost:5000/api/house-details/${house_id}`