Pass dynamic value to HOC in react

Question

I write some HOC and I need to pass to this HOC a dynamic object that I create on some life cycle level and I did not get him as a prop. If I try to pass some static value ( for example initialize myObj from start) it works as expected and I get the correct value.

Let's say this is my component class :

 let myObj = {};

  class Test extends React.Component
   {
      constructor(props) {
        super(props);
        .....
        }

         render() {
            myObj = {test:'test'};
            return ( ... )
        }       
    }
   export default withHOC(Test, myObj);

And this is my HOC:

const withHOC = (Component, test) => {
    class Hoc extends React.Component
    {
        constructor(props)
        {
            super(props);
            const s = test; // ---->test is empty object always !!
            ...
        }

     } 
     return Hoc;
 }

My 'Dynamic' object that I create on my 'test' class is always empty on my HOC class. It's happend also when I try to pass some value from my props directly, in this case the page is stuck(without errors in console).

Does someone have any idea how to resolve that? Thanks!

Answer 1

When you compose a component that way, composition only happens at compile time (static composition). This means that withHOC runs only once and is receiving an empty myObj argument, as it is using the one defined on declaration.

export default withHOC(Test, myObj); //myObj = {}

If you want that value to be dynamic, the withHOC composition should be runned when that value changes.

You can't send data up from the WrappedComponent (Test) to the HOC (withHOC), so even if you change myObj value in Test.render, the HOC would never know.

What you could do, if you really need it, is do the composition on the Test.render

render(){
    const Hoc = withHOC(this.state.myObj, WrappedComponent);//WrappedComponent can be anything
    return(
        <Hoc/>
    )
}

This way, every time the component renders, Hoc is composed using as myObj a value from the component state, wich is not the preferable way to do it, because this.state.myObj might have the same value as it did at the previous render, and you would be re-composing with the same data as before.

A better way to do it is checking for changes in myObj at Test.componentDidUpdate, and if it did change, then compose Hoc again.