How do I stop useEffect from repeating over and over again - reactjs

Question

import { useState, useEffect } from 'react';
import axios from 'axios';
export const GetData = (url) => {
const [data, setData] = useState([]);
useEffect(() => {
const getData = async () => {
try {
const response = await axios.get(url);
setData(response.data);
} catch (error) {
console.error(error);
}
};
getData();
return () => {};
}, [data]);
return {
data,
};
};
I am using the component above for multiple multiple components. My problem is that the request keeps repeating over and over again. I want to stop it from repeating. The only time it should repeat is when "data" changes.
I tried using axios' cancel token but that did not work. I also tried stopping it using intervals (maybe I did it incorrectly. I don't know). The code below shows one of the components that I am using the GetData component. Hopefully this helps.
import React from 'react';
import { Card, Table, Button } from 'react-bootstrap';
import { DeleteData, GetData } from '../../../api';
import { useGlobalContext } from '../../../context';
const SectionTable = ({ url }) => {
const { setIsEdit, getId } = useGlobalContext();
const { data } = GetData(url);
return (
<>
<Card style={{ maxHeight: '500px', overflowY: 'scroll' }}>
<Card.Body>
<Table striped responsive hover>
<thead>
<th>Section Level</th>
<th>Section Name</th>
<th></th>
<th></th>
</thead>
<tbody>
{data.map((section) => {
return (
<tr key={section.id}>
<td>{section.section_level}</td>
<td>{section.section_name}</td>
<td>
<Button
variant='warning'
onClick={() => {
getId(section.id);
setIsEdit(true);
}}>
Edit
</Button>
</td>
<td>
<Button
variant='danger'
onClick={() => DeleteData(section.id)}>
Delete
</Button>
</td>
</tr>
);
})}
</tbody>
</Table>
</Card.Body>
</Card>
</>
);
};
export default SectionTable;
```**strong text**

Answer 1

listing data as a dependency means that the effect runs after every render that was triggered by a change in data. Instead depend on url:
useEffect(() => {
const getData = async () => {
try {
const response = await axios.get(url);
setData(response.data);
} catch (error) {
console.error(error);
}
};
getData();
return () => {};
}, [url]);