Что такое useState

Question

Что такое useState

Тип вопроса: React Вероятность: 24% Категория: Frontend Разработчик

Ответ

useState — это хук в React, позволяющий добавлять состояние в функциональные компоненты. Он возвращает массив из двух элементов: текущее значение состояния и функцию для его обновления. При вызове функции обновления компонент перерендеривается.

Пример:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Вы кликнули {count} раз</p>
      <button onClick={() => setCount(count + 1)}>
        Нажми меня
      </button>
    </div>
  );
}

Особенности:

Сохраняет состояние между рендерами
Обновление асинхронное (не гарантирует мгновенное изменение)
При обновлении состояния происходит поверхностное сравнение (для объектов/массивов)

Ответ 18+ 🔞

Давай я тебе про useState расскажу, как есть, без этих ваших заумных учебников, которые читать — терпения ноль, ебать.

Вот представь, у тебя есть функциональный компонент, он как пустой холодильник. Холодный, нихуя в нём нет. А тебе надо, чтобы там колбаса лежала, и чтобы её можно было достать и даже новую положить. Вот useState — это такой волшебный крючок, на который эту колбасу-состояние вешаешь.

Вызываешь эту штуку, а она тебе в ответ — массив из двух вещей. Первая — это сама твоя текущая колбаса (значение состояния). Вторая — это функция, типа волшебная палочка, ты ей крикнул — и новая колбаса на том же крючке висит. И как только колбаса меняется, весь твой компонент (холодильник) пересобирается заново, чтобы показать свежий ассортимент.

Вот смотри, как это выглядит в коде, тут всё просто:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Вы кликнули {count} раз</p>
      <button onClick={() => setCount(count + 1)}>
        Нажми меня
      </button>
    </div>
  );
}

Видишь? useState(0) — вешаем на крючок начальную колбасу, ноль. count — это мы колбасу с крючка снимаем, чтобы посмотреть. setCount — это та самая палочка-выручалочка, чтобы новое значение повесить.

А теперь три главных пункта, чтобы не облажаться:

Состояние живёт между рендерами. Ты кликнул — компонент перерисовался, а колбаса (значение count) не скисла, она сохранилась. Не как в обычной переменной, которая обнуляется.
Обновление — асинхронное, ёпта. Это значит, когда ты вызываешь setCount, React не бежит менять значение сию секунду. Он говорит: «Ладно, чувак, запомнил, сделаю когда будет удобно в рамках своей кухни». Не пытайся сразу после setCount читать новое значение — там ещё старое будет.
Сравнение поверхностное. Это самый важный пункт, блядь! Если ты в состоянии хранишь объект или массив, и меняешь его внутренности напрямую, React этого не заметит, сука! Он смотрит: «А, ссылка на массив та же? Та же. Значит, ничего не менялось, перерисовывать не буду». Поэтому всегда создавай новый объект или массив, когда обновляешь. Иначе будешь сидеть и думать: «Почему не работает, я же всё сделал?» — а потому что сделал, как мудак.

Вот и вся магия. Не усложняй. Повесил колбасу, меняешь её через специальную функцию — и всё работает. Главное — про объекты не забывай, а то охуеешь потом.