JavaScript

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

Почему значение 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 ( 

     

  ); 

}
вот вывод
Кирилл Баженов
Кирилл Баженов
163
Console.log не ведет себя как какой-то блокирующий метод, и можно видеть неактуальные на момент вызова данные. На самом же деле все происходит так, как это написано в коде.

Возможно эта ссылка будет полезна:
https://developer.mozilla.org/ru/docs/Web/API/Console/log
Пожалуйста, обратите внимание, что если вы логируете объекты в последних версиях Chrome и Firefox, то что вы вывели в консоль, является ссылкой на объект, и не обязательно является его "значением" на момент вызова console.log()

  1. Так же призываю не писать хуков в хелперах, это уже чистейший говнокодинг.
  2. И названия функций (не касается функций-конструкторов) и css классов писать с большой буквы - это моветон. С большой буквы пишем только классы и функции-конструкторы! А вот их экземпляры пишем уже по их имени но с маленькой.
Николай Горин
Николай Горин
1 948
Лучший ответ
Проблема в том, что вы пытаетесь изменить значение t.current внутри хука useEffect, но t.current - это объект, который не следует изменять напрямую. Вместо этого вы должны хранить изменяемое значение в state и обновлять его с помощью функции setState.

Вот пример того, как это можно исправить:

 import "./styles.css";  

import {useState, useRef, useEffect} from 'react'  

  

function UseMe() {  

  const [count, setCount] = useState(23)  

  console.log(count, 0)  

  useEffect(() => {  

    console.log(count, 1)  

    setCount(count + 1)  

    console.log(count, 2)  

  })  

}  

  

export default function App() {  

  const q = UseMe()  

  return (  

      

  );  

}
AK
Azat Kaliyev
1 957

Похожие вопросы