useContextでuseRefを使う方法

Question

現在、WebSocket通信をReactの複数のコンポーネントで共有したいと思っています。
今考えているのが親コンポーネントでuseRefを使用してWebSocketの参照をつくり、子コンポーネントで使用するということだったのですが、エラーが出てしまいます。

const App : FC = () => {
  const socket = useRef<WebSocket>();
  const [retryCount, setRetryCount] = useState(0)
  const connectedEventHandler = () => {
    console.log('サーバーに接続しました。')
  }
  const messageEventHandler = (e:MessageEvent) => {
    console.log(`サーバーよりメッセージを受診しました。: ${e.data}`);
  }
  const errorEventHandler = (e:Event) => {
    console.log(e)
  }
  const closeEventHandler = (e:CloseEvent) => {
    const newRetryCount = retryCount + 1;
    setRetryCount(newRetryCount);
    console.log(`サーバーから切断されました。再接続を試みます。 ${retryCount}回目`);
    connect();
  }

  const connect = () => {
    if(!socket.current) {
      socket.current = new WebSocket(WEBSOCKET_BASE)
    }
    socket.current.addEventListener(socketType.open,connectedEventHandler);
    socket.current.addEventListener(socketType.message,messageEventHandler);
    socket.current.addEventListener(socketType.error,errorEventHandler);
    socket.current.addEventListener(socketType.close,closeEventHandler);
  }

  useEffect(() => {
    connect();
    return () => {
      socket.current?.removeEventListener(socketType.open, connectedEventHandler);
      socket.current?.removeEventListener(socketType.message,messageEventHandler);
      socket.current?.removeEventListener(socketType.error,errorEventHandler);
      socket.current?.removeEventListener(socketType.close,closeEventHandler);
    }
  }, [socket])
  return(
    <>
    <SocketContext.Provider value={{socket, retryCount}}>
      <ChildrenPage />
    </SocketContext.Provider>
    </>
  )
}
export default App;

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
    at resolveDispatcher (react.development.js:1476)
    at useRef (react.development.js:1515)
    at Object../src/socketClient.ts (socketClient.ts:9)
    at __webpack_require__ (bootstrap:19)
    at Object../src/App.tsx (snakeToCamel.ts:18)
    at __webpack_require__ (bootstrap:19)
    at bundle.js:54537
    at index.tsx:13
    at index.tsx:13

使用しているFWはreact@17.0.2で、モジュールはES2020です。
よろしくお願いいたします。

Comments

[maisumakun]

エラーメッセージを読む限り、socketClient.ts内でuseRefを呼んでいるのが問題なようですが、当該のファイルはどのようになっていますでしょうか？

[t_tab]

socketClient.ts内でuseRef()を読んで初期化しようとしていました……
これをundefinedに変更したらうまく動きました。ありがとうございます。

Answer 1

SocketClientでuseContextを初期化するときにuseRefを使っていたのが問題でした。
初期化時はundefinedにすることでうまく動きました。

export interface SocketClientMembers {
  socket:React.MutableRefObject<WebSocket | undefined>,
  retryCount: number
}
const initialState:SocketClientMembers = {
  socket: useRef(),
  retryCount: 0,
}
export const SocketContext = createContext(initialState);

↓

export interface SocketClient {
  socket:React.MutableRefObject<WebSocket | undefined> | undefined,
  retryCount: number
}
const initialState:SocketClientProp = {
  socket: undefined,
  retryCount: 0,
}
export const SocketContext = createContext(initialState);