Lost static functions in the wrapper component

[AbrahamAlcaina]

For example if you have some code like this:

  static readyOnActions = (dispatch, params) => {
    return Promise.all([dispatch(landingActions.getLandingInfo())]);
  }

That is used to do the server render side is lost in the wrapper.

One posible solution is use 'hoist-non-react-statics'

import React, { Component } from 'react';
import shouldComponentUpdate from './shouldComponentUpdate';
import hoistStatics from 'hoist-non-react-statics'

/**
 * Makes the given component "pure".
 *
 * @param object Target Component.
 */
export default function immutableRenderDecorator(Target) {
  class Wrapper extends Component {
    render() {
      return React.createElement(Target, this.props, this.props.children);
    }
  }

  Wrapper.prototype.shouldComponentUpdate = shouldComponentUpdate;
  // don't lost static properties function
  // ex. for fetchData 
  return hoistNonReactStatic(Wrapper, Target);
}

It is fine for you?

[jurassix]

Yeah,I think that library seems fine. Any argument for just composing this hoisting dependency on you side instead of embedding here?

export default hoistNonReactStatic(immutableRenderDecorator(Component));

[AbrahamAlcaina]

Yes is because you have some like this code:

class X extends Component {
 static readyOnLoad = () => doSomething;
}

if you apply the decorator

const immutableX = immutableRenderDecorator(X)

immutableX doesn't have readyOnLoad.

To do it in the app side is needed code like this :

class X extends Component {
}
const immutableX = immutableRenderDecorator(X);
immutableX.readyOnLoad = () => doSomething;

And in this way we are coupling the functionality of X to the decorated component immutableX.

Here have an example of use: react-redux/src/components/connect.js

[jurassix]

I would think all you need to do is the following:

class X extends Component {
  static readyOnLoad = () => doSomething;
}
const immutableAndHoistedX = hoistNonReactStatic(immutableRenderDecorator(X));
export default immutableAndHoistedX;

Or simply:

class X extends Component {
  static readyOnLoad = () => doSomething;
}
export default hoistNonReactStatic(immutableRenderDecorator(X));

But it does seem like a nice feature users would expect from a higher-order component. Thanks for the connect link that helps set precedence for user expectation.

Can you put together a PR with backing test(s)?

Thanks !

[Darkhorse-Fraternity]

Lost static functions...also