DEV Community

5 Tips Every React Developer Should Know

Tapajyoti Bose on October 10, 2021

React is an amazing tool to build Front End Applications. This article will provide you some tips which you can immediately implement to up your Re...

Read full post

Damian Żygadło • Oct 11 '21

HOC is deprecated.

Tapajyoti Bose • Oct 11 '21

So what's the replacement for HOC?

Ahmed • Oct 13 '21 • Edited

I mean why use HOC and not just simplify it with a general Layout component

So simply speaking:

const Layout = ({children}) => {
   return (
      <Header />
      <main>{children}</main>
      <Footer />
   )
}

export default Layout;

and than you can wrap any page or template you wish with your Layout component!

Tapajyoti Bose • Oct 13 '21 • Edited

Using the HOC is a more sleek solution. It still has the same issues as the HOC approach

Paul McClean • Oct 14 '21 • Edited

"Sleek" is pretty subjective. I much prefer a layout component rendering child elements. It makes the HTML structure easier to read, in my opinion.

Tapajyoti Bose • Oct 15 '21

I do agree, "sleek" indeed is subjective

Ahmed • Oct 15 '21 • Edited

I also think Sleek is not KISS -> Keep it super simple ... please don't forget this industry is hungry for new people to join.

While the European software developer population is growing, it cannot keep up with the booming demand. In 2019, the number of software developers in Europe increased by 7% to 6.1 million. At the same time, demand for IT skills in Western markets is expected to grow by more than 10% in 2020!

Source: Ministry of Foreign Affairs
cbi.eu/market-information/outsourc...

What I am trying to elaborate here programming should be easier for newcomers, and simple to understand and in-order for them to learn they should follow the rabbit hole easy, don't you agree.

Tapajyoti Bose • Oct 16 '21

😐

Damian Żygadło • Oct 11 '21 • Edited

In 99% cases - hooks.

You can check also this post, if you really want to know:
medium.com/javascript-scene/do-rea...

Yes, HOC can be used, but only in niche scenarios that you won't encounter super often.

Tapajyoti Bose • Oct 12 '21

If you work on a large project not using an HOC for layout will be a huge pain. The connect function was indeed replaced with hooks, but you would still need the withRouter HOC for quite a few cases

We both have different viewpoints. So, let's agree to disagree :)

Raí B. Toffoletto • Oct 12 '21

Am I wrong in understanding that Everytime you use HOC those components (nav, footer, ...) will be mounted and remounted?? I think better layout way is router and lazy loading, right? Or as said Hooks and Context.

The beauty of react-router is to nest as many switches as you need. And I so far haven't found an use for withRouter since useHistory and other hooks are available.

Tapajyoti Bose • Oct 12 '21 • Edited

The purpose of a separate layout would be to keep the routing logic separate from the ui logic. But you are correct about the re-rendering of the components.

I have used useHistory for only navigation, so I don't have enough knowledge to comment on how it compares to withRouter

Thanks for your input :)