custom Hooks

import logo from './logo.svg';
import './App.css';
import Example1 from './components/Example1';
import Example2 from './components/Example2';
import Example3 from './components/Example3';
import Example4 from './components/Example4';
import Example5 from './components/Example5';
import useWindowWidth from './hooks/useWindowWidth';

function App() {
  const width = useWindowWidth();
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <Example5 />
        {width}
      </header>
    </div>
  );
}

export default App;

useWindowwidth()

import { useState,useEffect } from "react";

export default function useWindowWidth() {
  const [width, setWitdh] = useState(window.innerWidth);


  useEffect(() => {

    const resize= () => {
      setWitdh(window.innerWidth);
    }

    window.addEventListener("resize", resize);

    return () => {
      window.removeEventListener('resize',resize);
    }
  },[]);

  return width;

}

import { useEffect,useState } from "react";

export default function useHasMounted () {
  const [hasMounted,setHasMounted] = useState(false);

  useEffect(() => {
    setHasMounted(true);
  },[]);
  
  return hasMounted;
}

useHasMounted

import React from "react";

export default function withHasMounted(Component) {
  
  class NewComponent extends React.Component {
    state = {
      hasMounted :false,
    };
    render() {
      const {hasMounted} = this.state;
      return <Component {...this.props} hasMounted={hasMounted}/>;
    }
    componentDidMount() {
      this.setState({hasMounted:true});
    }
  }

  NewComponent.displayName = `withHasMounted(${Component.name})`;
  
  return NewComponent;
}

withHasMounted