DEV Community

Discussion on: Refactoring Higher-Order Components (HOC) to React Hooks

Collapse
 
amitnovick profile image
Amit Novick

One quality that I like about HOC's that Hooks don't have is being externally composable.

What I mean is that components wrapped by an HOC don't need to be aware of it. They receive props and use those props as the one and only interface, and are therefore decoupled from the HOC: indeed, you can even take out the HOC and replace it with any other component that preserves the props interface, and the component need not change.

Meanwhile a Hook must be embedded inside a component in order to be used by it, which makes the component coupled to that Hook's implementation. If you now want to replace that hook with something else, you must now change every component that uses it, since there is no interface to satisfy. It's true that hooks are a function which also represent an interface (accept input, return output), but one of the biggest selling point of React is being able to use the props interface, and Hooks just seem lower level and not as composable.

Feel free to share your thoughts on this, would love to hear other valid perspectives.

Collapse
 
jaimesangcap profile image
Jaime Sangcap

Isn't it the same when using HOC? When HOC change, you have to replace all calls to it? Well it just happens not inside the component. But it's most likely on the same file.

Collapse
 
ahmdgeek profile image
Ahmed Ali Tanany

I think the @amitnovick comment focuses on props interface HOC provides. So, the wrapped component cares only about the props being passed, from where it doesn't matter. So, if you changed a HOC, you still able to pass the same props to the wrapped component without this HOC.