Search code examples
javascriptreactjslazy-loading

How to debug Lazy, Suspense fallback in react 16.6.3


I need to debug Lazy, Suspense fallback in react 16.6.3

Need to update Loading UI.

Looking for best solution.

https://reactjs.org/blog/2018/10/23/react-v-16-6.html#reactlazy-code-splitting-with-suspense


Solution

  • import React, {lazy, Suspense} from 'react';
    const OtherComponent = lazy(() => import('./OtherComponent'));
    
    function MyComponent() {
      return (
        <Suspense fallback={<Fallback />}>
          <OtherComponent />
        </Suspense>
      );
    }
    
    function Fallback() {
      // debug it here to your heart's content
      // same thing with "OtherComponent", debug it in component
      return <div>Loading...</div>;
    }