Improving React Native startup time
systematic startup profiling.
enable Hermes for fast bytecode startup, shrink and lazy-load the JS bundle via inline requires and RAM bundles, and defer non-critical native init.
WHAT THIS TESTS This probes whether you can profile and prioritize, not just recite buzzwords. Startup is a system; a senior answer measures first and targets the dominant cost.
A GOOD ANSWER COVERS Area one is the JavaScript engine. Enabling Hermes precompiles JS to bytecode at build time, so the device skips parsing and runs a smaller memory footprint, usually the single biggest startup win. Area two is the JS bundle and module loading. Inline requires defer the evaluation of a module until it is first used, and lazy imports plus tools like RAM bundles ensure the first interactive screen only evaluates the code it needs rather than the whole app graph. Audit bundle size and remove heavy synchronous imports at the top level. Area three is native startup and main thread work: profile native module initialization, image and font preloading, the splash screen handoff, and any blocking synchronous calls during app launch, then defer non-critical work until after first paint.
COMMON WRONG ANSWERS Jumping straight to micro-optimizations without measuring. Assuming Hermes alone fixes everything. Blaming the bridge generically without naming inline requires, lazy loading, or native init deferral.
LIKELY FOLLOW-UPS How do inline requires actually change evaluation timing? How would you measure TTI reliably across cold and warm starts? What regressions can Hermes introduce?
ONE CONCRETE EXAMPLE You enable Hermes and capture a Hermes startup profile, finding a top-level import of a heavy charting library evaluated on launch though it is only used on a settings screen. You convert it to a lazy import behind navigation and turn on inline requires in the Metro config. Cold start TTI drops measurably, and you confirm with repeated cold-start timing markers rather than a single run.
Interview question
What is the primary effect of enabling inline requires in a React Native app?
- a.It defers a module's evaluation until the first time it is actually usedCorrect
- b.It removes unused exports from the bundle through tree shaking
- c.It moves all module loading onto a background thread automatically
- d.It compiles JavaScript to native machine code ahead of time
Why? this is the answer
Inline requires transform top-level imports so a module is evaluated lazily on first use, cutting startup work. It does not compile to machine code (that is closer to Hermes bytecode) nor perform tree shaking, which is a separate bundler concern.
Just read this? Test yourself on what you have been reading.
Read the original → reactnative.dev
- #react-native
- #performance
- #hermes
- #startup
- #profiling
Put your scrolling time to good use
Learn one idea, try a quiz and save useful cards for revision. Tezvyn makes it easy to learn and stay current in your tech field, a few minutes at a time.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on react-native — each one lists the topics its interview covers.
See open roles