【React】Recoilでstateをデフォルト値にリセットする

import { atom } from "recoil";

export const textState = atom({
  key: "textState",
  default: "",
});

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { RecoilRoot } from "recoil";
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import Test from "./Test";

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);

const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
  },
  {
    path: "/test",
    element: <Test />,
  },
]);

root.render(
  <React.StrictMode>
    <RecoilRoot>
      <RouterProvider router={router} />
    </RecoilRoot>
  </React.StrictMode>
);

import { useResetRecoilState } from "recoil";
import { textState } from "./textState";
import { Link } from "react-router-dom";

const App = () => {
  const resetState = useResetRecoilState(textState);

  console.log('App');

  return (
    <>
      <div>
        <Link to="/test">Test</Link>
      </div>
      <div>
        <button onClick={resetState}>stateをリセット</button>
      </div>
    </>
  );
};

export default App;

import { useRecoilState } from "recoil";
import { textState } from "./textState";
import { Link } from "react-router-dom";

const Test = () => {
  const [text, setText] = useRecoilState(textState);

  const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setText(event.target.value);
  };

  console.log('Test');

  return (
    <>
      <div>
        <Link to="/">App</Link>
      </div>
      <div>
        <input type="text" value={text} onChange={onChange} />
        <br />
        Echo: {text}
      </div>
    </>
  );
};

export default Test;