search
LoginSignup
0

posted at

updated at

Organization

[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 する手間が少し省ける

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
0