[SOLVED] Recommended way of using React + Picturefill

Recommended way of using React + Picturefill

I want to use Picturefill + React + React Router (Also using Webpack).

Context: There is no isomorphic architecture yet so the data is fetched after initial page load (Route change).

…Because of this the render method is being called twice.

Once for default state
Once for updated state (fetched data)

Code

render: function () {
    return (
        <picture>
            <!-- You get the idea -->

            <source srcSet={this.props.large} media="(min-width: 1024px)" />
            <source srcSet={this.props.medium} media="(min-width: 640px)" />
            <img srcSet={this.props.small} />
        </picture>
    );
}

Example 1:

<head>
    <!-- Recommended usage -->
    <script src="https://cdn.rawgit.com/scottjehl/picturefill/2.3.1/dist/picturefill.js"></script>
</head>

Works in Safari 8.0.8
Works in Chrome 45
Works in Firefox 40.0.3 (Only on refresh, not on resize)

Example 2:

// Use picturefill JavaScript API
componentDidUpdate() {
    picturefill();
}

Works in Safari 8.0.8 (Only on resize, not on page load)
Works in Chrome 45
Works in Firefox 40.0.3 (Only on refresh, not on resize)

More info/Alternatives?

Solution

I would recommend, that you use picturefill 3.0 RC1 in combination with the mutation plugin. This way you don't need to call picturefill();, everything is done automatically.

This will work in any browser.