При вызове setCount происходит обновление состояния, что вызывает ре-рендер компонента в React, чтобы отобразить новое значение.

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

Пример:

import React, { useState, useRef } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  const countRef = useRef(0); // переменная, не вызывающая ре-рендер

  const handleClick = () => {
    setCount(count + 1); // обновит состояние и вызовет ре-рендер
    countRef.current += 1; // изменит значение без ре-рендера
  };

  return (
    <div>
      <p>Count (state): {count}</p>
      <p>Count (ref): {countRef.current}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}

Таким образом, useRef позволяет хранить изменяемое значение между рендерами без их вызова.

Почему происходит ре-рендер при вызове handleClick с setCount, и как избежать ре-рендера, сохранив переменную?