The Journey of #100DaysOfCode (@Ayman_Dandan)

๐ƒ๐š๐ฒ ๐Ÿ–๐Ÿ– of #100DaysOfCode

  • ๐‘ช๐’๐’…๐’† ๐‘บ๐’‘๐’๐’Š๐’•๐’•๐’Š๐’๐’ˆ ๐’˜๐’Š๐’•๐’‰ ๐‘น๐’†๐’‚๐’„๐’• ๐‘น๐’๐’–๐’•๐’†๐’“ ๐‘ซ๐‘ถ๐‘ด ๐’‡๐’๐’“ ๐‘ญ๐’‚๐’”๐’•๐’†๐’“ ๐‘ณ๐’๐’‚๐’… ๐‘ป๐’Š๐’Ž๐’†๐’” -

As your app grows, youโ€™ll likely notice slower initial load times. This happens because all of your components are loaded at once, even if the user doesnโ€™t need them immediately. ๐‚๐จ๐๐ž ๐ฌ๐ฉ๐ฅ๐ข๐ญ๐ญ๐ข๐ง๐  allows you to load parts of your app dynamically, improving performance by reducing the bundle size.

React Router DOM supports code splitting through dynamic imports (using ๐ฅ๐š๐ณ๐ฒ() and ๐’๐ฎ๐ฌ๐ฉ๐ž๐ง๐ฌ๐ž). This technique ensures that only the code needed for the current route is loaded, reducing initial load times and improving performance.

โ†’ ๐–๐ก๐ฒ: It keeps your app responsive by only loading code when itโ€™s needed.
โ†’ ๐–๐ก๐ž๐ง: Use it when your app has large, less frequently used components (e.g., admin panels, detailed reports, or any feature-heavy routes). This is especially useful in Single Page Applications (SPAs), where users might not need all routes loaded upfront.
1728032846640

2 Likes