Разница между useRef () и {}

Question

Я читаю о useRef() и играю на простых примерах.

Меня удивляет то, что всякий раз, когда я заменяю

const MyComponent = ({value}) => {
  const myRef = useRef();
  [...]

на

const MyComponent = ({value}) => {
  const myRef = {};
  [...]

a Компонент работает так же. Вы знаете какой-нибудь пример, который показал бы реальное преимущество крючка?

Answer 1

Что ж, попробуйте

  const myRef = {};
  //..
  // at some point e.g. in click handler do:
  myRef.a = 123;

Теперь запустите повторный рендеринг компонента и значение журнала myRef, вы увидите, что сделанные вами изменения будут потеряны при следующем рендере. На каждом рендере создается новый myRef . Значение, возвращаемое useRef, с другой стороны, сохраняется в течение всего срока службы компонента.