Why is my custom hook for data fetching called multiple times? - reactjs

Question

I'm building a simple website that fetches content from a CMS when the page loads. When I use the React useState and useEffect hook inside the component and log the state variable content, it behaves as expected. However, if create a custom hook out of it, the data is fetched twice.
When I use the hooks inside the component it works fine:
const AboutUsPage = () => {
const [content, setContent] = useState(null);
const [error, setError] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
const fetchData = async () => {
try {
const result = await client.getEntries({
content_type: 'aboutUsPage',
include: 10,
});
setData(result.items[0].fields);
} catch (e) {
setError(e);
} finally {
setLoading(false);
}
};
fetchData();
}, []);
console.log(content);
return (
<>
{content && <p>We have content!</p>}
</>
);
};
Output
null
{title: "About us Page", header: {…}}
This I expect, because fetchData() is called after the component is mounted for the first time, and then rendered again with data. However, if I create a custom hook, for some reason the data is fetched twice. I tried this with contentType as a dependency and [] as a dependency, but it doesn't seem to make a difference. I also already disabled React.StrictMode.
useData.js
const useData = (contentType) => {
const [data, setData] = useState(null);
const [error, setError] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
const fetchData = async () => {
try {
const result = await client.getEntries({
content_type: contentType,
include: 10,
});
setData(result.items[0].fields);
} catch (e) {
setError(e);
} finally {
setLoading(false);
}
};
fetchData();
}, [contentType]);
return [loading, error, data];
};
AboutUsPage.js
const AboutUsPage = () => {
const [error, loading, content] = useData('aboutUsPage');
console.log(content);
return (
<>
{content && <p>We have content!</p>}
</>
);
}
Output
null
{title: "About us Page", header: {…}}
{title: "About us Page", header: {…}}
I don't really understand why or what I can do to fix this.

Answer 1

You have wrong ordering returning [loading, error, data] and getting back [error, loading, content].
The first thing that happen to you not make any sense because in finally you also setLoading(false);
React state updates via useState hooks are not grouped together into a single rerender in some cases. you can read about it here
I have created for you a codeSandbox example to illustrate that those 2 scenarios not related to custom hook but to twice calls to setState code