voidなhooksならコンポーネントでいいのでは

voidなhooksを最近よくみる

最近、副作用を起こして何も返さないようなhooksをよく見かける。最初にapiからデータをfetchしてきてstoreに突っ込むだけとか

export const useFetchAccount = () => {
  const dispatch = useDispatch();
  useEffect(() => {
    fetch('/api/account/data')
      .then((res) => res.json())
      .then((data) => dispatch(loadAccountData(data)));
  }, [dispatch]);
};

setIntervalを呼び出したいだけだとか(コードは省略して書いています)

export const useInterval = (callback) => {
  useEffect(() => {
    const id = setInterval(callback,1000)
    return () => clearInterval(id)
  },[callback]) 
}

こんな感じで使われたりしてるんですが、なんとなく違和感がある。

const App = () => {
  // こいつなに？ってなる
  useFetchAccount();
  useInterval(() => console.log('hello'));
  return <div>Hello World!!!!</div>
}

useEffectだけ使いたいならコンポーネントでいいんじゃない

voidなhooksはコンポーネントにしたほうがトップレベル以外でも使用できるようになって取り回しがきくようになるし、ローディング状態とかも色々できるし、なんか見てくれもいいのではと思う。
これはuseFetchAcoountをコンポーネントにした場合、名前は適当です。

export const FetchAccount: React.FC = () => {
  const dispatch = useDispatch();
  useEffect(() => {
    fetch('/api/account/data')
      .then((res) => res.json())
      .then((data) => {
        dispatch(loadAccountData(data));
        setLoading(false);
      });
  }, [dispatch]);
  return null
};

これはuseIntervalをコンポーネントにした場合

export const Inteval: React.FC<{ callback: () => void }> = ({ callback }) => {
  useEffect(() => {
    const id = setInterval(callback, 1000);
    return () => clearInterval(id);
  }, [callback]);
  return null;
};

使用例はこんな感じになります。viewを持たないコンポーネントが嫌っていう人もいると思うけど、気になるならchildrenをpropsでとってシュッと返すようにしたらいいと思う。ContextAPIとかreact-reduxのProviderみたいに。

const App = () => {
  // useFetchAccount();
  // useInterval(() => console.log('hello'));
  return (
    <>
      <FetchAccount />
      <Inteval callback={() => console.log('hello')} />
      <div>Hello World!!!!</div>
    </>
  );
};

そもそもvoidなhooksってありなんですか？

調べてもよくわからなかったけど、voidなhooksって実は結構一般的な存在だったりするんだろうか。詳しい方教えて欲しい。