CODEWITHSUNDEEP
reactjs
user1941537
user1941537

Reputation: 6685

Are these all Higher Order Components?

The definition of a HOC or a Higher Order Component is as follow:

A higher-order component is a function that takes a component and returns a new component.

An example for this is something like this:

const EnhancedComponent = higherOrderComponent(WrappedComponent);

But what about the following example? Is in the following example Masonry component also a HOC?

<Masonry>
    {childElements}
</Masonry>

And what about this? is ErrorBoundary a HOC?

<ErrorBoundary>
    <MyComponent />
</ErrorBoundary>

Upvotes: 2

Views: 67

Answers (1)

Jamie Dixon
Jamie Dixon

Reputation: 54001

It helps if you can think about the types that are produced from the function (the HOC) and the JSX.

When you use JSX you're calling React.createElement which gives a new React Element.

This React Element is what is passed to your Masonry or ErrorBoundary as children.

Because the type is a React Element, it doesn't qualify for our definition of a HOC which must receive a Component and not an Element.

Your higherOrderComponent function, on the other hand, does take the WrappedComponent Component, and returns a new Component.

Functions

Another way to think about this is with simple functions. If I have a function that takes a function as its parameter, I can say that my function is a Higher-Order function.

Example:

const filter = predicate => arr => arr.filter(predicate);
const lessThan10 = filter(x => x < 10);
const set1 = lessThan10([2, 4, 6, 8, 10]); // [2, 4, 6, 8]
const set2 = lessThan10([5, 10, 15, 20]);  // [5]

Here we can say that filter is a Higher-Order function because it takes a function as its parameter and it also returns a function as its result (a function waiting for an array).

We can also see that lessThan10 is not a Higher-Order function. It neither takes a function as its parameter, nor does it return a function as its result.

Upvotes: 3

Related Questions