Want to See the True Power of React HOCs? Try This

Photo by Shahadat Rahman on UnsplashReact HOC holds some very powerful things inside that you cannot achieve easily with hooks and components.We are going to see how React Higher Order Components can allow you to build better apps without having to add…

Photo by Shahadat Rahman on Unsplash

React HOC holds some very powerful things inside that you cannot achieve easily with hooks and components.

We are going to see how React Higher Order Components can allow you to build better apps without having to add every responsibility inside components.

When should you prefer HOC over hooks?

Here are some scenarios when choosing HOC that are great instead of going on with hooks:

  • Share the same behaviour with multiple components without duplicating code.
  • Decoupling components with things like business logic.
  • Adding complex behaviours shared among multiple components without writing complex code.

Always prefer hooks when the logic or data is self-contain inside a component. If logic or data is being shared, then HOC is a great pattern to consider.

Story of a badly designed component

Every React component consists of a component. As the application grows, new changes and features are added. Suppose you created a page that handles multiple responsibilities:

  • Handling user authentication.
  • Logging.
  • Rendering page layout.

The most important thing to remember here is that you should never add multiple responsibilities to the same component. The more the component is aware of other things, the harder it is to maintain in the future.

Suppose the component looks like below:

HOC to the rescue!

The one of most powerful features that HOC can offer is called composition. The technique is that you create HOC which are responsible for a single thing and are not dependent on any other HOC. Then you use composition to create a single HOC which works like a pipeline of HOCs combining all their power together.

This is the magic function behind this composition technique:

const compose = (...fns) => (...args) => fns.reduceRight((res, fn) => [fn.call(null, ...res)], args)[0];

This is a very simple function. It just takes multiple functions and executes them from right to left. The parameter you pass to the composed function is passed to the right-most function. The other functions receive data returned by the function on their right as the parameter.

Below is an example of a HOC that creates a complex logic combining multiple small independent HOCs:

Let’s make HOC curry!

Currying is a concept of functional programming. It is simply a function that takes one argument at a time and returns a series of functions where each function takes other arguments.

A simple example of a curried function is:

const add = x => y => x + y;
const increment = add(1);
const addTen = add(10);

increment(2); // 3
addTen(2); // 12

The same concept can be applied to HOCs.

Always keep this in mind when using HOC

HOCs are a very powerful feature of React and when used wisely, they will allow you to build great React apps. Always keep these rules in mind:

  • The logic or behaviour HOC provides should not be particular to the specific component. It should be shared behaviour.
  • It should not create multiple new props for components. It should only create a maximum of one new prop if that is very necessary.
  • Never make components dependent on a HOC. They should be totally independent.
  • No two HOCs should be coupled with each other. You should be able to use multiple HOCs in any order.

Read this post and more on my Typeshare Social Blog

Go composable: Build apps faster like Lego

Bit is an open-source tool for building apps in a modular and collaborative way. Go composable to ship faster, more consistently, and easily scale.

Learn more

Build apps, pages, user-experiences and UIs as standalone components. Use them to compose new apps and experiences faster. Bring any framework and tool into your workflow. Share, reuse, and collaborate to build together.

Help your team with:

Micro-Frontends

Design Systems

Code-Sharing and reuse

Monorepos

Learn more


Want to See the True Power of React HOCs? Try This was originally published in Bits and Pieces on Medium, where people are continuing the conversation by highlighting and responding to this story.


Print Share Comment Cite Upload Translate
APA
Amit Kumar | Sciencx (2024-03-28T22:22:44+00:00) » Want to See the True Power of React HOCs? Try This. Retrieved from https://www.scien.cx/2022/09/13/want-to-see-the-true-power-of-react-hocs-try-this/.
MLA
" » Want to See the True Power of React HOCs? Try This." Amit Kumar | Sciencx - Tuesday September 13, 2022, https://www.scien.cx/2022/09/13/want-to-see-the-true-power-of-react-hocs-try-this/
HARVARD
Amit Kumar | Sciencx Tuesday September 13, 2022 » Want to See the True Power of React HOCs? Try This., viewed 2024-03-28T22:22:44+00:00,<https://www.scien.cx/2022/09/13/want-to-see-the-true-power-of-react-hocs-try-this/>
VANCOUVER
Amit Kumar | Sciencx - » Want to See the True Power of React HOCs? Try This. [Internet]. [Accessed 2024-03-28T22:22:44+00:00]. Available from: https://www.scien.cx/2022/09/13/want-to-see-the-true-power-of-react-hocs-try-this/
CHICAGO
" » Want to See the True Power of React HOCs? Try This." Amit Kumar | Sciencx - Accessed 2024-03-28T22:22:44+00:00. https://www.scien.cx/2022/09/13/want-to-see-the-true-power-of-react-hocs-try-this/
IEEE
" » Want to See the True Power of React HOCs? Try This." Amit Kumar | Sciencx [Online]. Available: https://www.scien.cx/2022/09/13/want-to-see-the-true-power-of-react-hocs-try-this/. [Accessed: 2024-03-28T22:22:44+00:00]
rf:citation
» Want to See the True Power of React HOCs? Try This | Amit Kumar | Sciencx | https://www.scien.cx/2022/09/13/want-to-see-the-true-power-of-react-hocs-try-this/ | 2024-03-28T22:22:44+00:00
https://github.com/addpipe/simple-recorderjs-demo