[React] export Context するのをやめた話

実装A

こういう実装よくあると思うのですが

contexts/hoge.ts

export const HogeContext = React.createContext({}); 

providers/HogeProvider.ts

import { HogeContext } from 'contexts/hoge';

export const HogeProvider: FunctionComponent<{ children: ReactNode }> = ({
  children
}) => {
  const value = ...; // ロジック
  
  return (
    <HogeContext.Provider value={value}>
      {children}
    </HogeContext.Provider>
  );
};

components/Hoge.ts

import { HogeContext } from 'contexts/hoge';

export const Hoge = () => {
  const value = useContext(HogeContext);
  return (
    ...
  );
}

実装追いづらくないですか？

実装B

と言うことで自分は hooks、Provider とまとめて全部詰めちゃいます

libs/Hoge.tsx

// useHoge があれば必要ないので export しない
const HogeContext = React.createContext({});

export const HogeProvider: FunctionComponent<{ children: ReactNode }> = ({
  children
}) => {
  const value = ...; // ロジック
  
  return (
    <HogeContext.Provider value={value}>
      {children}
    </HogeContext.Provider>
  );
};

export const useHoge = () => {
  return useContext(HogeContext);
};

メリット

• useHoge を利用しているコードから定義元にジャンプした時に実装が見れる
• HogeProvider を探さなくて済む
• 各所で HogeContext を import して useContext する手間が少し省ける