Странное поведение React setState с изменением переменной let

Когда вы нажимаете на изменитьСтрока2, значение локальной переменной letString равно 3.

Если вы хотите сохранить значение letString между циклами рендеринга, вы должны использовать использование состояния или даже использовать глобальную переменную области видимости (не рекомендуется).

Вы должны отслеживать нажатие на changeString1 в отдельной переменной:

const {useState} = React

function App() {
  const [statString, setStatString] = useState("2");
  const [clicked, setClicked] = useState(false)

  function changeString1() {
    setClicked(true)
    setStatString("1");
  }

  function changeString2() {
    setStatString(clicked ? "1" : "3");
  }

  return (
    <div>
      <h1>{statString}</h1>
      <button onClick = {changeString1}>changeString1</button>
      <button onClick = {changeString2}>changeString2</button>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<script crossorigin src = "https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src = "https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<div id = "root" />

Причина, по которой ваш код не работал должным образом, заключается в том, что каждый вызов App создает новый экземпляр переменной letState, которая связана с функцией changeString2, когда она равна определенный. React оптимизирует вызовы, которые не изменяют состояние, избегая ненужного повторного рендеринга. Поэтому, когда вы нажимаете второй раз, вы не вызываете замены функций обратного вызова. Поэтому, когда вы нажимаете на changeState2, это та же функция, что и в «предыдущем» рендере.

Пожалуйста, посмотрите на поток, который имеет место: -

1st click on changeString1

state changes

component re renders

letString gets re-initialized to 3 because of let letString = "3"

value of letString = 3;
value of statString = 1 (state);

2nd click on changeString1

value of letString gets set to 1 in the function call;

But value of statString(state) is already 1 so no state changes and component never re-renders and letString is not re-initialized

After 2nd click values are:-

letString = 1;
statString = 1(state);

Now, when you click on changeString2 value of letString is 1 and statString is also 1 so state doesn't changes and nothing happens and you just see 1.