Exposing length of mountedInstances to properly hydrate the client

[cwelch5]

I'm attempting to fix this Helmet issue (nfl/react-helmet#149) and had the idea of making the client wait until all instances are mounted before allowing handleStateChangeOnClient to change the DOM. Then on the first render of the client (after SSR), it would only do one client state change which would match the server rendered side effects and thus would leave all the side effects intact. In order to "hydrate" the client like this, I'd need to pass along the number of mounted instances so that the client knows how many components to wait for. I can certainly add a mountedInstances inside of Helmet, but I felt it would be better to perhaps expose this from react-side-effect instead and not duplicate functionality.

I can certainly offer a PR here as well. Please let me know. Thanks!

[lourd]

Mmm, interesting. That sounds like a good, needed feature to me. And exposing the number of mounted instances is trivial. I'm in support.

Is that all that would be required to resolve the double-mounting issue? react-helmet is capable of handling the counting & debouncing of mounted instances with just that information?

[doctyper]

A callback after all instances mount would be useful as well. Something akin to onMountedInstancesComplete

[lourd]

Are y'all still in need of this or was it resolved within react-helmet? The callback idea sounds useful, but would increase the scope of the library by a good amount.

[jnields]

@doctyper AFAIK Helmet faces the same issue as before w/ defer: false - right now the only reason it doesn't update the DOM on initial render is because it defers those updates to occur after a shared animation frame that gets canceled and replaced when children / siblings get rendered. But this doesn't happen when you have <Helmet defer={false} />

So I still think that this would be very helpful to implement for react-helmet as well as other projects...

How would you expect the API to look for helmet if this API were to implement it?

// server
import Helmet from 'react-helmet';

const {
  links, // etc.
  state, // really just the number of mounted instances, but perhaps easier to conceptualize as state
} = Helmet.renderStatic();

// client
import Helmet from 'react-helmet';

const { helmetState } = window.__INITIAL_STATE__;

Helmet.initialState = helmetState; // or what?

ReactDOM.hydrate(<App />, document.querySelector('#root'));

If that works, it's fairly trivial to implement here ...

class SideEffect extends Component {
  static instancesToHydrate = 0;
  static hydrated = false;
  
  componentWillMount() {
    mountedInstances.push(this);
    if (!SideEffect.hydrated) SideEffect.hydrated = SideEffect.instancesToHydrate <= mountedInstances.length;
    if (SideEffect.hydrated) emitChange();
  }
}

EDIT:

I actually think that batching all the client state changes to a single event is a better approach, however... as described in #40

then this issue could be solved simply with

let hydrated = false;
withSideEffect(
  reducePropsToState,
  (state) => {
    if (hydrated) return handleClientStateChange(state);
    hydrated = true;
  }
)(Component);