HOC - salimakhtar92/ReactJs GitHub Wiki

Higher Order Component(HOC)

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.

# Counter.js

import React, { Component } from 'react';
import CounterButton from './CounterButton';
import CounterHover from './CounterHover';

class Counter extends Component {

  render() {
    return (     
        <>
          <CounterButton />
          <CounterHover />
        </>      
    );
  }
}

export default Counter;

CounterButton.js

import React, { Component } from 'react';
import WithCounter from './WithCounter';

const CounterButton = (props) => {
	const { counter, counterHandler } = props;
  return <button onClick={counterHandler}> Clicked {counter} times</button>
}

export default WithCounter(CounterButton);

CounterOver.js

import React, { Component } from 'react';
import WithCounter from './WithCounter';

const CounterOver = (props) => {
	const { counter, counterHandler } = props;
  return <p onMouseOver={counterHandler}> Clicked {counter} times</p>
}

export default WithCounter(CounterOver);

HOC WithCounter.js

import React, { Component } from 'react';


const WithCounter = (WrapedComponent) => {

	class NewComponent extends Component {

		constructor(props) {
			super(props);

			this.state = {
				counter: 0
			}
		}

		counterHandler = () => {
			this.setState((prevState) => ({counter: prevState.counter + 1}))
		}
		
	  render() {
	    return <WrapedComponent 
	    	{...this.props}
	    	counter={this.state.counter} 
	    	counterHandler={this.counterHandler}
	    />
	  }
	}
	return NewComponent;
}


export default WithCounter;
⚠️ **GitHub.com Fallback** ⚠️