Inline Requires: Defer JS Loading in React Native
Inline requires are just-in-time loading for code. Instead of loading everything at startup, you pull in modules only when needed, improving initial app speed. This is ideal for heavy components. The footgun: module side effects will execute later.
Why it exists
As a React Native app grows, its startup time can suffer. Parsing and executing all the app's JavaScript code upfront becomes a performance bottleneck. To keep the app responsive from launch, we need a way to load code only when it's actually needed.
The mental model
Think of an inline require as leaving a book on the shelf until you need to read a specific chapter. A standard import is like opening every book on your desk the moment you sit down. You trade the high upfront cost of loading everything for a small, deferred cost at the exact moment of use, improving initial app startup time.
How it works
Normally, import statements at the top of a file are processed when the module is first loaded. An inline require, such as const MyModule = require('./MyModule');, is placed inside a function or callback. The JavaScript engine only executes this line—and thus loads and parses the module—when that function is called. The React Native CLI build process can even automatically convert top-level require calls (but not import statements) into this lazy-loaded behavior.
When to use it
Use this advanced technique for large, expensive modules or components that are not needed for the initial screen render. It's an optimization for when React.lazy and Suspense are not a fit, or for when you need synchronous loading on-demand within a function. It is most effective in large apps with many screens or complex, isolated features.
When not to use it
Avoid this for small, critical modules needed at startup. More importantly, do not use it for modules with side effects that other parts of your app expect to have run at launch. If a module modifies a global variable or subscribes to a system event, lazy-loading it can lead to race conditions or broken logic. For UI components, React.lazy is often a better, more declarative choice.
One canonical example
To defer loading a 'VeryExpensive' component until a button is pressed, you would not import it at the top. Instead, inside the button's press handler, you check if the component has been loaded. If not, you call VeryExpensive = require('./VeryExpensive').default and store it in a variable, then update state to trigger a re-render that displays it. This ensures the code for 'VeryExpensive' is not part of the initial JavaScript payload.
Interview question
Which situation presents the greatest risk when implementing inline requires in a React Native application?
- a.Employing it for a module that is already being lazy-loaded using React.lazy and Suspense.
- b.Applying it to a small, frequently accessed utility module needed across many components.
- c.Using it for a module that performs side effects like modifying global variables or registering event listeners.Correct
- d.Deferring the loading of a large, non-critical UI component until a specific user interaction.
Why? this is the answer
The card warns that lazy-loading modules with side effects (e.g., modifying global state, subscribing to events) can cause 'race conditions or broken logic' because these effects won't execute at the expected startup time. Deferring large UI components (Option D) is a recommended use case, while Options B and D describe less optimal but not inherently risky scenarios.
Just read this? Test yourself on what you have been reading.
Read the original → reactnative.dev
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