initialValue для useState

#1. Базова відмінність

---

#2. Приклад: без функції

Тут expensiveCalculation() виконається при кожному рендері, навіть якщо стан взагалі не змінювався.

Це може бути неефективно, якщо:

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

---

#3. Приклад: з функцією (лінива ініціалізація)

Тепер React:

• збереже функцію, але викличе її лише один раз, при першому рендері (монтуванні),
• при наступних рендерах не буде заново обчислювати expensiveCalculation().

Тобто () => expensiveCalculation() - це "лінива" ініціалізація стану.

---

#4. У чому практична користь

#Коли використовувати useState(() => ...):

• Коли обчислення стартового значення дороге:

  javascript

  Copy

  const [filtered, setFiltered] = useState(() => data.filter(x => x.active));

• Коли ініціалізація використовує зовнішні ресурси (наприклад, localStorage):

  javascript

  Copy

  const [theme, setTheme] = useState(() => { return localStorage.getItem("theme") || "light"; });

• Коли потрібно виконати код один раз, а не при кожному рендері.

---

#Коли можна без функції

Якщо initialValue - просте значення (число, рядок, булеве):

Тоді немає сенсу загортати його у функцію - це не дасть виграшу.

---

#Під капотом

React при виклику useState(arg) робить так:

• Якщо arg - значення, зберігає його напряму;
• Якщо arg - функція, викликає її (arg()) і зберігає результат.

Тобто:

Але другий варіант виконає функцію лише один раз при монтуванні.

---

#Підсумок