function App = () => {
  return (
    <h1>Hello</h1>
    );
}

• 다음과 같은 간단한 코드가 있다 가정해보자. 이 때 5초가 지나면 창 제목을 바꾸고 싶다.
• 또 다른 페이지에서 제목 알고리즘을 재활용하고 싶다. 이 때 Custom Hook을 사용해 문제를 쉽게 해결할 수 있다.

Step 1 - Hook 제작

useTitle.js

export const useTitle = (initialTitle) => {
  const [title, setTitle] = useState(initialTitle);
  const updateTitle = () => {
    const htmlTitle = document.querySelector("title");
    htmlTitle.innerText = title;
  };
  useEffect(updateTitle, [title]);
  return setTitle;
};

• 우선 사용할 Custom Hook을 제작하고 이를 export해준다.
• useTitle은 title의 초기값을 받아 setTitle 함수를 반환해준다. setTitle에 의해 title이 변경되면 useEffect가 이를 감지해 updateTitle에서 창 제목을 변경하게 된다.
• 이름은 항상 use~ 꼴을 가져야 함에 주의해야 한다.
• 이제 이것을 App 컴포넌트에서 사용해보자

Step 2 - Hook 이용

import useTitle from "./useTitle"

function App = () => {
  const titleUpdater = useTitle("Loading...");
  setTimeout(() -> titleUpdater("Hello!"), 5000);
  useEffect
  return (
    <h1>Hello</h1>
    );
}

• Hook을 import하기만 하면 로직을 쉽게 재활용할 수 있다.
• 필요하다면 Hook을 통해 얻은 값을 다른 Hook에 인수로 내보낼수도 있다.

출처:
https://ko.reactjs.org/docs/hooks-custom.html
https://www.youtube.com/watch?v=J8E9CEyBbWo&t=135s