HooksWithCustomHook.js

import React, { useState, useEffect, memo } from "react";

import useCount from "../hooks/useCount";

import "./styles.css";

function Hooks() {
  const [name, setName] = useState("Zagatti");
  const { count, increment, decrement } = useCount();

  useEffect(() => {
    document.title = `${name}'s counter`;
  }, [name]);

  function updateName(e) {
    setName(e.target.value);
  }

  return (
    <div id="section">
      <div class="top">
        <label>Nome:</label>

        <input
          type="text"
          name="name"
          placeholder="Seu nome"
          value={name}
          onChange={updateName}
        />
      </div>

      <div class="buttons">
        <button onClick={decrement}>-</button>

        <span>{count}</span>

        <button onClick={increment}>+</button>
      </div>
    </div>
  );
}

export default memo(Hooks);