App.js

import React, { useState } from 'react';
import Hook from './Hook'
import './App.css';

function App() {
  const [isLifecycle, setIsLifecycle] = useState(false)

  return (
    <div className="App">
      <button onClick={() => setIsLifecycle(!isLifecycle)}>
        Switch
      </button>
      {
        isLifecycle ? null : <Hook />
      }
    </div>
  );
}

export default App;

Hook.js

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

function Hook() {
  const [count, setCount] = useState(0)

  useEffect(() => {
    console.log('Hook: use effect')
    document.title = `${count} times`;
    return function cleanup() {
      console.log('Hook: cleanup')
    }
  });

  console.log('Hook: before render')
  return (
    <div>
      <h1>Hook</h1>
      <h2>{count}</h2>
      <button onClick={() => setCount(count + 1)}>Add</button>
    </div>
  )
}

export default Hook