How does Recoil's atom based approach to state differ from Redux's single central store?

Recoil breaks shared state into small, independent pieces called atoms, and each component subscribes only to the specific atoms it actually needs, rather than the entire store like Redux. This can reduce unnecessary re renders, since changing one atom does not affect components that only depend on a completely different atom.

import { atom, useRecoilState } from 'recoil';

const cartCountState = atom({ key: 'cartCount', default: 0 });

function CartBadge() {
  const [count] = useRecoilState(cartCountState);
  return <span>{count}</span>;
}