10

Higher Order Components (HOC) In React: Beginners Guide

 3 years ago
source link: https://hackernoon.com/higher-order-components-hoc-in-react-beginners-guide-2l13335m
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client
Higher Order Components (HOC) In React: Beginners Guide

Well, sometimes we have two different components which implements same logic such as,

0 reactions

As you can see below,

0 reactions

Now for both of this components they have the same logic like counter.

0 reactions

Now let's see the definition of HOC which mentioned in the ReactJS.Org

0 reactions

A higher-order component (HOC) is an advanced technique in React for reusing component logic. HOCs are not part of the React API, per se. They are a pattern that emerges from React’s compositional nature.

Now as mentioned above we can implement logic of component in single HOC and then we can use it in required components.

0 reactions

Let's see how this HOC is a pattern that emerges from React's compositional nature and not a part of React API.

0 reactions
import React, { Component } from "react";

const HOC = (Component, data) => {

//You can do modification in data then pass it to the component

  return class extends React.Component {
    render() {
      return (
        <Component />
      );
    }
  };
};

export default HOC;

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK