Using Higher Order Components in a React Application

  • If you have started using ReactJS recently often you might have felt that you are performing repeated logic in many components.
  • Well Higher Order Component (HOC) provides solution to such a kind of problems.
  • A function (Functional component in React) which takes a component and gives back another component.
  • So the exact benefits are:

    Functional components started from React V15.

  • But apart from that if we are careful enough we can have an architecture which can abstract logic that can be shared across other presentational components using HOC has great benefits.

If you have started using ReactJS recently often you might have felt that you are performing repeated logic in many components. For example consider an app having:
Continue reading “Using Higher Order Components in a React Application”

Higher Order Components: A React Application Design Pattern

Higher order components: A #ReactJS app design pattern

  • Because higher order components often wrap an existing component you’ll often find you can define them as a functional component.
  • You need some of your React components to be able to access this information, but rather than blindly making it accessible for every component you want to be more strict about which components receive the information.
  • We’ll discuss how pure functions keep code clean and how these same principles can be applied to React components.
  • In the React ecosystem these components are known as higher order components because they take an existing component and manipulate it slightly without changing the existing component .
  • A higher order function is a function that when called, returns another function.

Read the full article, click here.


@ReactiveConf: “Higher order components: A #ReactJS app design pattern”


Jack Franklin takes a look at Higher Order Components, a design pattern that helps keep your React applications tidy, well structured and easy to maintain.


Higher Order Components: A React Application Design Pattern