Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Cover image for 🦥 React.lazy without a default export
iamandrewluca
iamandrewluca

Posted on • Edited on

     

🦥 React.lazy without a default export

React v16.6.0 introducedReact.lazy that allows to code split without any external libraries.

https://reactjs.org/blog/2018/10/23/react-v-16-6.html

The React.lazy function lets you render a dynamic import as a regular component.

Before:

importOtherComponentfrom'./OtherComponent';functionMyComponent(){return(<div><OtherComponent/></div>);}

After:

constOtherComponent=React.lazy(()=>import('./OtherComponent'));functionMyComponent(){return(<div><OtherComponent/></div>);}

https://reactjs.org/docs/code-splitting.html#reactlazy

Althought bellow there is a message

React.lazy takes a function that must call a dynamicimport(). This must return aPromise which resolves to a module with adefault export containing a React component.

Which means that yourOtherComponent should be exported this way

exportdefaultfunctionOtherComponent(){return(<div>OtherComponent</div>);}
Enter fullscreen modeExit fullscreen mode

But what if you have it exported not as default?

exportfunctionOtherComponent(){return(<div>OtherComponent</div>);}
Enter fullscreen modeExit fullscreen mode

In this case you have to change a bit theimport() code when importing this component

constOtherComponent=React.lazy(()=>import('./OtherComponent').then(module=>({default:module.OtherComponent})));
Enter fullscreen modeExit fullscreen mode

What are we doing here, is just chaining thePromise returned byimport() and adding that default export.

Please keep in mind that component imported withReact.lazy should be rendered inside aReact.Suspense

https://reactjs.org/docs/code-splitting.html#suspense

Cover Photo byScott Kelley onUnsplash

Top comments(5)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss
CollapseExpand
 
balines_f053b1282 profile image
Carlos Alvidrez
  • Location
    Charlotte, NC
  • Education
    MIT
  • Pronouns
    he/him/his
  • Work
    Nike
  • Joined

Thank you!

CollapseExpand
 
gollyjer profile image
Jeremy Gollehon
  • Joined

Does this have an affect on tree-shaking?

CollapseExpand
 
iamandrewluca profile image
iamandrewluca
  • Joined

Yes. Dynamic import cannot be analyzed at build time.
You will have to follow React Docs and reexport only wanted component to have dynamic import with tree shaking
reactjs.org/docs/code-splitting.ht...

CollapseExpand
 
gollyjer profile image
Jeremy Gollehon
  • Joined

Excellent. Thanks for the link.

CollapseExpand
 
chenxiaochun profile image
chenxiaochun
  • Joined

Thank you!

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

  • Joined

More fromiamandrewluca

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp