using useEffect in combination with Axios fetching API data returns null - how to deal with this? - reactjs

Question

Fetching data using Axios and useEffect results in null before the actual object is loaded.
Unfortunately, I am not able to use object destructuring before the actual object is not empty.
I am forced to use a hook to check whether an object is empty or not.
For instance, I would like to create multiple functions and split my code up in separate functions for better readability.
This is my HTTP request Hook:
import { useState, useEffect } from 'react';
import axios from 'axios';
export const useHttp = (url, dependencies) => {
const [isLoading, setIsLoading] = useState(false);
const [fetchedData, setFetchedData] = useState(null);
useEffect(() => {
setIsLoading(true);
axios
.get(url)
.then(response => {
setIsLoading(false);
setFetchedData(response.data);
})
.catch(error => {
console.error('Oops!', error);
setIsLoading(false);
});
}, dependencies);
return [isLoading, fetchedData];
};
Followed by my page component:
import React from 'react';
import { PAGE_ABOUT, API_URL } from 'constants/import';
import Header from './sections/Header';
import Main from './sections/Main';
import Aside from './sections/Aside';
import { useHttp } from 'hooks/http';
const About = () => {
const [isLoading, about] = useHttp(PAGE_ABOUT, []);
if (!isLoading && about) {
return (
<section className="about">
<div className="row">
<Header
featuredImage={API_URL + about.page_featured_image.path}
authorImage={API_URL + about.page_author_image.path}
authorImageMeta={about.page_author_image.meta.title}
title={about.about_title}
subtitle={about.about_subtitle}
/>
<Main
title={about.page_title}
content={about.page_content}
/>
<Aside
title={about.about_title}
content={about.about_content}
/>
</div>
</section>
);
}
};
export default React.memo(About);
The actual problem I am not able to nest functions before the object is actually returned.
Is there a way to fetch data without a check by any chance? or a cleaner solution would help.
I would like to use multiple components to split up the code.
Any advice or suggestion would be highly appreciated.

Answer 1

What you are asking would be bad for UIs. You don't want to block the UI rendering when you're fetching data. So the common practice is showing a Loading spinner or (if you're counting on the request being fast) just rendering nothing until it pops up.
So you would have something like:
const About = () => {
const [isLoading, about] = useHttp(PAGE_ABOUT, []);
if (isLoading) return null; // or <Loading />
return (
<section className="about">
<div className="row">
<Header
featuredImage={API_URL + about.page_featured_image.path}
authorImage={API_URL + about.page_author_image.path}
authorImageMeta={about.page_author_image.meta.title}
title={about.about_title}
subtitle={about.about_subtitle}
/>
<Main
title={about.page_title}
content={about.page_content}
/>
<Aside
title={about.about_title}
content={about.about_content}
/>
</div>
</section>
);
};
If your api has no protection for errors and you're afraid of about being null or undefined you can wrap the component with an Error Boundary Component and show a default error. But that depends if you use those in your app.
Error boundaries are React components that catch JavaScript errors
anywhere in their child component tree, log those errors, and display
a fallback UI instead of the component tree that crashed. Error
boundaries catch errors during rendering, in lifecycle methods, and in
constructors of the whole tree below them.

Answer 2

You are not returnig any if your condition in our About component is false so add a case if isLoading or !about you could add a loader maybe:
const About = () => {
const [isLoading, about] = useHttp(PAGE_ABOUT, []);
let conditionalComponent = null;
if (!isLoading && about) {
conditionalComponent= (
<section className="about">
<div className="row">
<Header
featuredImage={API_URL + about.page_featured_image.path}
authorImage={API_URL + about.page_author_image.path}
authorImageMeta={about.page_author_image.meta.title}
title={about.about_title}
subtitle={about.about_subtitle}
/>
<Main
title={about.page_title}
content={about.page_content}
/>
<Aside
title={about.about_title}
content={about.about_content}
/>
</div>
</section>
);
}
return conditionalComponent
};

Answer 3

As I recognize you want to get rid of condition if (!isLoading && about) {
You can make it in several ways:
1) You can create Conditional component by your own. This component should receive children prop as a function and should apply other props to this function:
function Conditional({ children, ...other }) {
if (Object.entries(other).some(([key, value]) => !value)) {
return "empty"; // null or some `<Loading />` component
}
return children(other);
}
Also I made a small demo https://codesandbox.io/s/upbeat-cori-ngenk
It helps you to create only the one place for condition and reuse it in dozens of components :)
2) You can use some library, which is built on a top of React.lazy and React.Suspense (but it wouldn't work on a server-side).
For example https://dev.to/charlesstover/react-suspense-with-the-fetch-api-374j and a library: https://github.com/CharlesStover/fetch-suspense