kitten.sh / rn-llms-txt-gen
this repo has no description
fork atom
rn-llms-txt-gen / .cache / fetch / reactnative.dev / docs_optimizing-javascript-loading.html
at main 85 kB view raw
1<!doctype html><html lang=en dir=ltr class="docs-wrapper plugin-docs plugin-id-default docs-version-0.79 docs-doc-page docs-doc-id-optimizing-javascript-loading" data-has-hydrated=false><meta charset=UTF-8><meta name=generator content="Docusaurus v3.8.0"><title data-rh=true>Optimizing JavaScript loading · React Native</title><meta data-rh=true name=viewport content="width=device-width, initial-scale=1.0"><meta data-rh=true property=og:url content=https://reactnative.dev/docs/optimizing-javascript-loading><meta data-rh=true property=og:locale content=en><meta data-rh=true name=docusaurus_locale content=en><meta data-rh=true name=docsearch:language content=en><meta data-rh=true property=og:image content=https://reactnative.dev/img/logo-share.png><meta data-rh=true name=twitter:card content=summary_large_image><meta data-rh=true name=twitter:image content=https://reactnative.dev/img/logo-share.png><meta data-rh=true name=twitter:site content=@reactnative><meta data-rh=true name=docusaurus_version content=0.79><meta data-rh=true name=docusaurus_tag content=docs-default-0.79><meta data-rh=true name=docsearch:version content=0.79><meta data-rh=true name=docsearch:docusaurus_tag content=docs-default-0.79><meta data-rh=true property=og:title content="Optimizing JavaScript loading · React Native"><meta data-rh=true name=description content="Parsing and running JavaScript code requires memory and time. Because of this, as your app grows, it's often useful to delay loading code until it's needed for the first time. React Native comes with some standard optimizations that are on by default, and there are techniques you can adopt in your own code to help React load your app more efficiently. There are also some advanced automatic optimizations (with their own tradeoffs) that are suitable for very large apps."><meta data-rh=true property=og:description content="Parsing and running JavaScript code requires memory and time. Because of this, as your app grows, it's often useful to delay loading code until it's needed for the first time. React Native comes with some standard optimizations that are on by default, and there are techniques you can adopt in your own code to help React load your app more efficiently. There are also some advanced automatic optimizations (with their own tradeoffs) that are suitable for very large apps."><link data-rh=true rel=icon href=/img/favicon.ico><link data-rh=true rel=canonical href=https://reactnative.dev/docs/optimizing-javascript-loading><link data-rh=true rel=alternate href=https://reactnative.dev/docs/optimizing-javascript-loading hreflang=en><link data-rh=true rel=alternate href=https://reactnative.dev/docs/optimizing-javascript-loading hreflang=x-default><link data-rh=true rel=preconnect href=https://8TDSE0OHGQ-dsn.algolia.net crossorigin=anonymous><link rel=alternate type=application/rss+xml href=/blog/rss.xml title="React Native RSS Feed"><link rel=alternate type=application/atom+xml href=/blog/atom.xml title="React Native Atom Feed"><link rel=alternate type=application/json href=/blog/feed.json title="React Native JSON Feed"><link rel=preconnect href=https://www.google-analytics.com><script>window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)},ga.l=+new Date,ga("create","UA-41298772-2","auto"),ga("send","pageview")</script><script async src=https://www.google-analytics.com/analytics.js></script><link rel=preconnect href=https://www.google-analytics.com><link rel=preconnect href=https://www.googletagmanager.com><script async src="https://www.googletagmanager.com/gtag/js?id=G-58L13S6BDP"></script><script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","G-58L13S6BDP",{})</script><link rel=search type=application/opensearchdescription+xml title="React Native" href=/opensearch.xml><link rel=icon href=/img/pwa/manifest-icon-512.png><link rel=manifest href=/manifest.json><meta name=theme-color content=#20232a><meta name=apple-mobile-web-app-capable content=yes><meta name=apple-mobile-web-app-status-bar-style content=#20232a><link rel=apple-touch-icon href=/img/pwa/manifest-icon-512.png><link rel=mask-icon href=/img/pwa/manifest-icon-512.png color=#06bcee><meta name=msapplication-TileImage href=/img/pwa/manifest-icon-512.png><meta name=msapplication-TileColor content=#20232a><script src=https://cdn.jsdelivr.net/npm/focus-visible@5.2.0/dist/focus-visible.min.js defer></script><script src=https://widget.surveymonkey.com/collect/website/js/tRaiETqnLgj758hTBazgd8ryO5qrZo8Exadq9qmt1wtm4_2FdZGEAKHDFEt_2BBlwwM4.js defer></script><script src=https://snack.expo.dev/embed.js defer></script><script src=https://platform.twitter.com/widgets.js async></script><link rel=stylesheet href=/assets/css/styles.883cb042.css><script src=/assets/js/runtime~main.8ac1e6f0.js defer></script><script src=/assets/js/main.341783f5.js defer></script><body class=navigation-with-keyboard><svg xmlns=http://www.w3.org/2000/svg style="display: none;"><defs> 2<symbol id=theme-svg-external-link viewBox="0 0 24 24"><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></symbol> 3</defs></svg> 4<script>!function(){var t=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();document.documentElement.setAttribute("data-theme",t||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light")),document.documentElement.setAttribute("data-theme-choice",t||"system")}(),function(){try{for(var[t,e]of new URLSearchParams(window.location.search).entries())if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}(),document.documentElement.setAttribute("data-announcement-bar-initially-dismissed",function(){try{return"true"===localStorage.getItem("docusaurus.announcement.dismiss")}catch(t){}return!1}())</script><div id=__docusaurus><div role=region aria-label="Skip to main content"><a class=skipToContent_oPtH href=#__docusaurus_skipToContent_fallback>Skip to main content</a></div><div class="theme-announcement-bar announcementBar_zJRd" style=background-color:#20232a;color:#fff role=banner><div class="content_bSb_ announcementBarContent_t7IR">Join us for React Conf on Oct 7-8. <a target=_blank rel="noopener noreferrer" href=https://conf.react.dev>Learn more</a>.</div></div><nav aria-label=Main class="theme-layout-navbar navbar navbar--fixed-top navbar--dark"><div class=navbar__inner><div class="theme-layout-navbar-left navbar__items"><button aria-label="Toggle navigation bar" aria-expanded=false class="navbar__toggle clean-btn" type=button><svg width=30 height=30 viewBox="0 0 30 30" aria-hidden=true><path stroke=currentColor stroke-linecap=round stroke-miterlimit=10 stroke-width=2 d="M4 7h22M4 15h22M4 23h22"/></svg></button><a class=navbar__brand href=/><div class=navbar__logo><img src=/img/header_logo.svg alt="React Native" class="themedComponent_siVc themedComponent--light_hHel"><img src=/img/header_logo.svg alt="React Native" class="themedComponent_siVc themedComponent--dark_yETr"></div><b class="navbar__title text--truncate">React Native</b></a><div class="navbar__item dropdown dropdown--hoverable"><a class=navbar__link aria-haspopup=true aria-expanded=false role=button href=/docs/optimizing-javascript-loading>0.79</a><ul class=dropdown__menu><li><a class=dropdown__link href=/docs/next/optimizing-javascript-loading>Next</a><li><a aria-current=page class="dropdown__link dropdown__link--active" href=/docs/optimizing-javascript-loading>0.79</a><li><a class=dropdown__link href=/docs/0.78/optimizing-javascript-loading>0.78</a><li><a class=dropdown__link href=/docs/0.77/optimizing-javascript-loading>0.77</a><li><a class=dropdown__link href=/docs/0.76/optimizing-javascript-loading>0.76</a><li><a class=dropdown__link href=/docs/0.75/optimizing-javascript-loading>0.75</a><li><a class=dropdown__link href=/docs/0.74/optimizing-javascript-loading>0.74</a><li><a class=dropdown__link href=/docs/0.73/getting-started>0.73</a><li><a class=dropdown__link href=/docs/0.72/getting-started>0.72</a><li><a class=dropdown__link href=/docs/0.71/getting-started>0.71</a><li><a class=dropdown__link href=/docs/0.70/getting-started>0.70</a><li><a class=dropdown__link href=/versions>All versions</a></ul></div></div><div class="theme-layout-navbar-right navbar__items navbar__items--right"><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href=# aria-haspopup=true aria-expanded=false role=button class=navbar__link>Development</a><ul class=dropdown__menu><li><a aria-current=page class="dropdown__link dropdown__link--active" href=/docs/getting-started>Guides</a><li><a class=dropdown__link href=/docs/components-and-apis>Components</a><li><a class=dropdown__link href=/docs/accessibilityinfo>APIs</a><li><a class=dropdown__link href=/architecture/overview>Architecture</a></ul></div><a class="navbar__item navbar__link" href=/contributing/overview>Contributing</a><a class="navbar__item navbar__link" href=/community/overview>Community</a><a class="navbar__item navbar__link" href=/showcase>Showcase</a><a class="navbar__item navbar__link" href=/blog>Blog</a><a href=https://github.com/facebook/react-native target=_blank rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="toggle_ki11 colorModeToggle_Hewu"><button class="clean-btn toggleButton_MMFG toggleButtonDisabled_Uw7m darkNavbarColorModeToggle_m8pZ" type=button disabled title="system mode" aria-label="Switch between dark and light mode (currently system mode)"><svg viewBox="0 0 24 24" width=24 height=24 aria-hidden=true class="toggleIcon_k9hJ lightToggleIcon_lgto"><path fill=currentColor d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"/></svg><svg viewBox="0 0 24 24" width=24 height=24 aria-hidden=true class="toggleIcon_k9hJ darkToggleIcon_U96C"><path fill=currentColor d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"/></svg><svg viewBox="0 0 24 24" width=24 height=24 aria-hidden=true class="toggleIcon_k9hJ systemToggleIcon_E5c0"><path fill=currentColor d="m12 21c4.971 0 9-4.029 9-9s-4.029-9-9-9-9 4.029-9 9 4.029 9 9 9zm4.95-13.95c1.313 1.313 2.05 3.093 2.05 4.95s-0.738 3.637-2.05 4.95c-1.313 1.313-3.093 2.05-4.95 2.05v-14c1.857 0 3.637 0.737 4.95 2.05z"/></svg></button></div><div class=navbarSearchContainer_bzqh><button type=button class="DocSearch DocSearch-Button" aria-label="Search (Command+K)"><span class=DocSearch-Button-Container><svg width=20 height=20 class=DocSearch-Search-Icon viewBox="0 0 20 20" aria-hidden=true><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke=currentColor fill=none fill-rule=evenodd stroke-linecap=round stroke-linejoin=round /></svg><span class=DocSearch-Button-Placeholder>Search</span></span><span class=DocSearch-Button-Keys></span></button></div></div></div><div role=presentation class=navbar-sidebar__backdrop></div></nav><div id=__docusaurus_skipToContent_fallback class="theme-layout-main main-wrapper mainWrapper_MB5r"><div class=docsWrapper__sE8><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_iEvu" type=button></button><div class=docRoot_DfVB><aside class="theme-doc-sidebar-container docSidebarContainer_c7NB"><div class=sidebarViewport_KYo0><div class=sidebar_CUen><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_jmj1 menuWithAnnouncementBar_YufC"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false href=/docs/getting-started>The Basics</a></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false href=/docs/environment-setup>Environment setup</a></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false href=/docs/running-on-device>Workflow</a></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false href=/docs/style>UI & Interaction</a></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false href=/docs/debugging>Debugging</a></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false href=/docs/testing-overview>Testing</a></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret menu__link--active" role=button aria-expanded=true href=/docs/performance>Performance</a></div><ul class=menu__list><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/performance>Performance Overview</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/build-speed>Speeding up your Build phase</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/optimizing-flatlist-configuration>Optimizing Flatlist Configuration</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link menu__link--active" aria-current=page tabindex=0 href=/docs/optimizing-javascript-loading>Optimizing JavaScript loading</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/profiling>Profiling</a></ul><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false href=/docs/javascript-environment>JavaScript Runtime</a></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false href=/docs/the-new-architecture/what-is-codegen>Codegen</a></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false href=/docs/native-platform>Native Development</a></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false href=/docs/headless-js-android>Android and iOS guides</a></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false href=/docs/legacy/native-modules-intro>Legacy Architecture</a></div></ul></nav></div></div></aside><main class=docMainContainer_a9sJ><div class="container padding-top--md padding-bottom--lg"><div class=row><div class="col docItemCol_Qr34"><div class=docItemContainer_tjFy><article><div class="tocCollapsible_wXna theme-doc-toc-mobile tocMobile_Ojys"><button type=button class="clean-btn tocCollapsibleButton_iI2p">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1>Optimizing JavaScript loading</h1></header><p>Parsing and running JavaScript code requires memory and time. Because of this, as your app grows, it's often useful to delay loading code until it's needed for the first time. React Native comes with some standard optimizations that are on by default, and there are techniques you can adopt in your own code to help React load your app more efficiently. There are also some advanced automatic optimizations (with their own tradeoffs) that are suitable for very large apps.</p> 5<h2 class="anchor anchorWithStickyNavbar_JmGV" id=recommended-use-hermes>Recommended: Use Hermes<a href=#recommended-use-hermes class=hash-link aria-label="Direct link to Recommended: Use Hermes" title="Direct link to Recommended: Use Hermes">​</a></h2> 6<p>Hermes is the default engine for new React Native apps, and is highly optimized for efficient code loading. In release builds, JavaScript code is fully compiled to bytecode ahead of time. Bytecode is loaded to memory on-demand and does not need to be parsed like plain JavaScript does.</p> 7<div class="theme-admonition theme-admonition-info admonition_WCGJ alert alert--info"><div class=admonitionHeading_GCBg><span class=admonitionIcon_L39b><svg viewBox="0 0 14 16"><path fill-rule=evenodd d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"/></svg></span>info</div><div class=admonitionContent_pbrs><p>Read more about using Hermes in React Native <a href=/docs/hermes>here</a>.</div></div> 8<h2 class="anchor anchorWithStickyNavbar_JmGV" id=recommended-lazy-load-large-components>Recommended: Lazy-load large components<a href=#recommended-lazy-load-large-components class=hash-link aria-label="Direct link to Recommended: Lazy-load large components" title="Direct link to Recommended: Lazy-load large components">​</a></h2> 9<p>If a component with a lot of code/dependencies is not likely to be used when initially rendering your app, you can use React's <a href=https://react.dev/reference/react/lazy target=_blank rel="noopener noreferrer"><code>lazy</code></a> API to defer loading its code until it's rendered for the first time. Typically, you should consider lazy-loading screen-level components in your app, so that adding new screens to your app does not increase its startup time.</p> 10<div class="theme-admonition theme-admonition-info admonition_WCGJ alert alert--info"><div class=admonitionHeading_GCBg><span class=admonitionIcon_L39b><svg viewBox="0 0 14 16"><path fill-rule=evenodd d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"/></svg></span>info</div><div class=admonitionContent_pbrs><p>Read more about <a href=https://react.dev/reference/react/lazy#suspense-for-code-splitting target=_blank rel="noopener noreferrer">lazy-loading components with Suspense 11</a>, including code examples, in React's documentation.</div></div> 12<h3 class="anchor anchorWithStickyNavbar_JmGV" id=tip-avoid-module-side-effects>Tip: Avoid module side effects<a href=#tip-avoid-module-side-effects class=hash-link aria-label="Direct link to Tip: Avoid module side effects" title="Direct link to Tip: Avoid module side effects">​</a></h3> 13<p>Lazy-loading components can change the behavior of your app if your component modules (or their dependencies) have <em>side effects</em>, such as modifying global variables or subscribing to events outside of a component. Most modules in React apps should not have any side effects.</p> 14<div class="language-tsx codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>SideEffects.tsx</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-tsx codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token keyword" style=color:#c5a5c5>import</span><span class="token plain"> </span><span class="token imports maybe-class-name">Logger</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>from</span><span class="token plain"> </span><span class="token string" style=color:#8dc891>'./utils/Logger'</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token comment" style=color:#93a1a1>// 🚩 🚩 🚩 Side effect! This must be executed before React can even begin to</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token comment" style=color:#93a1a1>// render the SplashScreen component, and can unexpectedly break code elsewhere</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token comment" style=color:#93a1a1>// in your app if you later decide to lazy-load SplashScreen.</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain">global</span><span class="token punctuation" style=color:#657b83>.</span><span class="token property-access">logger</span><span class="token plain"> </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>new</span><span class="token plain"> </span><span class="token class-name" style=color:#fac863>Logger</span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>export</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>function</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>SplashScreen</span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token comment" style=color:#93a1a1>// ...</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token punctuation" style=color:#657b83>}</span><br></span></code></pre></div></div> 15<h2 class="anchor anchorWithStickyNavbar_JmGV" id=advanced-call-require-inline>Advanced: Call <code>require</code> inline<a href=#advanced-call-require-inline class=hash-link aria-label="Direct link to advanced-call-require-inline" title="Direct link to advanced-call-require-inline">​</a></h2> 16<p>Sometimes you may want to defer loading some code until you use it for the first time, without using <code>lazy</code> or an asynchronous <code>import()</code>. You can do this by using the <a href=https://metrobundler.dev/docs/module-api/#require target=_blank rel="noopener noreferrer"><code>require()</code></a> function where you would otherwise use a static <code>import</code> at the top of the file.</p> 17<div class="language-tsx codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>VeryExpensive.tsx</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-tsx codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token keyword" style=color:#c5a5c5>import</span><span class="token plain"> </span><span class="token imports punctuation" style=color:#657b83>{</span><span class="token imports maybe-class-name">Component</span><span class="token imports punctuation" style=color:#657b83>}</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>from</span><span class="token plain"> </span><span class="token string" style=color:#8dc891>'react'</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>import</span><span class="token plain"> </span><span class="token imports punctuation" style=color:#657b83>{</span><span class="token imports maybe-class-name">Text</span><span class="token imports punctuation" style=color:#657b83>}</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>from</span><span class="token plain"> </span><span class="token string" style=color:#8dc891>'react-native'</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token comment" style=color:#93a1a1>// ... import some very expensive modules</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>export</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>default</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>function</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>VeryExpensive</span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token comment" style=color:#93a1a1>// ... lots and lots of rendering logic</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>return</span><span class="token plain"> </span><span class="token tag punctuation" style=color:#657b83>&lt;</span><span class="token tag class-name" style=color:#fac863>Text</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token plain-text">Very Expensive Component</span><span class="token tag punctuation" style=color:#657b83>&lt;/</span><span class="token tag class-name" style=color:#fac863>Text</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token punctuation" style=color:#657b83>}</span><br></span></code></pre></div></div> 18<div class="language-tsx codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>Optimized.tsx</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-tsx codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token keyword" style=color:#c5a5c5>import</span><span class="token plain"> </span><span class="token imports punctuation" style=color:#657b83>{</span><span class="token imports">useCallback</span><span class="token imports punctuation" style=color:#657b83>,</span><span class="token imports"> useState</span><span class="token imports punctuation" style=color:#657b83>}</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>from</span><span class="token plain"> </span><span class="token string" style=color:#8dc891>'react'</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>import</span><span class="token plain"> </span><span class="token imports punctuation" style=color:#657b83>{</span><span class="token imports maybe-class-name">TouchableOpacity</span><span class="token imports punctuation" style=color:#657b83>,</span><span class="token imports"> </span><span class="token imports maybe-class-name">View</span><span class="token imports punctuation" style=color:#657b83>,</span><span class="token imports"> </span><span class="token imports maybe-class-name">Text</span><span class="token imports punctuation" style=color:#657b83>}</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>from</span><span class="token plain"> </span><span class="token string" style=color:#8dc891>'react-native'</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token comment" style=color:#93a1a1>// Usually we would write a static import:</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token comment" style=color:#93a1a1>// import VeryExpensive from './VeryExpensive';</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>let</span><span class="token plain"> </span><span class="token maybe-class-name">VeryExpensive</span><span class="token plain"> </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>null</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>export</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>default</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>function</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>Optimize</span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>const</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>[</span><span class="token plain">needsExpensive</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> setNeedsExpensive</span><span class="token punctuation" style=color:#657b83>]</span><span class="token plain"> </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>useState</span><span class="token punctuation" style=color:#657b83>(</span><span class="token boolean" style=color:#ff8b50>false</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>const</span><span class="token plain"> didPress </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>useCallback</span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain"> </span><span class="token arrow operator" style=color:#fc929e>=></span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>if</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>(</span><span class="token maybe-class-name">VeryExpensive</span><span class="token plain"> </span><span class="token operator" style=color:#fc929e>==</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>null</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token maybe-class-name">VeryExpensive</span><span class="token plain"> </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>require</span><span class="token punctuation" style=color:#657b83>(</span><span class="token string" style=color:#8dc891>'./VeryExpensive'</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>.</span><span class="token property-access">default</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token function" style=color:#79b6f2>setNeedsExpensive</span><span class="token punctuation" style=color:#657b83>(</span><span class="token boolean" style=color:#ff8b50>true</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>}</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>[</span><span class="token punctuation" style=color:#657b83>]</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>return</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token tag punctuation" style=color:#657b83>&lt;</span><span class="token tag class-name" style=color:#fac863>View</span><span class="token tag" style=color:#fc929e> </span><span class="token tag attr-name" style=color:#c5a5c5>style</span><span class="token tag script language-javascript script-punctuation punctuation" style=color:#657b83>=</span><span class="token tag script language-javascript punctuation" style=color:#657b83>{</span><span class="token tag script language-javascript punctuation" style=color:#657b83>{</span><span class="token tag script language-javascript" style=color:#fc929e>marginTop</span><span class="token tag script language-javascript operator" style=color:#fc929e>:</span><span class="token tag script language-javascript" style=color:#fc929e> </span><span class="token tag script language-javascript number" style=color:#5a9bcf>20</span><span class="token tag script language-javascript punctuation" style=color:#657b83>}</span><span class="token tag script language-javascript punctuation" style=color:#657b83>}</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token plain-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#657b83>&lt;</span><span class="token tag class-name" style=color:#fac863>TouchableOpacity</span><span class="token tag" style=color:#fc929e> </span><span class="token tag attr-name" style=color:#c5a5c5>onPress</span><span class="token tag script language-javascript script-punctuation punctuation" style=color:#657b83>=</span><span class="token tag script language-javascript punctuation" style=color:#657b83>{</span><span class="token tag script language-javascript" style=color:#fc929e>didPress</span><span class="token tag script language-javascript punctuation" style=color:#657b83>}</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token plain-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#657b83>&lt;</span><span class="token tag class-name" style=color:#fac863>Text</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token plain-text">Load</span><span class="token tag punctuation" style=color:#657b83>&lt;/</span><span class="token tag class-name" style=color:#fac863>Text</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token plain-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#657b83>&lt;/</span><span class="token tag class-name" style=color:#fac863>TouchableOpacity</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token plain-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain">needsExpensive </span><span class="token operator" style=color:#fc929e>?</span><span class="token plain"> </span><span class="token tag punctuation" style=color:#657b83>&lt;</span><span class="token tag class-name" style=color:#fac863>VeryExpensive</span><span class="token tag" style=color:#fc929e> </span><span class="token tag punctuation" style=color:#657b83>/></span><span class="token plain"> </span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>null</span><span class="token punctuation" style=color:#657b83>}</span><span class="token plain-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#657b83>&lt;/</span><span class="token tag class-name" style=color:#fac863>View</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token punctuation" style=color:#657b83>}</span><br></span></code></pre></div></div> 19<h2 class="anchor anchorWithStickyNavbar_JmGV" id=advanced-automatically-inline-require-calls>Advanced: Automatically inline <code>require</code> calls<a href=#advanced-automatically-inline-require-calls class=hash-link aria-label="Direct link to advanced-automatically-inline-require-calls" title="Direct link to advanced-automatically-inline-require-calls">​</a></h2> 20<p>If you use the React Native CLI to build your app, <code>require</code> calls (but not <code>import</code>s) will automatically be inlined for you, both in your code and inside any third-party packages (<code>node_modules</code>) you use.</p> 21<div class="language-tsx codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>tsx</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-tsx codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token keyword" style=color:#c5a5c5>import</span><span class="token plain"> </span><span class="token imports punctuation" style=color:#657b83>{</span><span class="token imports">useCallback</span><span class="token imports punctuation" style=color:#657b83>,</span><span class="token imports"> useState</span><span class="token imports punctuation" style=color:#657b83>}</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>from</span><span class="token plain"> </span><span class="token string" style=color:#8dc891>'react'</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>import</span><span class="token plain"> </span><span class="token imports punctuation" style=color:#657b83>{</span><span class="token imports maybe-class-name">TouchableOpacity</span><span class="token imports punctuation" style=color:#657b83>,</span><span class="token imports"> </span><span class="token imports maybe-class-name">View</span><span class="token imports punctuation" style=color:#657b83>,</span><span class="token imports"> </span><span class="token imports maybe-class-name">Text</span><span class="token imports punctuation" style=color:#657b83>}</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>from</span><span class="token plain"> </span><span class="token string" style=color:#8dc891>'react-native'</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token comment" style=color:#93a1a1>// This top-level require call will be evaluated lazily as part of the component below.</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>const</span><span class="token plain"> </span><span class="token maybe-class-name">VeryExpensive</span><span class="token plain"> </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>require</span><span class="token punctuation" style=color:#657b83>(</span><span class="token string" style=color:#8dc891>'./VeryExpensive'</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>.</span><span class="token property-access">default</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>export</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>default</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>function</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>Optimize</span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>const</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>[</span><span class="token plain">needsExpensive</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> setNeedsExpensive</span><span class="token punctuation" style=color:#657b83>]</span><span class="token plain"> </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>useState</span><span class="token punctuation" style=color:#657b83>(</span><span class="token boolean" style=color:#ff8b50>false</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>const</span><span class="token plain"> didPress </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>useCallback</span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain"> </span><span class="token arrow operator" style=color:#fc929e>=></span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token function" style=color:#79b6f2>setNeedsExpensive</span><span class="token punctuation" style=color:#657b83>(</span><span class="token boolean" style=color:#ff8b50>true</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>}</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>[</span><span class="token punctuation" style=color:#657b83>]</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>return</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token tag punctuation" style=color:#657b83>&lt;</span><span class="token tag class-name" style=color:#fac863>View</span><span class="token tag" style=color:#fc929e> </span><span class="token tag attr-name" style=color:#c5a5c5>style</span><span class="token tag script language-javascript script-punctuation punctuation" style=color:#657b83>=</span><span class="token tag script language-javascript punctuation" style=color:#657b83>{</span><span class="token tag script language-javascript punctuation" style=color:#657b83>{</span><span class="token tag script language-javascript" style=color:#fc929e>marginTop</span><span class="token tag script language-javascript operator" style=color:#fc929e>:</span><span class="token tag script language-javascript" style=color:#fc929e> </span><span class="token tag script language-javascript number" style=color:#5a9bcf>20</span><span class="token tag script language-javascript punctuation" style=color:#657b83>}</span><span class="token tag script language-javascript punctuation" style=color:#657b83>}</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token plain-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#657b83>&lt;</span><span class="token tag class-name" style=color:#fac863>TouchableOpacity</span><span class="token tag" style=color:#fc929e> </span><span class="token tag attr-name" style=color:#c5a5c5>onPress</span><span class="token tag script language-javascript script-punctuation punctuation" style=color:#657b83>=</span><span class="token tag script language-javascript punctuation" style=color:#657b83>{</span><span class="token tag script language-javascript" style=color:#fc929e>didPress</span><span class="token tag script language-javascript punctuation" style=color:#657b83>}</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token plain-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#657b83>&lt;</span><span class="token tag class-name" style=color:#fac863>Text</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token plain-text">Load</span><span class="token tag punctuation" style=color:#657b83>&lt;/</span><span class="token tag class-name" style=color:#fac863>Text</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token plain-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#657b83>&lt;/</span><span class="token tag class-name" style=color:#fac863>TouchableOpacity</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token plain-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain">needsExpensive </span><span class="token operator" style=color:#fc929e>?</span><span class="token plain"> </span><span class="token tag punctuation" style=color:#657b83>&lt;</span><span class="token tag class-name" style=color:#fac863>VeryExpensive</span><span class="token tag" style=color:#fc929e> </span><span class="token tag punctuation" style=color:#657b83>/></span><span class="token plain"> </span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>null</span><span class="token punctuation" style=color:#657b83>}</span><span class="token plain-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#657b83>&lt;/</span><span class="token tag class-name" style=color:#fac863>View</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token punctuation" style=color:#657b83>}</span><br></span></code></pre></div></div> 22<div class="theme-admonition theme-admonition-info admonition_WCGJ alert alert--info"><div class=admonitionHeading_GCBg><span class=admonitionIcon_L39b><svg viewBox="0 0 14 16"><path fill-rule=evenodd d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"/></svg></span>info</div><div class=admonitionContent_pbrs><p>Some React Native frameworks disable this behavior. In particular, in Expo projects, <code>require</code> calls are not inlined by default. You can enable this optimization by editing your project's Metro config and setting <code>inlineRequires: true</code> in <a href=https://metrobundler.dev/docs/configuration#gettransformoptions target=_blank rel="noopener noreferrer"><code>getTransformOptions</code></a>.</div></div> 23<h3 class="anchor anchorWithStickyNavbar_JmGV" id=pitfalls-of-inline-requires>Pitfalls of inline <code>require</code>s<a href=#pitfalls-of-inline-requires class=hash-link aria-label="Direct link to pitfalls-of-inline-requires" title="Direct link to pitfalls-of-inline-requires">​</a></h3> 24<p>Inlining <code>require</code> calls changes the order in which modules are evaluated, and can even cause some modules to <em>never</em> be evaluated. This is usually safe to do automatically, because JavaScript modules are often written to be side-effect-free.</p> 25<p>If one of your modules does have side effects - for example, if it initializes some logging mechanism, or patches a global API used by the rest of your code - then you might see unexpected behavior or even crashes. In those cases, you may want to exclude certain modules from this optimization, or disable it entirely.</p> 26<p>To <strong>disable all automatic inlining of <code>require</code> calls:</strong></p> 27<p>Update your <code>metro.config.js</code> to set the <code>inlineRequires</code> transformer option to <code>false</code>:</p> 28<div class="language-tsx codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>metro.config.js</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-tsx codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token plain">module</span><span class="token punctuation" style=color:#657b83>.</span><span class="token property-access">exports</span><span class="token plain"> </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> transformer</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>async</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>getTransformOptions</span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>return</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> transform</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> inlineRequires</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token boolean" style=color:#ff8b50>false</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>}</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>}</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>}</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>}</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token punctuation" style=color:#657b83>}</span><span class="token punctuation" style=color:#657b83>;</span><br></span></code></pre></div></div> 29<p>To only <strong>exclude certain modules from <code>require</code> inlining:</strong></p> 30<p>There are two relevant transformer options: <code>inlineRequires.blockList</code> and <code>nonInlinedRequires</code>. See the code snippet for examples of how to use each one.</p> 31<div class="language-tsx codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>metro.config.js</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-tsx codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token plain">module</span><span class="token punctuation" style=color:#657b83>.</span><span class="token property-access">exports</span><span class="token plain"> </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> transformer</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>async</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>getTransformOptions</span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>return</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> transform</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> inlineRequires</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> blockList</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token comment" style=color:#93a1a1>// require() calls in `DoNotInlineHere.js` will not be inlined.</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>[</span><span class="token keyword" style=color:#c5a5c5>require</span><span class="token punctuation" style=color:#657b83>.</span><span class="token method function property-access" style=color:#79b6f2>resolve</span><span class="token punctuation" style=color:#657b83>(</span><span class="token string" style=color:#8dc891>'./src/DoNotInlineHere.js'</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>]</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token boolean" style=color:#ff8b50>true</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token comment" style=color:#93a1a1>// require() calls anywhere else will be inlined, unless they</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token comment" style=color:#93a1a1>// match any entry nonInlinedRequires (see below).</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>}</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>}</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> nonInlinedRequires</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>[</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token comment" style=color:#93a1a1>// require('react') calls will not be inlined anywhere</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token string" style=color:#8dc891>'react'</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>]</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>}</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>}</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>}</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>}</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token punctuation" style=color:#657b83>}</span><span class="token punctuation" style=color:#657b83>;</span><br></span></code></pre></div></div> 32<p>See the documentation for <a href=https://metrobundler.dev/docs/configuration#gettransformoptions target=_blank rel="noopener noreferrer"><code>getTransformOptions</code> in Metro</a> for more details on setting up and fine-tuning your inline <code>require</code>s.</p> 33<h2 class="anchor anchorWithStickyNavbar_JmGV" id=advanced-use-random-access-module-bundles-non-hermes>Advanced: Use random access module bundles (non-Hermes)<a href=#advanced-use-random-access-module-bundles-non-hermes class=hash-link aria-label="Direct link to Advanced: Use random access module bundles (non-Hermes)" title="Direct link to Advanced: Use random access module bundles (non-Hermes)">​</a></h2> 34<div class="theme-admonition theme-admonition-info admonition_WCGJ alert alert--info"><div class=admonitionHeading_GCBg><span class=admonitionIcon_L39b><svg viewBox="0 0 14 16"><path fill-rule=evenodd d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"/></svg></span>info</div><div class=admonitionContent_pbrs><p><strong>Not supported when <a href=#use-hermes>using Hermes</a>.</strong> Hermes bytecode is not compatible with the RAM bundle format, and provides the same (or better) performance in all use cases.</div></div> 35<p>Random access module bundles (also known as RAM bundles) work in conjunction with the techniques mentioned above to limit the amount of JavaScript code that needs to be parsed and loaded into memory. Each module is stored as a separate string (or file) which is only parsed when the module needs to be executed.</p> 36<p>RAM bundles may be physically split into separate files, or they may use the <em>indexed</em> format, consisting of a lookup table of multiple modules in a single file.</p> 37<div class="tabs-container tabList_J5MA"><ul role=tablist aria-orientation=horizontal class=tabs><li role=tab tabindex=0 aria-selected=true class="tabs__item tabItem_l0OV tabs__item--active">Android<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_l0OV">iOS</ul><div class=margin-top--md><div role=tabpanel class=tabItem_wHwb><p>On Android enable the RAM format by editing your <code>android/app/build.gradle</code> file. Before the line <code>apply from: "../../node_modules/react-native/react.gradle"</code> add or amend the <code>project.ext.react</code> block:<div class="language-tsx codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-tsx codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token plain">project</span><span class="token punctuation" style=color:#657b83>.</span><span class="token property-access">ext</span><span class="token punctuation" style=color:#657b83>.</span><span class="token property-access">react</span><span class="token plain"> </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>[</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> bundleCommand</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token string" style=color:#8dc891>"ram-bundle"</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token punctuation" style=color:#657b83>]</span><br></span></code></pre></div></div><p>Use the following lines on Android if you want to use a single indexed file:<div class="language-tsx codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-tsx codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token plain">project</span><span class="token punctuation" style=color:#657b83>.</span><span class="token property-access">ext</span><span class="token punctuation" style=color:#657b83>.</span><span class="token property-access">react</span><span class="token plain"> </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>[</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> bundleCommand</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token string" style=color:#8dc891>"ram-bundle"</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> extraPackagerArgs</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>[</span><span class="token string" style=color:#8dc891>"--indexed-ram-bundle"</span><span class="token punctuation" style=color:#657b83>]</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token punctuation" style=color:#657b83>]</span><br></span></code></pre></div></div></div><div role=tabpanel class=tabItem_wHwb hidden><p>On iOS, RAM bundles are always indexed ( = single file).<p>Enable the RAM format in Xcode by editing the build phase "Bundle React Native code and images". Before <code>../node_modules/react-native/scripts/react-native-xcode.sh</code> add <code>export BUNDLE_COMMAND="ram-bundle"</code>:<div class="language-tsx codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-tsx codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token keyword" style=color:#c5a5c5>export</span><span class="token plain"> </span><span class="token constant" style=color:#5a9bcf>BUNDLE_COMMAND</span><span class="token operator" style=color:#fc929e>=</span><span class="token string" style=color:#8dc891>"ram-bundle"</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>export</span><span class="token plain"> </span><span class="token constant" style=color:#5a9bcf>NODE_BINARY</span><span class="token operator" style=color:#fc929e>=</span><span class="token plain">node</span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token punctuation" style=color:#657b83>.</span><span class="token punctuation" style=color:#657b83>.</span><span class="token operator" style=color:#fc929e>/</span><span class="token plain">node_modules</span><span class="token operator" style=color:#fc929e>/</span><span class="token plain">react</span><span class="token operator" style=color:#fc929e>-</span><span class="token plain">native</span><span class="token operator" style=color:#fc929e>/</span><span class="token plain">scripts</span><span class="token operator" style=color:#fc929e>/</span><span class="token plain">react</span><span class="token operator" style=color:#fc929e>-</span><span class="token plain">native</span><span class="token operator" style=color:#fc929e>-</span><span class="token plain">xcode</span><span class="token punctuation" style=color:#657b83>.</span><span class="token property-access">sh</span><br></span></code></pre></div></div></div></div></div> 38<p>See the documentation for <a href=https://metrobundler.dev/docs/configuration#gettransformoptions target=_blank rel="noopener noreferrer"><code>getTransformOptions</code> in Metro</a> for more details on setting up and fine-tuning your RAM bundle build.</div><footer class="theme-doc-footer docusaurus-mt-lg"><div class="theme-doc-footer-edit-meta-row row"><div class=editButtons_t0bR><a href=https://github.com/facebook/react-native-website/edit/main/docs/optimizing-javascript-loading.md target=_blank rel="noopener noreferrer" class=theme-edit-this-page><svg fill=currentColor height=20 width=20 viewBox="0 0 40 40" class=iconEdit_bHB7 aria-hidden=true><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"/></g></svg>Edit page for next release</a><a href=https://github.com/facebook/react-native-website/edit/main/website/versioned_docs/version-0.79/optimizing-javascript-loading.md target=_blank rel="noopener noreferrer" class=theme-edit-this-page><svg fill=currentColor height=20 width=20 viewBox="0 0 40 40" class=iconEdit_bHB7 aria-hidden=true><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"/></g></svg>Edit page for current release</a></div><div class=lastUpdated_VsjB><span class=theme-last-updated>Last updated<!-- --> on <b><time datetime=2025-04-14T14:14:17.000Z itemprop=dateModified>Apr 14, 2025</time></b></span></div></div></footer></article><nav class="docusaurus-mt-lg pagination-nav" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href=/docs/optimizing-flatlist-configuration><div class=pagination-nav__sublabel>Previous</div><div class=pagination-nav__label>Optimizing Flatlist Configuration</div></a><a class="pagination-nav__link pagination-nav__link--next" href=/docs/profiling><div class=pagination-nav__sublabel>Next</div><div class=pagination-nav__label>Profiling</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_XG6w thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href=#recommended-use-hermes class="table-of-contents__link toc-highlight">Recommended: Use Hermes</a><li><a href=#recommended-lazy-load-large-components class="table-of-contents__link toc-highlight">Recommended: Lazy-load large components</a><ul><li><a href=#tip-avoid-module-side-effects class="table-of-contents__link toc-highlight">Tip: Avoid module side effects</a></ul><li><a href=#advanced-call-require-inline class="table-of-contents__link toc-highlight">Advanced: Call <code>require</code> inline</a><li><a href=#advanced-automatically-inline-require-calls class="table-of-contents__link toc-highlight">Advanced: Automatically inline <code>require</code> calls</a><ul><li><a href=#pitfalls-of-inline-requires class="table-of-contents__link toc-highlight">Pitfalls of inline <code>require</code>s</a></ul><li><a href=#advanced-use-random-access-module-bundles-non-hermes class="table-of-contents__link toc-highlight">Advanced: Use random access module bundles (non-Hermes)</a></ul></div></div></div></div></main></div></div></div><footer class="theme-layout-footer footer footer--dark"><div class="container container-fluid"><div class="row footer__links"><div class="theme-layout-footer-column col footer__col"><div class=footer__title>Develop</div><ul class="footer__items clean-list"><li class=footer__item><a class=footer__link-item href=/docs/getting-started>Guides</a><li class=footer__item><a class=footer__link-item href=/docs/components-and-apis>Components</a><li class=footer__item><a class=footer__link-item href=/docs/accessibilityinfo>APIs</a><li class=footer__item><a class=footer__link-item href=/architecture/overview>Architecture</a></ul></div><div class="theme-layout-footer-column col footer__col"><div class=footer__title>Participate</div><ul class="footer__items clean-list"><li class=footer__item><a class=footer__link-item href=/showcase>Showcase</a><li class=footer__item><a class=footer__link-item href=/contributing/overview>Contributing</a><li class=footer__item><a class=footer__link-item href=/community/overview>Community</a><li class=footer__item><a href=https://reactnative.directory/ target=_blank rel="noopener noreferrer" class=footer__link-item>Directory<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://stackoverflow.com/questions/tagged/react-native target=_blank rel="noopener noreferrer" class=footer__link-item>Stack Overflow<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a></ul></div><div class="theme-layout-footer-column col footer__col"><div class=footer__title>Find us</div><ul class="footer__items clean-list"><li class=footer__item><a class=footer__link-item href=/blog>Blog</a><li class=footer__item><a href=https://x.com/reactnative target=_blank rel="noopener noreferrer" class=footer__link-item>X<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://bsky.app/profile/reactnative.dev target=_blank rel="noopener noreferrer" class=footer__link-item>Bluesky<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://github.com/facebook/react-native target=_blank rel="noopener noreferrer" class=footer__link-item>GitHub<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a></ul></div><div class="theme-layout-footer-column col footer__col"><div class=footer__title>Explore More</div><ul class="footer__items clean-list"><li class=footer__item><a href=https://react.dev/ target=_blank rel="noopener noreferrer" class=footer__link-item>ReactJS<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://opensource.fb.com/legal/privacy/ target=_blank rel="noopener noreferrer" class=footer__link-item>Privacy Policy<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://opensource.fb.com/legal/terms/ target=_blank rel="noopener noreferrer" class=footer__link-item>Terms of Service<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a></ul></div></div><div class="footer__bottom text--center"><div class=margin-bottom--sm><a href=https://opensource.fb.com/ rel="noopener noreferrer" class=footerLogoLink_tutC><img src=/img/oss_logo.svg alt="Meta Open Source Logo" class="footer__logo themedComponent_siVc themedComponent--light_hHel"><img src=/img/oss_logo.svg alt="Meta Open Source Logo" class="footer__logo themedComponent_siVc themedComponent--dark_yETr"></a></div><div class=footer__copyright>Copyright © 2025 Meta Platforms, Inc.</div></div></div></footer></div>