React Render With Hoc

So I am following some tutorial and I am confused regarding how things render when using HOC So firstly, I guess props flow from parent to child and is one directional? Here we cr

Solution 1:

First of all, what is a HOC?

A HOC is a Higher-order component. This means it is a function that takes as its first argument a component and then returns a component.

From this definition you can immediately see that:

• withClass is an HOC
• Aux is not an HOC

Aux is a functional component. Classic React components are created by defining a class that inherits from React.Component. A newer, simpler way of defining components is to create functions that simply accept props as the first parameter and return what should be rendered.

So based on the above code if someone can please explain what exactly happens, the way things execute and render?

Well, let's look at App just as a component. We have withClass and App and you're exporting withClass(App, classes.App). What would it look like if, instead of using an HOC we used a functional component? It'd look like this:

const AppWithClass = props =>
  <div className={classes.App}>
    <App/>
  </div>

In this case, no props are passed to App. So with this use-case, there is no need to pass props through by writing {...props}. And you'd then simply export AppWithClass.

But usually you write HOCs to be reusable. In that case, you don't know if the component that will be passed to your HOC will receive props or not. For that reason, you want the component you create to take any props passed to it and to pass them through to the wrapped component.

Let's say you have a Button component that takes a parameter colour. You'd typically use it like this:

<Button colour="red"/>

But you want to wrap it with a div and add a class to that div. So you use withClass as follows:

const ButtonWithClass = withClass(Button, "button-class");

Now you can use Button as follows:

<ButtonWithClass colour="red"/>

And really what you'll get is:

<div className="button-class">
  <Button colour="red"/>
</div>

If you did not write {...this.props} when rendering WrappedComponent in your withClass HOC, then colour would not get passed through to Button. In your HOC, WrappedComponent is equal to Button in the above case.

The syntax {...this.props} is a combination of the Object literal spread syntax and JSX's own behaviour. The Object spread syntax used in this way means the keys of the given object will become the prop names and the values will become their respective values. So when you write {...{ colour: 'red' }} you're asking JSX to get props from an object that you define inline.

To continue with the above example:

<ButtonWithClass colour="red"/>

Inside withClass this becomes equivalent to:

const WrappedComponent = Button;
return <WrappedComponent {...this.props}/>;

And here this.props equals { colour: 'red' }. So the above becomes:

const WrappedComponent = Button;
return <WrappedComponent {...{ colour: 'red' }}/>;

Which then becomes:

const WrappedComponent = Button;
return <WrappedComponent colour="red"/>;

I hope that helps!