【React】Recoilライブラリは使用しない方が良いのでしょうか？

Question

実現したいこと

以下のエラーを解消したいです。

この事象について、以下のサイトを参照しましたがRecoilライブラリは現在使用すべきではないのでしょうか？
使用すべきでない場合、useStateやuseReducerを使用すべきなのでしょうか。
ご存知の方、ご教示頂きたく思います。
宜しくお願いします。

・参照サイト
https://github.com/facebookexperimental/Recoil/issues/2318

発生している問題・分からないこと

上記同様になります。

エラーメッセージ

Cannot destructure property 'ReactCurrentDispatcher' of 'react__WEBPACK_IMPORTED_MODULE_0___default(...).__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' as it is undefined.
TypeError: Cannot destructure property 'ReactCurrentDispatcher' of 'react__WEBPACK_IMPORTED_MODULE_0___default(...).__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' as it is undefined.
    at currentRendererSupportsUseSyncExternalStore (http://localhost:3000/static/js/bundle.js:62965:5)
    at useRecoilValueLoadable (http://localhost:3000/static/js/bundle.js:67055:26)
    at useRecoilValue (http://localhost:3000/static/js/bundle.js:67072:20)
    at useRecoilState (http://localhost:3000/static/js/bundle.js:67114:11)
    at RecoilCounter (http://localhost:3000/static/js/bundle.js:6235:83)
    at react-stack-bottom-frame (http://localhost:3000/static/js/bundle.js:56724:18)
    at renderWithHooks (http://localhost:3000/static/js/bundle.js:48041:20)
    at updateFunctionComponent (http://localhost:3000/static/js/bundle.js:49310:17)
    at beginWork (http://localhost:3000/static/js/bundle.js:49928:16)
    at runWithFiberInDEV (http://localhost:3000/static/js/bundle.js:45269:14)

該当のソースコード

import ReactDOM from 'react-dom/client';
import './index.css';
import reportWebVitals from './reportWebVitals';
import RecoilCounter from './practiceFiles/RecoilCounter.js';
import { RecoilRoot } from 'recoil';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <RecoilRoot>
    <RecoilCounter />
  </RecoilRoot>
)

import { atom } from "recoil";

// stateを保持するAtom
export const counterAtom = atom({
  key: "counterAtom",
  default: 0
});

export default counterAtom;

import { useRecoilState } from "recoil"
import { counterAtom } from "../store/atom"

export default function RecoilCounter() {
  // state値をAtomから取得
  const [count, setCount] = useRecoilState(counterAtom);

  // カウントボタン押下時に処理
  const handleClick = () => {
    setCount(c => c + 1);
  }

  return (
    <>
      <button type="button" onClick={handleClick}>カウント</button>
      <p>{count}回、クリックされました。</p>
    </>
  )
}

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

https://github.com/facebookexperimental/Recoil/issues/2318

上記サイトにより、コード修正で解決するより、Recoilを使用しない方向で進めた方が良いのではないかと思っています。

補足

特になし

Answer 1

はい、すでに Recoil は開発停止となりましたので、新規採用は推奨されません。
代替手段としては Jotai などがあります。

Comments

[kosuke05]

yuki23様

ご回答頂き有難うございます。
代替ライブラリについてもご教示頂き有難うございます。
ベストアンサーとさせて頂きます。