Menu
I have a question:
Does still make sense to use HOC with React Hooks?
If yes, in which cases would be a good idea to use it?
Thank you.
285
HOCs are not part of the React API, per se. They are a pattern that emerges from React's compositional nature. Concretely, a higher-order component is a function that takes a component and returns a new component.
In a modern React world, everyone uses function components with React Hooks. However, the concept of higher-order components (HOC) is still applicable in a modern React world, because they can be used for class components and function components.
HOC helps to isolate logic and state management in a separate class-based component. With React Hooks, state management can occur outside of a class. Hooks empower developers to use the functional programming aspects in React.
HOC is a React independent pattern, but Hooks are part of the React. We can compose HOCs like functions but React Hooks are not composable.
According to the official docs, only if the HOC needs to do more than to render a single child:
Do Hooks replace render props and higher-order components?
Often, render props and higher-order components render only a single child. We think Hooks are a simpler way to serve this use case. There is still a place for both patterns (for example, a virtual scroller component might have a
renderItemprop, or a visual container component might have its own DOM structure). But in most cases, Hooks will be sufficient and can help reduce nesting in your tree.
As I interpret this, react-redux connect would still be a valid HOC, though useSelector and useDispatch are available so why bother ¯\_(ツ)_/¯
111
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
