useStateをコンポーネント外で使用する方法が知りたいです

実現したいこと

React学習中で、アプリを作成しております。
ルーティングを設定しているindex.jsxというファイル上で、useStateを使用したいです。

前提

すべてのページのルーティングを設定しているファイルであるindex.jsxでuseStateを作成し、useContextで別コンポーネントへ渡すことで、別コンポーネントからでもuseContextの更新を行いたいと思っております。

発生している問題

ソースコードにあるようにuseStateを記述したいと考えていたのですが、コンポーネント内ではないためかレンダリングができず画面が真っ白になってしまいます。
このような部分では、どのように記述すればuseStateが使えるのでしょうか？
JavascriptとReactは学習中のため記述方法の知識に乏しく、どのように解決すれば良いのかがわからなかったので、もしおわかりになるようでしたらご教授いただけないでしょうか。

ソースコードにある以下のコードは、useContextを使用できるかどうかを試すために書いたものです。

const favNumber = 10;
const NumberContext = createContext(favNumber);

該当のソースコード

React
1import React, { createContext, useEffect, useState } from "react";
2import ReactDOM from "react-dom/client";
3〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
4
5const router = createBrowserRouter([
6  {
7    path: "/",
8    element: <Layout />,
9    children: [
10      { index: true, element: <TopPage /> },
11〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
12    ],
13  },
14]);
15
16const favNumber = 10;
17const NumberContext = createContext(favNumber);
18
19const [number, setNumber] = useState();
20
21const rootElement = document.getElementById("root");
22ReactDOM.createRoot(rootElement).render(
23  <NumberContext.Provider value={favNumber}>
24    <React.StrictMode>
25      <RouterProvider router={router} />
26    </React.StrictMode>
27  </NumberContext.Provider>
28);
29
30export default NumberContext;
31

試したこと

ソースコードのuseStateを記述している部分に、新たにコンポーネントを作成してその中にuseStateを記述したりもしてみたのですが、その新たに作成したコンポーネントをどのように記述して呼び出せばいいのかがよくわからず、うまく動作するような記述方法は見つかりませんでした。

この部分でuseStateを使えるようにするためにはどのように記述すればよいのかがお分かりになる方がいらっしゃいましたら、教えていただけると幸いです。
よろしくお願いいたします。

回答2件

useStateフックは、コンポーネントの内部で使用することができ、外部では使用できません。また、あなたのコードでは、ReactDOM.createRoot を使用していますが、これはクライアントサイドレンダリングではなく、サーバーサイドレンダリングのためのものです。

以下は、コードを修正する方法の例です。

import React, { createContext, useState } from "react";
import { createBrowserRouter, RouterProvider } from "found";

const favNumber = 10;
const NumberContext = createContext(favNumber);

const App = () => {
  const [number, setNumber] = useState();

  return (
    <NumberContext.Provider value={favNumber}>
      <RouterProvider router={router} />
    </NumberContext.Provider>
  );
};

const router = createBrowserRouter([
  {
    path: "/",
    element: <Layout />,
    children: [
      { index: true, element: <TopPage /> }
    ],
  },
]);

ReactDOM.render(<App />, document.getElementById("root"));

export default NumberContext;

AIからの回答です。

投稿2023/02/01 01:21