Расскажите простым языком пожалуйста. Что тут происходит?

Question

[Gary_Ihar]

Подскажите пожалуйста, что происходит под капотом реакта? Хочется просто разобраться, а не просто тупо знать решение проблемы. Гуглил, но все вокруг да около

Вариант 1

const [counter, setCounter] = useState(0)

    const clicker = () => {
        setCounter(counter + 1)
        setCounter(counter + 1)
        setCounter(counter + 1)
        setCounter(counter + 1)
    }
    console.log('render')
    return ( 
        <div>
            <div>{counter}</div>
            <button onClick={clicker}>counter</button>
        </div>
    )

Вариант 2

const [counter, setCounter] = useState(0)

    const clicker = () => {
        setCounter(prev => prev + 1)
        setCounter(prev => prev + 1)
        setCounter(prev => prev + 1)
        setCounter(prev => prev + 1)
    }
    console.log('render')
    return ( 
        <div>
            <div>{counter}</div>
            <button onClick={clicker}>counter</button>
        </div>
    );

Вот, что я думаю:
Если идет несколько setCounter(counter + 1) подряд, то реакт просто берет последний и его делает. Если даже передать функцию setCounter(() => counter + 1) и вызывать подряд, то все равно будет последний выполнен. Но как только мы начинаем пользоваться аргументом этой функции setCounter((preState) => preState + 1), то где-то под капотом реакт начинает делать все последовательно и запоминает все действия с этим стейтом.

Могу где-то ошибаться прям оочень сильно, вот поправьте пожалуйста.

Comments

[Александр]

Если новое состояние вычисляется с использованием предыдущего состояния, вы можете передать функцию в setState. Функция получит предыдущее значение и вернёт обновлённое значение.

[Gary_Ihar]

Александр, да, но я не могу понять где я туплю в этой формулировке.

// counter = 0
setCounter(() => counter + 1)
setCounter(() => counter + 1)
// почему тут 1 ?
// -------------------------------
setCounter(prev => prev + 1)
setCounter(prev => prev + 1)
// почему тут 2 ? Откуда второй вызов setCounter знает, что над 
// стейтом уже были манипуляции и у него новое значение?

[Александр]

Gary_Ihar, Потому что в первом случае, в области видимости у Вас одна переменная counter, и она равна, допустим, нулю. Каждый вызов функции сделает по сути следующее setCounter(() => 0 + 1). Значение не будет обновляться только потому, что в компонент оно еще не пришло, но внутри замыкания useState уже обновилось. Во втором случае, значение переменной берет как раз из замыкания useState.

[Gary_Ihar]

Александр, о, ну это многое проясняет. А где Вы об этом узнали, исходники смотрели? Ток не говорите, что из

Если новое состояние вычисляется с использованием предыдущего состояния, вы можете передать функцию в setState. Функция получит предыдущее значение и вернёт обновлённое значение.

[Александр]

Gary_Ihar, Условно такой код.

const useValue = (initialValue) => {
  let currentValue = initialValue;
  
  return [
    () => currentValue,
    (arg) => {
      setTimeout(() => {
        if (typeof arg === 'function') {
          currentValue = arg(currentValue);
        } else {
          currentValue = arg;
        }
      });
    }
  ];
};

setTimeout символизирует некоторую логику в React'е (очередь обновлений), которая со временем обновит Вашу переменную.
Допустим, код в первом случае выглядит как-то так:

const [getAge, setAge] = useValue(1);
setAge(getAge() + 1);
setAge(getAge() + 1);
// Подождем все вызовы обновлений:
setTimeout(() => {
  console.log('age is', getAge()); // age is 2
  // равно двум, т. к. в области видимости было 1
}, 100);

А второй вариант будет выглядеть как-то так:

const [getAge, setAge] = useValue(1);
setAge(age => age + 1);
setAge(age => age + 1);
// Подождем все вызовы обновлений:
setTimeout(() => {
  console.log('age is', getAge()); // age is 3
  // на каждом setAge значение берется из замыкания (области видимости внутри useValue)
}, 100);

[Gary_Ihar]

Александр, огромное спасибо!

Answer 1

[Pavel Shvedov]

Учи что такое замыкания в javascript

Comments

[Gary_Ihar]

От части это верное напутствие, но я не понимал где его искать, из-за неопытности наверное и непонимания как устроен useState внутри.
В комментариях мне написали примерную реализацию функции useState

[Pavel Shvedov]

Gary_Ihar, чтоб понять почему происходит то, что происходит не нужно знать устройство useState, он никаким боком на это не влияет, это чисто джаваскриптовая фича, поучить ее можно в любом учебнике по JS, например https://learn.javascript.ru/closures,

[Gary_Ihar]

Pavel Shvedov, ну мне было проще понять с примером кода