import React, { useState, useRef } from "react";
 
export default function App() {
  const [counter, setCounter] = useState(0);
  // const [displayedCounter, setDisplayedCounter] = useState(0);
  const displayedCounterRef = useRef(0);
 
  const handleIncrement = () => {
    setCounter((prevCounter) => prevCounter + 1);
  };
 
  const handleDisplayCounter = () => {
    displayedCounterRef.current = counter;
  };
 
  // const handleDisplayCounter = () => {
  // setDisplayedCounter(counter);
  // };
 
  return (
    <div className="App">
      <h1>Counter: {counter}</h1>
      <button onClick={handleIncrement}>Increment</button>
      <button onClick={handleDisplayCounter}>Display Counter</button>
      <h2>Displayed Counter: {displayedCounterRef.current}</h2>
    </div>
  );
}