Dynamic Import

In a chat application, we have four key components: UserInfo, ChatList, ChatInput and EmojiPicker. However, only three of these components are used instantly on the initial page load: UserInfo, ChatList and ChatInput. The EmojiPicker isn't directly visible, and may not even be rendered at all if the user won't even click on the Emoji in order to toggle the EmojiPicker. This would mean that we unnecessarily added the EmojiPicker module to our initial bundle, which potentially increased the loading time!

In order to solve this, we can dynamically import the EmojiPicker component. Instead of statically importing it, we'll only import it when we want to show the EmojiPicker. An easy way to dynamically import components in React is by using React Suspense. The React.Suspense component receives the component that should be dynamically loaded, which makes it possible for the App component to render its contents faster by suspending the import of the EmojiPicker module!

When to Use

• Use this when certain modules are only needed based on user interaction or conditions
• This is helpful when you want to reduce the initial bundle size for faster page loads
• Use this when components like modals, pickers, or heavy libraries aren't needed on initial render

Instructions

• Use React.lazy with Suspense for dynamic component imports in React
• Provide meaningful fallback UI while dynamically imported modules are loading
• Consider using loadable-components for SSR applications where React Suspense isn't supported
• Only dynamically import modules that aren't critical to the initial render