DEV Community

Origami
Origami

Posted on

4 2

そのContext呼び出しはProvider以下にあると保証できますか?

はい

reactのcontextは便利です。Reduxキラーとして君臨し、多くの開発者を苦しめてきました。特にhooksが登場してからというもの、useContext()によりその利便性はさらに高くなりました。

const {data} = useContext(DataContext);
Enter fullscreen mode Exit fullscreen mode

あるいは

<DataContext.Consumer>
    {({data}) => /* render something */}
</DataContext.Consumer>

Enter fullscreen mode Exit fullscreen mode

さて、このときDataContext.Provider以下でこれらが呼び出されることを保証できるでしょうか?結論から言うとできません。TypeScriptにおいても同様です(そりゃそうだ)
ちなみに、ProviderがなければcreateContextのデフォルト値がそのまま利用できます。

const DataContext = createContext({ hai: "haijanaiga" } as
    {
        hai: string
    });

export default App: React.FC = () => {
  const data = useContext(DataContext);
  return <h1>{data.hai}</h1>;
}; // its equally `<h1>haijanaiga</h1>`

Enter fullscreen mode Exit fullscreen mode

しかし、たいていの場合において<Context.Consumer />およびuseContext()はProvider以下で呼びたいことが殆どでしょう。
しかし、Reactはこのときエラーになってくれません。デフォルト値が存在するためです。
また、ほとんどの場合開発時にのみ問題になりうるものですから、そのときにエラーになってくれればよいものです。すると、次のようなコードを書くことになるでしょう…

type SomeContextType = {
    hai: string
}

const DataContext = createContext(undefined as undefined | SomeContextType);

const DataProvider = DataContext.Provider;

const useDataCtx = (): SomeContextType | never => {
    const ctx = useContext(DataContext);
    if (!ctx) throw new Error("Not children of DataContext.Provider")
    return ctx;
}
Enter fullscreen mode Exit fullscreen mode

このとき、<DataProvider state={{hai: ""}}>がない状態でuseDataCtx()が呼び出されても、適正にエラーが送出されるため、健全性が高まると言えます。
あるいは、非同期処理を利用などの理由でわざとundefinedを挿入しているとしても、if (typeof ctx === "undefined")などで代替し、読み込みの状態についてはnullを注入することもできます。もっとも、nullを注入するような行為は健全性に欠けますが…
単純に考えましょう。読み込み中であるstateたとえば{suspending: true}をProviderに注入する方法が効きます。

ところであなたのContextは健全ですか?

SurveyJS custom survey software

JavaScript UI Libraries for Surveys and Forms

SurveyJS lets you build a JSON-based form management system that integrates with any backend, giving you full control over your data and no user limits. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more.

Learn more

Top comments (0)

nextjs tutorial video

📺 Youtube Tutorial Series

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series 👀

Watch the Youtube series

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay