DEV Community

Cover image for ⚛️ React: Hooks vs. Render Props vs. Higher-Order Components 👨‍🔬

⚛️ React: Hooks vs. Render Props vs. Higher-Order Components 👨‍🔬

Better Coding Academy on March 05, 2020

About Me: I've been a professional web developer for just over 10 years now. I'm currently the lead web development instructor at Better Coding Aca...
Collapse
 
shaijut profile image
Shaiju T

Hi, 😄 May I know which software you used to record the videos. is it freeware. And did you used normal mobile headphones as mic ?

Collapse
 
bettercodingacademy profile image
Better Coding Academy

I use OBS to record the videos with an AT2020 mic :)

Collapse
 
shaijut profile image
Shaiju T

Actually I thought you are using some paid ones like Camtasia, But Good to hear that by using OBS your videos are clear. Have you configured some special settings in OBS ?

Thread Thread
 
bettercodingacademy profile image
Better Coding Academy

Nope - OBS is really good. Since it's screen recording there really isn't too much variation in quality; it's more important to have a good microphone setup (something I definitely can improve upon 😁)

Collapse
 
dance2die profile image
Sung M. Kim

Other problems with HoC are,

  1. Hard to get it right (displayName, static method hosting etc)
  2. Major PIA to get types right in TypeScript.
Collapse
 
bettercodingacademy profile image
Better Coding Academy

It does not clearly identify the source of your data - you have no idea where x and y come from :)

Collapse
 
sonicoder profile image
Gábor Soós

They don't need to know, just like with Dependency Injection in Angular.

Thread Thread
 
bettercodingacademy profile image
Better Coding Academy

Drawing a similarity between Angular and React here isn't particularly beneficial.

In React, tracking down where a particular prop comes from within a nest of multiple HOCs is a huge pain and a massive code smell that Hooks has since addressed beautifully.

Thread Thread
 
sonicoder profile image
Gábor Soós

Aren't we talking about the dependencies of a component?

I don't know why it is necessary to know the source of a dependency inside a component.

Collapse
 
nicolasini profile image
Nico S___

this is very useful, thank you

Collapse
 
bettercodingacademy profile image
Better Coding Academy

You're welcome Nico!

Collapse
 
hieudevx profile image
HieuHT
Collapse
 
jrdleto1 profile image
jrdleto1

However I choose Hooks, if I'm able to, I don't think your arguments on higher-order components are strong, as they had to be, anyway thanks.

Collapse
 
rohanfaiyazkhan profile image
Rohan Faiyaz Khan

Even though the codebase I'm working on right now is mostly with hooks, there are a couple of HOCs and render props thrown in. I think each of them have their appropriate use.