Відповідь на попередні задачі

👉 Як правильно написали в коментарях - в обох випадках потрібно використовувати вбудований хук useRef, який призначений для збереження в собі будь-яких даних. Це дуже схоже на useState, але є декілька відмінностей.

1️⃣ Зміна useRef не викликає новий рендер. Дуже зручно якщо нам потрібно зберігати якусь супутню інформацію, яка не потребує перемальовувань, або викликає циклічний рендер, як у задачі № 1.

2️⃣ useRef мутується за допомогою властивості current:

const renderCounter = useRef(0);
renderCounter.current = renderCounter.current +1

Також, в useRef є ще одна корисна можливість "з коробки":

Якщо передати отриманий з ref об'єкт в ref елементу, можна отримати посилання на цей DOM елемент:

export default function App() {
  const btnRef = useRef<HTMLButtonElement | null>(null);

  useEffect(() => {
    btnRef.current?.focus();
  }, []);

  return <button ref={btnRef}>Btn</button>;
}

💪 Плюс такого підходу полягає в тому, що нам не потрібно орієнтуватися на клас, або id елемента. Коли вони зміняться, в коді нічого не зламається, навіть якщо ваш колега не зверне на це увагу. Плюс React сам відповідає за те, щоб тримати там посилання на актуальну версію DOM елемента. Тільки пам'ятайте, що під час першого рендеру, самогу елементу там ще не буде, оскільки перший рендер відбувається ДО фази монтування DOM елемента в DOM дерево.

П.М. Судячи зі швидкості правильних відповідей потрібно переходити на складніші та цікавіші завдання. Кеш вам завтра принести чи що?)

@reactbeginners