How to cache external images in components with ReactJS

Question

A little background: I am learning react since 1 or maybe 2 days, so I don't know the good or bad react patterns yet, but in this case I don't feel like I am doing wrong things.

Here is my little component for a header position

import * as React from "react";
import HeaderPosition from "../interfaces/HeaderPosition";

export default class HeaderPositionComponent extends React.Component<HeaderPosition> {
    constructor(props: HeaderPosition) {
        super(props);
    }

    render() {
        if(this.props.icon.length > 0) {
            return (
                <a className="py-2 d-none d-md-inline-block" href={ this.props.href }>
                    <img src={ this.props.icon } alt="NOT CACHED"/>
                    { this.props.name }
                </a>
            );
        }

        return (
            <a className="py-2 d-none d-md-inline-block" href={ this.props.href }>
                { this.props.name }
            </a>
        );
    }
}

There is that line

<img src={ this.props.icon } alt="NOT CACHED"/>

Every time I refresh the page the first thing I see a "NOT CACHED" text, after that it converts into image.

Keep in mind that the src attribute takes external (https) url, I am not having an image on local disk

How to make the "NOT CACHED" alt text actually cache by web browser so a user won't see it with every reload?

I suspect that it's because I am using just a webpack, not a webpack-dev-server to run the page. I will investigate it now

This is how it looks from network tab in dev tools

My network is very fast

EDIT: It's Ubuntu 18 Firefox that is sooo sloooow, Chromium web browser needs 1ms to load the SVG...

It may be not react fault, well...

To save the image in cache is the normal behavior of the browser, it has nothing to do with React. Try looking in the network tab of your browser where is your image coming from and how long does it take to load, may be what you need is to optimize your image, if it is too large (i.e. several mb) it could be cached but it takes time to render. — Mark E
– Mark E, Commented Aug 4, 2018 at 19:54

Bartłomiej Sobieszek · Accepted Answer · 2018-08-04 20:52:57Z

1

It was not a fault of react but Firefox itself, it is just that slow that even cached 9KB SVG loads from 700 to 1500ms

answered Aug 4, 2018 at 20:52

Bartłomiej Sobieszek

2,8362 gold badges28 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to cache external images in components with ReactJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related