Recoilが動かない

はじめに

グローバルな状態管理のライブラリRecoil。
学習の流れで使うことがあったんですが、使えなかった。
以下、エラーです。

Uncaught TypeError: Cannot destructure property 'ReactCurrentDispatcher' of 'import_react.default.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' as it is undefined.

訳：
未捕捉の TypeError:
import_react.default.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED が undefined なので、そこから ReactCurrentDispatcher というプロパティを分割代入できません。

原因

どうやらReact v19のバージョンに対応していないようです。
2025年で開発終了になってるみたい。
悲しい。

解決

Jotaiというライブラリがいいみたい。
今後使うならこれですね。

import styled from "styled-components";
import { useAtomValue } from "jotai";
import { userState } from "../../../store/userState";

export const UserIconWithName = (props) => {
  console.log("userIconWithName");

  const { image, name } = props;
  const userInfo = useAtomValue(userState);
  const isAdmin = userInfo?.isAdmin ?? false;

  return (
    <SContainer>
      <SImg height={160} width={160} src={image} alt="プロフィール" />
      <SName>{name}</SName>
      {isAdmin && <SEdit>編集</SEdit>}
    </SContainer>
  );
};

書き方Recoilとほぼ一緒ですね。

参考

ありがとうございます。