rsnext/examples/with-recoil/components/counter.js

import { useRecoilValue, useSetRecoilState, useResetRecoilState } from "recoil";
import {
  countState,
  incrementCount,
  decrementCount,
} from "../lib/recoil-atoms";

const useCounter = () => ({
  count: useRecoilValue(countState),
  increment: useSetRecoilState(incrementCount),
  decrement: useSetRecoilState(decrementCount),
  reset: useResetRecoilState(countState),
});

const Counter = () => {
  const { count, increment, decrement, reset } = useCounter();
  return (
    <div>
      <h1>
        Count: <span>{count}</span>
      </h1>
      <button onClick={increment}>+1</button>
      <button onClick={decrement}>-1</button>
      <button onClick={reset}>Reset</button>
    </div>
  );
};

export default Counter;