Sometimes you would like to return out of a series of hooks calls early or throw to an error boundary. That also leads to conditional calls.
Example: you have a {data, error} = fetchData() and then a useEffect(..., [data]) or 3. It would be very handy if you could just throw the error before the useEffect because you already know it's going to be irrelevant.
So then you put everything after in a new component (because that can be rendered conditionally) or keep checking for errors throughout the effects code. Both are kind of meh.
I'm not sure if this could maybe even work, actually, because there are no real out of order calls, only incomplete calls? But rules of hooks say no, and I have gotten the "hooks called out of order" error for it.
let [ data, setData ] = useState();
useEffect(() => {
let result = fetchData();
if (result.error) {
//do something, or abort?
return;
}
setData(result.data);
}, []);
useEffect(() => {
if (!data) return;
//perform secondary chained action using the fetched data
let result = fetchMoreData(data.guid);
}, [ data ]);
Example: you have a {data, error} = fetchData() and then a useEffect(..., [data]) or 3. It would be very handy if you could just throw the error before the useEffect because you already know it's going to be irrelevant.
So then you put everything after in a new component (because that can be rendered conditionally) or keep checking for errors throughout the effects code. Both are kind of meh.
I'm not sure if this could maybe even work, actually, because there are no real out of order calls, only incomplete calls? But rules of hooks say no, and I have gotten the "hooks called out of order" error for it.