Essentials about Suspense and Error Boundaries

We go through the main concepts of Suspense and ErrorBoundaries and highlight what they have in common and what the difference is. Also, we find out about such patterns in React for fetching data: Fetch-On-Render and Render-As-You-Fetch and why we’re talking about it in the context of Suspense.

Photo by Lautaro Andreani on Unsplash

Content:
- Fetch-On-Render pattern
- How React behaves when React component throws Error, Promise
- React.lazy and Suspense
- Render-As-You-Fetch pattern

Do you know how to fetch data in the React component? Definitely, you know, since you do it every day as a ReactJS developer. I even know what pattern comes to your mind first. It should look like this:

const ContainerComponent = ({userId}) => {
   const [user, setUser] = useState(null);

   useEffect(() => {
      fetchUserInfo(userId)
         .then((fetchedUser) => setUser(fetchedUser))
   }, []);
   
   if(user === null) {
      return <p>Loading data</p>
   }
   
   return <UserInfo user={user}>
}