In my app I fetch data from my API after a button is clicked that changes the state of endpoint
. Until the data is fetched I want to display a loading icon. After MUCH testing, I finally got it to work. This is what it looks like:
const [endpoint, setEndpoint] = useState('products');
const [loading, setLoading] = useState(true);
const [data, setData] = useState([]);
useEffect(() => {
setLoading(true);
fetch(`/api/${endpoint}`, {
method: 'GET',
})
.then(res => res.json())
.then(data => {
setData(data);
})
.catch(e => {
setData([]);
})
.finally(() => setLoading(false));
}, [endpoint]);
const onSelect = (option) => {
setEndpoint(option);
}
return (
<>
<Sidebar onSelect={onSelect}/>
<div className="main">
<Banner />
{loading ? 'Loading...' : JSON.stringify(data)}
</div>
</>
);
Even though I get the result that I want, I'm a bit confused as to how it all fits together because I'm new to React. Please correct me If I'm wrong, but this is my understanding:
setEndpoint
triggers a re-render, which causes useEffect
to execute because it has a dependency on endpoint
. Each set state call inside useEffect
also causes a re-render. For instance when setLoading(true)
is called, the screen is re-rendered to show 'Loading...'. Once the state of loading
is set to true
, fetch
gets called. As soon as the promise is resolved, setData(data)
causes another re-render. However, my data isn't displayed on screen until setLoading(false)
is called, re-rendering the screen yet again, displaying my data. So in total, the screen is re-rendered 3 times (right?).
I'm still confused because I was under the impression that hooks like useEffect
are asynchronous so why would it wait for the state to be set before continuing to execute the next lines of code?
The useEffect
hook callback is completely synchronous. What you are seeing is the asynchronous Promise chain at work.
useEffect(() => {
setLoading(true); // (3)
fetch(`/api/${endpoint}`, { // (4)
method: 'GET',
})
.then(res => res.json())
.then(data => {
setData(data); // (6)
})
.catch(e => {
setData([]); // (6)
})
.finally(() => setLoading(false)); // (7)
}, [endpoint]); // (2)
const onSelect = (option) => {
setEndpoint(option); // (1)
}
...
{loading ? 'Loading...' : JSON.stringify(data)} // (5), (8)
What you explain as your understanding is largely correct.
endpoint
state update is enqueued the callback function completes and the state updates is processed , triggering a rerender. useEffect
hook is called, its dependencies checked. Since endpoint
value updated, the useEffect
callback is invoked.loading
state update is enqueued . The callback function is still running.fetch
request is made. fetch
returns a Promise, and the code starts a Promise chain. This chain is asynchronous. The useEffect
hook callback now completes and since there is no more synchronous code to run. The loading
state update is processed and a rerender is triggered.data
state update is enqueued and a Promise returned in the chain. The data
state update is processed and a rerender triggered.loading
state update is enqueued . The loading
state is processed and a rerender is triggered.So in total, the screen is re-rendered 3 times (right?).
By my count the logic above likely triggered 4 rerenders, but React could have potentially rerendered any number of times for just about any other reason. React components rerender when either state or props update, or the parent component rerenders.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.