CODEWITHSUNDEEP
androidiosreact-nativememory-management
Pablo Espantoso
Pablo Espantoso

Reputation: 416

Require & Memory Consumption

How does require("path/to/image") work?

For something like this:

export const images = {
   image1: require("path/to/image-1"),
   image2: require("path/to/image-2"),
   ...
};

<Image source={images.image1} />

When does the I/O operation to load the image happen? The moment it is declared in the require or when it is assigned to the Image component?

With I/O I mean also reading bytes from the image file available on the disk. I was trying to understand the consequence of doing <Image source={require("path/to/image-1")} /> vs. <Image source={images.image1} />. I wonder if the I/O (disk read) is already happening the moment the application starts i.e. even before the images are used in a specific screen.

Upvotes: 1

Views: 45

Answers (1)

Krasimir
Krasimir

Reputation: 13529

The actual pulling of the file happen when you import the file containing the definition of images. This is the time when the I/O happen. But that's how it works on the server (if you are server-side rendering this component). If you are doing this on the client path/to/image-1 and path/to/image-2 are probably already in your bundled JavaScript file so there is no I/O operation (or a http request).

P.S. The picture looks differently if you use dynamic imports but as far as I can see that's not the case.

P.S.S. Actually now when I see that you tagged your question with react-native I have to say that the things may look different there.

Upvotes: 1

Related Questions