gatsby build does not call componentWillMount()

[cpboyd]

Description

The redux state for the current page doesn't seem to be cleared from a prior rendering or updated by componentWillMount() before being rendered.

Possibly due to asynchronous rendering?

Steps to reproduce

1. Have a site with multiple pages using a single, global Redux in wrapRootElement()
2. Modify a redux state parameter utilized by layout in componentWillMount()
3. Layout will represent the prior rendered page's state.

Expected result

State changes implemented in componentWillMount() should take effect BEFORE the page is rendered.

Ideally, each page seems like it should be rendered from the initial redux state as well without any potential prior path issues.

Actual result

Pages render with incorrect redux state.

Environment

  System:
    OS: macOS 10.14.2
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 11.2.0 - /usr/local/bin/node
    Yarn: 1.12.3 - /usr/local/bin/yarn
    npm: 6.5.0 - /usr/local/bin/npm
  Languages:
    Python: 2.7.10 - /usr/bin/python
  Browsers:
    Chrome: 71.0.3578.98
    Safari: 12.0.2
  npmPackages:
    gatsby: ^2.0.40 => 2.0.85 
    gatsby-image: ^2.0.19 => 2.0.25 
    gatsby-plugin-google-analytics: ^2.0.7 => 2.0.8 
    gatsby-plugin-layout: ^1.0.8 => 1.0.11 
    gatsby-plugin-manifest: ^2.0.8 => 2.0.13 
    gatsby-plugin-offline: ^2.0.17 => 2.0.21 
    gatsby-plugin-react-helmet: ^3.0.1 => 3.0.5 
    gatsby-plugin-remove-serviceworker: ^1.0.0 => 1.0.0 
    gatsby-plugin-sharp: ^2.0.12 => 2.0.17 
    gatsby-plugin-sitemap: ^2.0.2 => 2.0.4 
    gatsby-plugin-typescript: ^2.0.1 => 2.0.3 
    gatsby-remark-embed-video: ^1.4.0 => 1.7.0 
    gatsby-remark-external-links: ^0.0.4 => 0.0.4 
    gatsby-remark-images: ^2.0.6 => 2.0.6 
    gatsby-remark-responsive-iframe: ^2.0.6 => 2.0.8 
    gatsby-source-filesystem: ^2.0.8 => 2.0.12 
    gatsby-transformer-json: ^2.1.5 => 2.1.6 
    gatsby-transformer-remark: ^2.1.12 => 2.1.19 
    gatsby-transformer-sharp: ^2.1.8 => 2.1.10 
  npmGlobalPackages:
    gatsby-cli: 2.4.8

[sidharthachatterjee]

Hey @cpboyd

Can you please link to a minimal reproduction of this?

[cpboyd]

@sidharthachatterjee Based on the "using-redux" example from this repo:
https://github.com/cpboyd/gatsby-redux-bug

All pages should initially display a 1 since they'd be the first page loaded (and, thus, componentWillMount() ought to have been called exactly 1 time).

That's the behavior with gatsby develop.

However, gatsby build results in the following:

0. A
1. B
2. C
3. Home

Note that the initial componentWillMount() is not even taken into account for A, and the state is maintained across pages.

[cpboyd]

I've pushed an update to https://github.com/cpboyd/gatsby-redux-bug that moves the createStore() within the wrap function in order to create a fresh store for each page, rather than using a static global store.

This seems to somewhat resolve the issue, except that the page initially renders with 0 because the componentWillMount() doesn't take effect during the page rendering.

[cpboyd]

OK, so it seems to be standard React behavior:
facebook/react#12495

That said, the current redux example should probably be modified to avoid suggesting a static Redux store for rendering.