DEV Community

Cover image for React - Higher Order Components (HOC)

React - Higher Order Components (HOC)

Nicolas B. on August 15, 2023

In the ever-evolving realm of web development, mastering advanced concepts is essential for creating robust and flexible applications. In this arti...
Collapse
 
nickap profile image
nickap

HOCs are super helpful!

Seems you forgot to remove:

'if (!isConnected) {

return

You don't have access !



}'

from your components after implementing hocs
Collapse
 
brdnicolas profile image
Nicolas B.

Thanks for your feedback,
This is my very first article and I left a small typo thanks!

Collapse
 
nickap profile image
nickap

Congrats for your 1st article Nick!

Thread Thread
 
brdnicolas profile image
Nicolas B.

Thank's a lot ! :)

Collapse
 
manojadams profile image
Manoj

Nice example.

The above example can be implemented using a common wrapper component as well.

It will be super helpful if we can see some more examples for HOC where
using HOC is the only way and cannot be implemented using wrapper components.

Collapse
 
davboy profile image
Daithi O’Baoill

Nice article, thank you.

Collapse
 
alvesjessica profile image
Jessica Alves

Great explanation! 👏🏼

Collapse
 
kurealnum profile image
Oscar

Nice article. I didn't even know HOCs existed until now!

Collapse
 
scorcism profile image
Abhishek Pathak

it's great

Collapse
 
j0nathansf profile image
Jonathan

That was a great article, I was looking for a introduction to React's Higher-Order Components. It will be helpful

Collapse
 
brdnicolas profile image
Nicolas B.

Hi ! Thank's bro !

Collapse
 
luka_brouard_7c90194e8fd1 profile image
Luka Brouard

congratulations for yur first article, he is very nice, quadruple monstre,
spike down

Collapse
 
anasjmirza profile image
Muhammad Anas

easy explanation, Thanks

Collapse
 
pouriarezaeii profile image
Pouria Rezaei • Edited

Congrats on your first article. It's straightforward.

As Nickap mentioned there are some small typos.
After adding HOC you should remove these lines from your components:

if (!isConnected) {
     return <p>You don't have access !</p>
}
Enter fullscreen mode Exit fullscreen mode

Additionally the HOC needs a slightly change:

return (props) => {
  if (!isConnected) {
    return <p>You don't have access !</p>
  }

  return <Component {...props} />
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
vickirust profile image
VickiRust

Great Explanation. Your site explanation is very good. Free Love Spells

Collapse
 
paulhead profile image
PaulHead

Higher Order Components are a powerful pattern in React that enhance the reusability
and composability of components. Spells For Love

Collapse
 
ashishk1331 profile image
Ashish Khare😎

Well, I got totally lost with that library example there. You should have also covered the children prop. It is the main reason why HOC exists.
This article needs a slight revision.

Collapse
 
brdnicolas profile image
Nicolas B.

Hi!
I've modified the example and added a "Going further" section.
Thanks for your feedback!