React useEffect for Loading Data - reactjs

Question

I'm learning React Hooks and I'm wondering what would be the most effective way to reload data while being "hook friendly".
I've identified 3 use cases (the latest apparently being the "more appropriate"
With Copied Code
//Example of Using useEffect Hooks by duplicating code
import React, {useState, useEffect} from 'react'
import axios from 'axios'
export default () => {
const [deals, setDeals] = useState([])
const [loading, setLoading] = useState(false)
useEffect(() => {
setLoading(true)
axios({
method: 'GET',
url: `http://localhost:1338/deals`
}).then(res => {
setDeals(res.data)
setLoading(false)
})
}, [setDeals])
return(
<div className="Deals">
{loading &&
<p>It's loading</p>
}
{!loading &&
<>
{deals.map((deal, i) => (
<div key={i} className="Deal Note">
{deal.label}
</div>
))}
</>
}
<button onClick={() => {
setLoading(true)
axios({
method: 'GET',
url: `http://localhost:1338/deals`
}).then(res => {
setDeals(res.data)
setLoading(false)
}).catch(res => {
setDeals([{label: 1, label: 2}])
setLoading(false)
})
}}>Fetch Again</button>
</div>
)
}
By Passing Hooks inside an external function. Code reuse - using hooks inside another function
I'm understanding this is not "the way" to use hooks although this was my first go-to solution
//Example of Using useEffect Hooks by feeding hooks to external function
import React, {useState, useEffect} from 'react'
import axios from 'axios'
const usefetchMore = (setDeals, setLoading) => {
console.log("usefetchMore")
setLoading(true)
axios({
method: 'GET',
url: `http://localhost:1338/deals`
}).then(res => {
setDeals(res.data)
setLoading(false)
})
}
export default () => {
const [deals, setDeals] = useState([])
const [loading, setLoading] = useState(false)
useEffect(() => {
usefetchMore(setDeals, setLoading)
}, [setDeals])
return(
<div className="Deals">
{loading &&
<p>It's loading</p>
}
{!loading &&
<>
{deals.map((deal, i) => (
<div key={i} className="Deal Note">
{deal.label}
</div>
))}
</>
}
<button onClick={() => usefetchMore(setDeals, setLoading)}>Fetch Again</button>
</div>
)
}
This one seem to be "the proper way of doing it" and is based on having useEffect re-triggered because it's listening to the changes on the reload variable which is there just to re-trigger it.
//Example of Using useEffect Hooks with variable to re-trigger useEffect
import React, {useState, useEffect} from 'react'
import axios from 'axios'
/* DOESN't WORK */
export default () => {
const [deals, setDeals] = useState([])
const [loading, setLoading] = useState(false)
const [reload, setReload] = useState(0)
useEffect(() => {
console.log("Deal4.useEffect")
setLoading(true)
axios({
method: 'GET',
url: `http://localhost:1338/deals`
}).then(res => {
setDeals(res.data)
setLoading(false)
})
}, [setDeals, reload])
return(
<div className="Deals">
{loading &&
<p>It's loading</p>
}
{!loading &&
<>
{deals.map((deal, i) => (
<div key={i} className="Deal Note">
{deal.label}
</div>
))}
</>
}
<button onClick={() => {
setReload(reload + 1)
}}>Fetch Again</button>
</div>
)
}
My question is: If I were to build a component that shows loading and allows to refresh itself, which way would be the proper way to write it with "React hooks"?

Answer 1

Create a component in /src/ called Photos.js and give it a basic list:
import React from "react";
import { useFetch } from "./hooks";
function Photos() {
const [data, loading] = useFetch(
"https://jsonplaceholder.typicode.com/photos?albumId=1"
);
return (
<>
<h1>Photos</h1>
{loading ? (
"Loading..."
) : (
<ul>
{data.map(({ id, title, url }) => (
<li key={`photo-${id}`}>
<img alt={title} src={url} />
</li>
))}
</ul>
)}
</>
);
}
export default Photos;
Now we need a Hook! Create a file in the same directory called hooks.js and fill it with this:
import { useState, useEffect } from "react";
function useFetch(url) {
const [data, setData] = useState([]);
const [loading, setLoading] = useState(true);
async function fetchUrl() {
const response = await fetch(url);
const json = await response.json();
setData(json);
setLoading(false);
}
useEffect(() => {
fetchUrl();
}, []);
return [data, loading];
}
export { useFetch };
Import the Photos component into App.js and yarn start. Done!