useState와 useEffect를 공통으로 관리하기

반복되는 useState / useEffect는 커스텀 훅으로 하나로 줄일 수 있습니다.

예시

커스텀 훅으로 묶기 전( useEffect 3개, useState 3개 )

const App = () => {
  const [keyword, setKeyword] = React.useState(() => {
    console.log('initailize');
    return window.localStorage.getItem('keyword') || "";
  });
  const [result, setResult] = React.useState("");
  const [typing, setTyping] = React.useState(false);

  React.useEffect(() => {
    console.log('effect');
    window.localStorage.setItem('keyword', keyword);
  }, [keyword]);
  React.useEffect(() => {
    console.log('effect');
    window.localStorage.setItem('result', keyword);
  }, [result]);
  React.useEffect(() => {
    console.log('effect');
    window.localStorage.setItem('typing', keyword);
  }, [typing]);

  function handleChange(e) {
    setTyping(true);
    setKeyword(e.target.value);
  }

  function handleClick() {
    setTyping(false);
    setResult(`We find results of ${keyword}`);
  }

  return (
    <>
      <input value={keyword} onChange={handleChange} />
      <button onClick={handleClick}>search</button>
      <p>{typing ? `Looking for ${keyword}` : result}</p>
    </>
  );
};

React.useState()와 [state]를 디펜던시로 가지고 있는 React.useEffect()의 실행 타이밍은 같습니다.
이 둘을 묶어서 React.useState() 위치에 커스텀훅으로 대체할 수 있습니다.
또한 이런 공통된 동작을 하는 state가 한개가 아닌 여러개라면,
이 커스텀 훅도 결국 함수이므로 커스텀 훅에서 각각의 경우를 인자로 받아 공통된 처리를 해 줄 수 있습니다.

커스텀 훅으로 묶은 후

function useLocalStorage(itemName, value = "") {
  const [state, setState] = React.useState(() => {
    console.log('initailize');
    return window.localStorage.getItem(itemName); || value;
  });

  React.useEffect(() => {
    console.log('effect');
    window.localStorage.setItem(itemName, state);
  }, [state]);

  return  [state, setState];
}

const App = () => {
  const [keyword, setKeyword] = useLocalStorage("keyword");
  const [result, setResult] = useLocalStorage("result");
  const [typing, setTyping] = useLocalStorage("typing", false);

  React.useEffect(() => {
    console.log('effect');
    window.localStorage.setItem('keyword', keyword);
  }, [keyword]);

  function handleChange(e) {
    setTyping(true);
    setKeyword(e.target.value);
  }

  function handleClick() {
    setTyping(false);
    setResult(`We find results of ${keyword}`);
  }

  return (
    <>
      <input value={keyword} onChange={handleChange} />
      <button onClick={handleClick}>search</button>
      <p>{typing ? `Looking for ${keyword}` : result}</p>
      </>
  );
};

반복되는 코드(찍어내기 / 반복)을 함수화 하듯이,
반복되는 훅(useState / useEffect)를 커스텀 훅 으로 줄일 수 있습니다.
커스텀 훅의 함수화라고 생각할 수 있습니다.