Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Use Prefetch component to fetch images before they are needed in React 360

    Tomasz ŁakomyTomasz Łakomy
    reactReact
    ^16.3.2

    360/VR applications tend to have large images such as 360 panoramas.

    It might take a while to load them so the best approach might be to load all necessary images in the background so they are available as soon as user needs them.

    In this lesson we are going to learn how to use <Prefetch /> component to prefetch static assets.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Discuss

    Discuss

    Transcript

    Transcript

    Instructor: 0:00 We have a bit of a performance problem in our app because whenever we load the app we're going to get this 360 world image, which is around a megabyte. We're going to get all those images for their flags. If I were to click on the flag of Spain, only then I'm going to send the request to fetch this 360 panorama, which is around 2.3 megabytes. This can be tricky, especially on mobile.

    0:21 Ideally, what we would like to do is to be able to prefetch all those images in the background. Whenever I click on a flag, we are not going to send a request because this image is already going to be loaded.

    0:31 In order to do that, first import prefetch from React 360. We're going to import Fragment from React as well. Next, in the renderFlags method, we're going to wrap this VR button inside of a Fragment. We're going to copy this key to the Fragment as well. I'm going to render the prefetch component.

    0:49 Prefetch component takes a source, so I'm going to set the source to be asset panorama. When all those places are being rendered, I'm going to also prefetch the appropriate panorama per country. Right now, we have the desired effect. If I save and refresh that, we're going to see all those background images fetched in the background.

    1:09 Right now, we won't have to send an additional request whenever a user is going to click on a flag. Those images are going to be preloaded. Our app will have a better perceived performance.

    1:18 With that being said, sometimes we might not want to prefetch the images in the background because user might not decide to visit all the countries. It's up to you as a developer to decide whether you want to prefetch images or videos or not.