376 - Stale Refs - react

[jsartisan]

App.jsx

import { useState, useRef, useEffect } from "react";

export default function App() {
  const [value, setValue] = useState();

  const ref = useRef(() => {
    console.log("Submitted value:" + value);
  });

  useEffect(() => {
    ref.current = () => {
      console.log("Submitted value:" + value);
    }
  }, [value])

  return (
    <>
      <input onChange={(e) => setValue(e.target.value)} />
      <button onClick={() => ref.current()}>Submit</button>
    </>
  );
}