Can I use React.lazy inside a function?

Question

I would like to know if it's possible to lazy load a component in a generic way (in a function for example).

Example:

function renderLazyComponent() {
  if (/* condition */) {
    return React.lazy(async () => {
      const module = await import('mathLibraryForExample');
      return { default: (props) => <p>{module.multiply(1, 2)}</p> }
    })
  } else {
    return React.lazy(async () => {
      const module = await import('mathLibraryForExample');
      return { default: (props) => <p>{module.division(1, 3)}</p> }
    })
  }*/
}


function App() {
  return (
    <Suspense fallback={<p>Loading...</p>}>
      { renderLazyComponent() } 
    </Suspense>
  );
}

Because I always get this error: ```Objects are not valid as a React child (found: object with keys {$$typeof, _ctor, _status, _result}). If you meant to render a collection of children, use an array instead.```

Akif Hadziabdic · Accepted Answer · 2021-04-06 11:25:44Z

1

I suppose path './components/' is location of your components.

First approach:

const FirstComponent = lazy(() => import('./components/first'));
const SecondComponent = lazy(() => import('./components/second'));
function App() {
  return (
    <>
      <Suspense fallback={<div>Loading</div>}>
        { condition ? <FirstComponent /> : <SecondComponent /> }
      </Suspense>
    </>
  );
}

Second approach:

function renderLazyComponent(component) {
   return lazy(() => import('./components/' + component));
}
function App() {
  return (
    <>
      <Suspense fallback={<div>Loading</div>}>
        { renderLazyComponent('first') } 
        { renderLazyComponent('second') } 
      </Suspense>
    </>
  );
}

answered Apr 6, 2021 at 11:25

Akif Hadziabdic

2,9181 gold badge17 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

David Rhoderick Over a year ago

This gives an error that an object cannot be rendered in React when I tried it.

Collectives™ on Stack Overflow

Can I use React.lazy inside a function?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related