High Order Component (HOC) & Custom Hook

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import WithLog from "./WithLog";
import reportWebVitals from "./reportWebVitals";

ReactDOM.render(
    <WithLog name="hello"/>,
  document.getElementById("root")
);

• In traditional, we use high order the component to share the logic and variable

import React, {useState, useEffect} from 'react';

const WithLog = (WrappedComponent) => 

    class extends React.Component{
        constructor(props){
            super(props);
        }
        componentDidMount(){
            console.log(this.props.name);
        }
        render(){
            return (
            <WrappedComponent 
                name={this.props.name}
            />
            )
        }
    }
const Single = ({name}) => {
    return (
        <div>
            {name}
        </div>
    )
}

export default WithLog(Single);

• However , we cannot mix it with hook, as useEffect cannot be called in callback

import React, {useState, useEffect} from 'react';

const Single = ({name}) => {
    return (
        <div>
            {name}
        </div>
    )
}

const WithLog = (WrappedComponent) => ({name}) => {
    useEffect(()=>{
        console.log(name);
    })
    return( 
        <WrappedComponent 
            name = {name}
        /> 
    )
}
export default WithLog(Single);

• Now, we will use custom hook to replace it

import React, {useState, useEffect} from 'react';

const useLog = (input) => {
    const [name, setName] = useState(input) 
    useEffect(()=>{
        console.log(input);
    },[])
}
export default useLog;

import React,{Fragment,useEffect,useState} from "react";
import useLog from './WithLog';

const Single = ({name}) => {
    useLog(name);
    return (
        <Fragment>
            {name}
        </Fragment>
    )
}
export default Single;