<div id="root"></div>

const { useState, useRef } = React;

const MyComponent = () => {
  const [stateExp, setStateExp] = useState(1000);
  const refExp = useRef(1000);
  
  const spendStateMoney = () => setStateExp(prevVal => prevVal - 1);
  
  const spendRefMoney = () => {
    refExp.current = refExp.current - 1;
    console.log('refExp.current', refExp.current);
  };
  
  return (
    <section className="box">
      <div className="values">
        <span>useState value: ${stateExp}</span>
        <button onClick={spendStateMoney}>Spend</button>
      </div>
      <div className="values">
        <span>useRef value: ${refExp.current}</span>
        <button onClick={spendRefMoney}>Spend</button>
      </div>
    </section>
  )
}

ReactDOM.render(<MyComponent />, document.getElementById('root'))