https://whereisthemouse.com/react-components-when-do-children-re-render

The reason both the components re-render is because when a component re-renders, all its children re-render as well.

Introducing memo

memo lets you skip re-rendering a component when its props are unchanged.

import { memo } from 'react';

const Buttons = memo(function () {
  const setCount = useSetRecoilState(counter);

  function increase() {
    setCount(c => c + 1)
  }
  
  function decrease() {
    setCount(c => c - 1)
  }
  
  return <div>
    <button onClick={increase}>Increase</button>
    <button onClick={decrease}>Decrease</button>
  </div>
})