React Conference 2021

Today I have the privilege to attend React Conference 2021. This is my 3rd conference in the world of Web Developers. I have learned that going to this conference; I have so much fun because I get to connect with great developers and recruiters. In these conferences, I see all types of developers, from Junior to Senior.

This year the React team showed us a new feature, React.Suspense

React.Suspense lets you specify the loading indicator in case some components in the tree below it are not yet ready to render. Today, lazy loading components is the only use case supported by <React.Suspense>:

// This component is loaded dynamically
const OtherComponent = React.lazy(() => import('./OtherComponent'));
function MyComponent() {
  return (
    // Displays <Spinner> until OtherComponent loads
    <React.Suspense fallback={<Spinner />}>
      <div>
        <OtherComponent />
      </div>
    </React.Suspense>
  );
}

Note that lazy components can be deep inside the Suspense tree — it doesn’t have to wrap every one of them. The best practice is to place <Suspense> where you want to see a loading indicator, but to use lazy() wherever you want to do code splitting.

I will continue posting more about new features as I learn them; so far, I see React 18 is promising better performance and I’m excited to see what more from React.