Introduction

In this article, I will briefly summarize Higher-Order Components (HOC) in React.

HOC is a concept that has been around for some time, but personally, I recently knew it. From what I've researched, it seems that alternative methods like Hooks have emerged in recent years, and factors such as the complexity of HOC itself have led to its reduced usage.

I may not have many personal opportunities to use it, but I felt like writing an article about it as part of my learning process.

If you are interested, please take a look (and if there is any incorrect information, please let me know!).

What is a Higher-Order Component (HOC)?

In general, a Higher-Order Component (HOC) can be used as a design pattern in React's component architecture used to reuse component logic. HOCs wrap or enhance components and add new functionality.

Case Study

HOCs are typically defined as functions. The following is an example showing the basic usage of HOC.

import React from 'react';

// define
function withLogger(WrappedComponent) {
  return function WithLogger(props) {
    console.log(`component is rendered: ${WrappedComponent.name}`);
    return <WrappedComponent {...props} />;
  };
}

// use HOC
const MyComponentWithLogger = withLogger(MyComponent);

In this example, a HOC called withLogger is defined. This HOC takes a WrappedComponent and wraps that component. Each time the wrapped component is rendered, a log message is displayed.

Why Use HOC?

The main reason for using HOC is to facilitate code reuse and sharing. For example, HOC is very useful when creating components that have common logic throughout an application, such as authentication, logging, routing, etc.

Conclusion

High-Order Components (HOCs) are powerful tools for React application development. By using HOCs, you can reuse component logic and efficiently manage your applications.

The concepts introduced in this article are based on simple code examples, but if you're interested, I encourage you to explore further and consider applying them in your own projects.

Thank you for reading!