React HOC and accessing props

Question

I am trying to understand the below React HOC;

const withSecretToLife = (WrappedComponent) => {
  class HOC extends React.Component {
    render() {
      return (
        <WrappedComponent
          {...this.props}
          secretToLife={42}
        />
      );
    }
  }
    
  return HOC;
};

export default withSecretToLife;

And below is another component;

import withSecretToLife from 'components/withSecretToLife';

const DisplayTheSecret = props => (
  <div>
    The secret to life is {props.secretToLife}.
  </div>
);

const WrappedComponent = withSecretToLife(DisplayTheSecret);

export default WrappedComponent;

Specifically I am trying to understand

1. If it "DisplayTheSecret" that gets access to the prop "secretToLife" Or the WrappedComponent? What is the correct way to look at this HOC?
2. The line "const WrappedComponent = withSecretToLife(DisplayTheSecret);" is after the line "const DisplayTheSecret = props => ()". Is that a standard pattern and does it matter?
3. Related to above question, how are we able to do "props.secretToLife" before we even have the declaration/definition. for the WrappedComponent ie const WrappedComponent = withSecretToLife(DisplayTheSecret);
4. What is actually consumed/used in the above case say in App.js ie <WrappedComponent /> OR <DisplayTheSecret /> OR either of them can be consumed?

Answer 1

1. You create a new component - WrappedComponent . It gets the prop secretToLife . DisplayTheSecret itself has no secretToLife prop.

2. In general practise, you should use variables that already has been defined above. So DisplayTheSecret should be defined above its usage. However, you can use it however you want as variables and functions are automatically hoisted to the top of the scope.

3. You are able to do it, but it might result in error at runtime. If you decide to use DisplayTheSecret component without wrapping it with HOC . Typescript solves these problems by generating typings during development.

4. WrappedComponent which consists of DisplayTheSecret and HOC composition.

Answer 2

DisplayTheSecret is a simple component and it expects to find secretToLife among its properties.

withSecretToLife is a function that accepts WrappedComponent and returns another component (lets call it WrappingHOC )

WrappingHOC returns WrappedComponent passed to withSecretToLife , passes down all of its own props and adds a new one - secretToLife

const WrappedComponent = withSecretToLife(DisplayTheSecret); - this one is also called WrappedComponent, but it's not the same as WrappedComponent above (the one passed to the function), it is WrappingHOC with DisplayTheSecret let's call it ResultingComponent

So:

1. secretToLife is a property passed by ResultingComponent to DisplayTheSecret

2. The order does matter, it's always a good idea to declare a function before starting to use it

3. secretToLife is a normal property, you declare it when you create a component

4. DisplayTheSecret is not exported, so can't be consume outside of the module, apart from that it can be used without wrapping