DEV Community

Cover image for React HoC vs Hooks vs Render Props in 2021
Miroslav Nikolov
Miroslav Nikolov

Posted on β€’ Edited on β€’ Originally published at webup.org

10 5

React HoC vs Hooks vs Render Props in 2021

Did React hooks took over or there is still room for the HoC and render prop patterns?


In 2021 React hooks are everywhere and many serious OSS projects are using functional components already.

During ReactEurope Erik Rasmussen did a good round-up of how things started with HoCs, went through their replacement β€” render props β€” and ended up today with hooks. It also compares several use cases.

If I have to make my own conclusion it would sound like that:

HoC, hooks and render props have their own use cases and none of them is a full replacement of the others. In some cases HoCs and components with a render prop my even make more sense.

A good example of the above is the connect() function from React Redux used to connect your component to the store. It does return a HoC.

// This will return a HoC wrapper around MyComponent
connect()(MyComponent);
Enter fullscreen mode Exit fullscreen mode

With the modern Redux you can get data and dispatch actions to the store directly using the useSelector and useDispatch hooks, so connect() is no longer required. While it's true, this is one of these moments where I find the HoC pattern still useful for production apps. The main reason is... testing. It's very easy to test a component in isolation via props.

function MyComponent({
  name,           // own prop
  size,           // own prop
  count,          // redux store selector
  activateAction  // redux action
});
Enter fullscreen mode Exit fullscreen mode

With the hooks your tests won't be that straightforward as per some tradeoffs but this is the recommended way to go in the React community.

To wrap up: Functional components and react hooks are our preferred way of working with React these days but hooks are not always your silver bullet. Collaboration, testing, reusability, and logic explicitness, should determine what is a better fit and not the mainstream.


Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (0)

11 Tips That Make You a Better Typescript Programmer

typescript

1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields

...

Read the whole post now!

πŸ‘‹ Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay