220130-useref-persist-variable.jsx

import { useRef, useState } from 'react';

export default function Foo() {
  // When we change the state, we cause the component to re-render.
  const [count, setCount] = useState(0);

  // This gets persisted between re-render
  const persisted = useRef(null);

  // This does not get persisted between re-render
  let notPersisted = null;

  const handleClick = () => {
    setCount(count + 1);
    persisted.current = 'foo';

    // We're changing the component's state with `setCount` which causes
    // a re-render. Even though we're setting this variable, it's getting
    // lost due to the re-render.
    notPersisted = 'foo';
  };

  return (
    <>
      <p>{`Count: ${count}`}</p>
      <p>{`Persisted between re-render: ${persisted.current}`}</p>
      <p>{`Not Persisted between re-render: ${notPersisted}`}</p>
      <button
        onClick={handleClick}
        type="button"
      >
        Cause Re-Render
      </button>
    </>
  );
}