Почему useRef работает неверно?

Question

[ArgeoMer]

Почему значение t обновляется раньше, строки с обновлением? У меня какой-то взрыв из-за этого в голове

import "./styles.css";
import {useState, useRef, useEffect} from 'react'

function UseMe() {
  const t = useRef(23)
  console.log(t, 0)
  useEffect(() => {
    console.log(t, 1)
    t.current +=1
    console.log(t, 2)
  })
}

export default function App() {
  const q = UseMe()
  return (
    <div/>
  );
}

вот вывод в консоль:

Answer 1

[Алексей]

Проблема не в useRef, проблема в том как работает console.log. Если в console.log передается объект, то он выводится по ссылке, в итоге получается, что когда обновляется ref, то браузер автоматом обновляет его в консоли.
Чтобы проверить, что useRef работает как надо - достаточно вывести current значение из ref, т.е. console.log(t.current, 0)
Если же нужно вывести именно объект на момент его логирования, то можно привести объект к строке и снова собрать в объект:
console.log(JSON.parse(JSON.stringify(t, 0)))

На MDN можно почитать про это

Comments

[ArgeoMer]

Cпасибо!

[ArgeoMer]

Ох, еще и консоль может по разному отрабатывать в браузере и песочнице на сайте. Потому что когда ты видишь консоль в песочнице на сайте открытой, она все равно, видимо, оптимизирована, и поэтому при втором и третьем выводе в консоль, она не обрабатывает их по отдельности, а когда берется за них current уже изменен. В отличии от браузера, который вывел второй консоль лог и только после этого вывел третий.