HOC & Render Callback

1. HOC: function that takes a component as an argument and returns a new component.

const NewComponent = (BaseComponent) => {
  // ... create new component from old one and update
  return UpdatedComponent
}

NEXT=======>

import React from 'react';

const higherOrderComponent = (WrappedComponent) => {  //Just a function
 return class HOC extends React.Component {
 
   //logics here..
    render() {
      return <WrappedComponent />;
    }
  }
  
};

const SimpleHOC = higherOrderComponent(MyComponent);

NEXT=======>

Enhance.js

import {Component} from "React";

expore var Enhance=ComposedComponent=> class extends Component{
    constructor (props){
        super(props);
        this.state={data: null}
    }
    
    componentDidMount(){
        this.setState(
        {data: 'Hello'}
        );
    }
    
    render(){
        return <ComposedComponent {this...this.props} data={this.state.data} />
    }
    
};

HOC.js

import {Enhance} from "./Enhance"
class MyComponent{
    render(){
     return <div>{this.state}</div>
    }
}
export default Enhance(MyComponent); // enhanced component..

More like curred function..
const add=(x,y)=>x+y;
const createAdder=(a)=>(b)=>add(a,b);
const add2=createAdder(2);
add2(8)
//output 10

2. passed state to chilren...Render Callback

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  increment = () => {
    this.setState(prevState => {
      return {
        count: prevState.count + 1,
      };
    });
  };

  render() {
    return (
      <div onClick={this.increment}>{this.props.children(this.state)}</div>
    );
  }
}

class App extends React.Component {
  render() {
    return (
      <Counter>
        {state => (
          <div>
            <h1>The count is: {state.count}</h1>
          </div>
        )}
      </Counter>
    );
  }
}