UseEffect endless loop

I'm new to React and I'm trying to learn why I have an endless loop with the following code. I'm using firebase to retrieve a single document.

import services from '../utilities/services';
import {useState, useEffect} from 'react';
import {useParams} from 'react-router-dom';

function SchoolDetail(){
    const {schoolID} = useParams();
    const [school, setSchool] = useState();
    const [id, setID] = useState(schoolID);
    


    useEffect(()=>{

        services.getSchool(schoolID).then((response) => {
            setSchool(response);
        }).catch((e) => {
            alert("Error occured while fetching the school. " + e);
        },[id])

    })

    return(
    <>
    {(school) && console.log(school.id)}
    Details
    </>
    );
}

export default SchoolDetail;.

I've tried using [] as the useEffect dependency and still get an endless loop. I've tried [schoolID], and I've tried the state variable [id]. All cause an endless loop. What am I missing? Is is something to do with the getSchool function returning a promise?

The problem of an endless loop is caused by not passing a dependency array as the second argument of useEffect, and by setting the id state inside the useEffect callback, which triggers the useEffect to be called repeatedly.
To ensure that useEffect only runs once, on mount, you should pass an empty array as the dependency array:

useEffect(() => {
  ...
}, []);

Moreover you can remove the id state and directly use schoolID as the dependency of useEffect:

const { schoolID } = useParams();
const [school, setSchool] = useState();

useEffect(() => {
  ...
}, [schoolId]);