React set 2 states simulatenously within useeffect - reactjs

Question

I have a component that I use to display a list of data entries like this (simplified):
// resource is the rest endpoint,
// items is the parents components
// state that holds the data entries and setItems is the corresponding setter
export default function LoadedList({resource,items, setItems,CustomFormat}){
const [loadingOrError,setLoadingOrError] =useState(false)
useEffect(()=>{
axios.get(baseURL+resource)
.then((e)=>{
setItems(e.data)
setLoadingOrError(false)
})
.catch((e)=>{
setItems([{text:"Error"}])
setLoadingOrError(true)
})
setItems([{text:"Loading...-"}])
setLoadingOrError(true)
},[])
return(
<div className="list">
{
items.map((item)=>
loadingOrError?
<DefaultFormat item={item} />
:
<CustomFormat item={item}/>
)
}
</div>
)
}
The basic idea is, that while the component is loading item or if it fails, the default format should be used to display the corresponding message.
Once the items have successfully loaded, the format from the parent should be used to format the entries.
The problem is, that I have found out that setItems and setLoading are not changed simulatneously. The way it appears to work is that it first setItems then rerenders all the entries and only then changes loadingOrError to true. So is there a way to set both of those simulatenously? Or just without rerendering everything inbetween?

Answer 1

Instead of trying to update both simultaneously, why don't you try keeping track of the loading and error state separately, and then do something like this:
// resource is the rest endpoint,
// items is the parents components
// state that holds the data entries and setItems is the corresponding setter
export default function LoadedList({resource, items, setItems, CustomFormat}){
const [loading, setLoading] = useState(true);
const [error, setError] = useState("");
useEffect(()=>{
setLoading(true);
axios.get(baseURL+resource)
.then((e)=>
setItems(e.data)
)
.catch((e)=>
setError("Error")
)
.finally(() => setLoading(false));
},[])
if(loading) {
return "Loading ...";
}
if(error) {
return error;
}
return(
<div className="list">
{items.map((item, index) => <CustomFormat key={index} item={item}/>)}
</div>
)
}
That should display Loading... until all items are loaded.
If you insist on wanting to leave everything as it is, and just achieve what you originally asked about updating both at the same time, you would probably need to define a function that executes the API call one level up, together with the loading state, error state and data state handling, have all those state together under the same state hook, and then pass down the API function to be used in the child's useEffect.
const [dataState, setDataState] = useState({
data: null,
loading: false,
error: ""
});
...
setDataState({data: data, loading: false});
Besides this, I recommend two things:
You should check that the component is still mounted when the request finishes and right before setting the state. Otherwise you will get an error. That's very simple to achieve with a an additional variable to keep track of the mount state.
It might be beneficial to create a custom hook for handling requests, since that's probably something you will do a lot, and it will look very similar in every case. I find the step-by-step guide in this post very clear.
Taken from that post:
useFetch custom hook
import { useState, useEffect } from 'react';
const useFetch = (url = '', options = null) => {
const [data, setData] = useState(null);
const [error, setError] = useState(null);
const [loading, setLoading] = useState(false);
useEffect(() => {
let isMounted = true;
setLoading(true);
fetch(url, options)
.then(res => res.json())
.then(data => {
if (isMounted) {
setData(data);
setError(null);
}
})
.catch(error => {
if (isMounted) {
setError(error);
setData(null);
}
})
.finally(() => isMounted && setLoading(false));
return () => (isMounted = false);
}, [url, options]);
return { loading, error, data };
};
export default useFetch;