React Hook "useEffect" has a missing dependency: 'fetchData'. Infinite re-render loop in React

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

function ProductList() {
    const [products, setProducts] = useState([]);
    const [loading, setLoading] = useState(true);

    // دالة جلب البيانات معرّفة داخل المكوّن
    const fetchData = async () => {
        const response = await fetch('https://api.example.com/products');
        const data = await response.json();
        setProducts(data);
        setLoading(false);
    };

    useEffect(() => {
        fetchData(); 
        // إذا تركتها فارغة [] يظهر تحذير Linter
        // إذا أضفت [fetchData] تدخل الصفحة في Infinite Loop!
    }, []); 

    if (loading) return <p>Loading...</p>;

    return (
        <ul>
            {products.map(p => <li key={p.id}>{p.name}</li>)}
        </ul>
    );
}

export default ProductList;