как использовать useRef для ссылки на последнее значение

Question

Люди используют useRef для сохранения последнего значения, такого как этот код

function MyComponent({ value }) {
  const valueRef = useRef();
  useEffect(() => {
    valueRef.current = value;
  });
}

Я знаю, что useEffect необходимо для одновременного режима.

, а useEffect выполняется в порядке определения

function MyComponent({ value }) {
  useEffect(() => {
    console.log('log1');
  });
  useEffect(() => {
    console.log('log2');
  });
}
// result is
// log1
// log2

, поэтому в приведенном ниже коде log1 печатается со старым значением, а log2 печатается с новым значением

function MyComponent({ value }) {
  const valueRef = useRef();
  useEffect(() => {
    console.log('log1', valueRef.current);
  });
  useEffect(() => {
    valueRef.current = value;
  });
  useEffect(() => {
    console.log('log2', valueRef.current);
  });
}

Я думаю, что это странно, потому что значение отличается в зависимости от позиции.

Как правильно использовать useRef для ссылки на последнее значение? (К вашему сведению, лучше использовать deps, чем useRef)

Answer 1

Идиоматический способ c состоит в том, чтобы сохранить некоторое «текущее» значение для следующего рендера и извлечь текущее значение ref (предыдущее значение). Hooks FAQ: Как получить предыдущий реквизит или состояние

const prevValueRef = useRef();
useEffect(() => {
  prevValueRef.current = value; // cache current value for next render
});
const prevValue = prevValueRef.current; // get previous value from last render

Демонстрация запуска песочницы