useState

Уникнення відтворення початкового стану

React зберігає початковий стан один раз і ігнорує його при наступних рендерах.

function TodoList() {
  const [todos, setTodos] = useState(createInitialTodos());
  // ...

Хоча результат createInitialTodos() використовується лише для початкового рендерингу, ви все одно викликаєте цю функцію для кожного рендерингу. Це може бути марнотратством, якщо створюються великі масиви або виконуються складні обчислення.

Щоб вирішити цю проблему, ви можете передати його як функцію-ініціалізатор до useState замість:

function TodoList() {
  const [todos, setTodos] = useState(createInitialTodos);
  // ...

Зверніть увагу, що ви передаєте createInitialTodos, яка є самою функцією , а не createInitialTodos(), яка є результатом її виклику. Якщо ви передасте функцію в useState, React викличе її лише під час ініціалізації.

React може викликати ваші ініціалізатори двічі під час розробки, щоб перевірити, що вони чисті.

Скидання стану за допомогою ключа

Атрибут key часто зустрічається під час відображення списків. Однак він має й інше призначення.

Ви можете скинути стан компонента, передавши інший ключ компоненту. У цьому прикладі кнопка Reset змінює змінну стану version, яку ми передаємо як key до Form. Коли key змінюється, React перестворює компонент Form (і всі його дочірні елементи) з нуля, тому його стан скидається.

Прочитайте Збереження та скидання стану, щоб дізнатися більше.

Зберігання інформації з попередніх рендерів

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

У більшості випадків вам це не потрібно:

• Якщо потрібне вам значення можна обчислити повністю з поточного пропу або іншого стану, видаліть цей надлишковий стан взагалі. Якщо вас турбує надто часте переобчислення, вам може допомогти useMemoхук.
• Якщо ви хочете скинути стан всього дерева компонентів, передайте інший ключ вашому компоненту.
• Якщо можете, оновіть усі відповідні стани в обробниках подій.

У рідкісному випадку, коли жоден з цих способів не підходить, існує шаблон, який можна використати для оновлення стану на основі значень, які вже було відрендерено, викликавши функцію set під час рендерингу вашого компонента.

Ось приклад. Цей компонент CountLabel відображає переданий йому проп count:

export default function CountLabel({ count }) {
  return <h1>{count}</h1>
}

Скажімо, ви хочете показати, чи збільшився лічильник або зменшився з часу останньої зміни. Проп count цього не показує - вам потрібно відстежувати його попереднє значення. Додайте змінну стану prevCount, щоб відстежувати її. Додайте ще одну змінну стану з назвою trend, щоб відслідковувати, чи підрахунок збільшився або зменшився. Порівняйте prevCount з count, і якщо вони не рівні, оновіть і prevCount, і trend. Тепер ви можете показати як поточний проп count, так і як він змінився з часу останнього рендерингу.

Зверніть увагу, що якщо ви викликаєте функцію set під час рендерингу, вона має бути всередині умови на кшталт prevCount !== count, а всередині умови має бути виклик типу setPrevCount(count). Інакше ваш компонент буде повторно рендеритися у циклі, доки не зазнає невдачі. Крім того, таким чином ви можете оновити стан лише компонента , що рендериться у даний момент . Виклик функції set компонента іншого під час рендерингу є помилкою. Нарешті, ваш виклик set все одно повинен оновлювати стан без мутації - це не означає, що ви можете порушувати інші правила чистих функцій.

Цей шаблон може бути важко зрозуміти, і його зазвичай краще уникати. Однак, це краще, ніж оновлювати стан в ефекті. Коли ви викликаєте функцію set під час рендерингу, React повторно відрендерить цей компонент одразу після того, як ваш компонент вийде з оператором return, і перед рендерингом дочірніх. Таким чином, дочірні компоненти не потрібно рендерити двічі. Решта функцій вашого компонента все одно буде виконана (і результат буде відкинуто). Якщо ваша умова нижче всіх викликів хука, ви можете додати ранній return;, щоб перезапустити рендеринг раніше.

Налагодження

Я оновив стан, але журнал показує старе значення

Виклик функції set не змінює стан у коді, що виконується:

function handleClick() {
  console.log(count);  // 0

  setCount(count + 1); // Request a re-render with 1
  console.log(count);  // Still 0!

  setTimeout(() => {
    console.log(count); // Also 0!
  }, 5000);
}

Це пов'язано з тим, що стани поводяться як знімок. Оновлення стану вимагає нового рендерингу з новим значенням стану, але не впливає на countзмінну JavaScript у вашому вже запущеному обробнику події.

Якщо вам потрібно використати наступний стан, ви можете зберегти його у змінній перед передачею у функцію set:

const nextCount = count + 1;
setCount(nextCount);

console.log(count);     // 0
console.log(nextCount); // 1

Я оновив стан, але екран не оновлюється

React проігнорує ваше оновлення, якщо наступний стан дорівнює попередньому, як визначено порівнянням Object.is. Зазвичай це трапляється, коли ви безпосередньо змінюєте об'єкт або масив у стані:

obj.x = 10;  // 🚩 Wrong: mutating existing object
setObj(obj); // 🚩 Doesn't do anything

Ви змінили існуючий об'єкт obj і передали його назад до setObj, тому React проігнорував оновлення. Щоб виправити це, вам потрібно переконатися, що ви завжди замінюєте об'єкти та масиви в стані замість того, щоб мутувати їх:

// ✅ Correct: creating a new object
setObj({
  ...obj,
  x: 10
});

Я отримую помилку: "Занадто багато повторних рендерингів"

Ви можете отримати помилку, яка говорить: Too many re-renders. React limits the number of renders to prevent an infinite loop. Зазвичай це означає, що ви безумовно встановлюєте стан під час рендеру, тому ваш компонент потрапляє у цикл: рендер, відправка стану (яка викликає рендер), рендер, відправка стану (яка викликає рендер) і так далі. Дуже часто це спричинено помилкою у визначенні обробника події:

// 🚩 Wrong: calls the handler during render
return <button onClick={handleClick()}>Click me</button>

// ✅ Correct: passes down the event handler
return <button onClick={handleClick}>Click me</button>

// ✅ Correct: passes down an inline function
return <button onClick={(e) => handleClick(e)}>Click me</button>

Якщо ви не можете знайти причину цієї помилки, натисніть на стрілку поруч з помилкою в консолі та перегляньте стек JavaScript, щоб знайти конкретний виклик функції set, відповідальний за помилку.

Моя функція ініціалізації або оновлення запускається двічі

У Суворому режимі React викликатиме деякі ваші функції двічі замість одного:

function TodoList() {
  // This component function will run twice for every render.

  const [todos, setTodos] = useState(() => {
    // This initializer function will run twice during initialization.
    return createTodos();
  });

  function handleClick() {
    setTodos(prevTodos => {
      // This updater function will run twice for every click.
      return [...prevTodos, createTodo()];
    });
  }
  // ...

Це очікувано і не повинно зламати ваш код.

Така лише для розробки поведінка допомагає вам зберегти компоненти чистими. React використовує результат одного з викликів та ігнорує результат іншого. Поки ваш компонент, ініціалізатор та функції оновлення є чистими, це не повинно впливати на вашу логіку. Однак, якщо вони випадково стануть нечистими, це допоможе вам помітити помилки.

Наприклад, ця нечиста функція оновлення змінює масив у стані:

setTodos(prevTodos => {
  // 🚩 Mistake: mutating state
  prevTodos.push(createTodo());
});

Оскільки React викликає вашу функцію-редуктор двічі, ви побачите, що todo було додано двічі, і зрозумієте, що сталася помилка. У цьому прикладі ви можете виправити помилку шляхом заміни масиву замість його мутації:

setTodos(prevTodos => {
  // ✅ Correct: replacing with new state
  return [...prevTodos, createTodo()];
});

Тепер, коли ця функція-редуктор є чистою, її виклик зайвий раз не впливає на поведінку. Ось чому повторний виклик цієї функції в React допомагає знаходити помилки. Чистими мають бути лише функції компонента, ініціалізатора та редуктора. Обробники подій не мають бути чистими, тому React ніколи не викликатиме ваші обробники подій двічі.

Прочитайте Збереження компонентів у чистоті щоб дізнатися більше.

Я намагаюся передати стан функції, але вона натомість викликається

Ви не можете перевести функцію у такий стан:

const [fn, setFn] = useState(someFunction);

function handleClick() {
  setFn(someOtherFunction);
}

Оскільки ви передаєте функцію, React вважає, що someFunction є функцією-ініціалізатором , і що someOtherFunction є функцією оновлення, тому він намагається викликати їх і зберегти результат. Щоб насправді зберегти функцію, вам потрібно поставити перед ними () => в обох випадках. Тоді React збереже передані вами функції.

const [fn, setFn] = useState(() => someFunction);

function handleClick() {
  setFn(() => someOtherFunction);
}