recoil counter

counter-react.js

import React, { useState } from "react";

export const Counter = (props) => {
  const [count, setCount] = useState(0);
  return (
    <div>
      <input readOnly value={count} />
      <button
        onClick={(e) => {
          setCount(count + 1);
        }}
      >
        Count
      </button>
    </div>
  );
};

counter-recoil.js

import React from "react";
import { RecoilRoot, useRecoilState, atom } from "recoil";

const counter = atom({
  key: "counter",
  default: 0,
});

export const Counter = (props) => (
  <RecoilRoot>
    <CounterComponent />
  </RecoilRoot>
);

const CounterComponent = (props) => {
  const [count, setCount] = useRecoilState(counter);
  return (
    <div>
      <input readOnly value={count} />
      <button
        onClick={(e) => {
          setCount(count + 1);
        }}
      >
        Count Recoil
      </button>
    </div>
  );
};