Comparison: HOCs vs Render Props vs Hooks

Ultimate Guide through Favourite Functional Patterns in React.

There are many approaches you can use to write your React components and to separate the logic and the view. These three patterns are one of the most favourite ones. They all solve quite similar issues, but use very different approaches.

Which approach should you use in your React applications in 2019/2020?

The short answer is: it depends. The longer answer is: keep reading.

Few definitions

Before we dive in to detailed comparison, let’s define a few key terms first.

If you are familiar with all the stuff, you can skip this section and go to Example: DropDown Menu part below.

Higher Order Function (HOF)

Function that operate on other functions:

• either by taking them as arguments
• or by returning them.

It allow us to abstract over actions, not just values.

const greaterThen = x => y => y > x;
greaterThen(10)(11); // true

const greaterThen10 = greaterThen(10);
greaterThen10(11);   // true