Ref vs State

Click "Add to ref" three times, and the screen keeps showing 0. Click "Add to state" once, and the screen suddenly shows 3 for the ref. This small component makes the difference between a ref and state visible:

import { useRef, useState } from 'react';

function ClickCounters() {
  const [stateCount, setStateCount] = useState(0);
  const refCount = useRef(0);

  console.log(`render: stateCount=${stateCount}, refCount=${refCount.current}`);

  const handleRefClick = () => {
    refCount.current = refCount.current + 1;
    console.log('refCount.current is now', refCount.current);