Життєвий цикл компонентів React

Це структура даних для збереження стану компонента

Це анімація, яка показує, як компонент взаємодіє з DOM

Це послідовність фаз, через які проходить компонент від моменту його створення до моменту його видалення з DOM-дерева

Це план роботи компонента під час виконання коду

Старт, Робота, Фініш

Ініціалізація, Виконання, Завершення

Фаза монтування / створення, Етап оновлення, Демонтування / знищення

Конструкток, Обробка подій, Деструктор

Коли оновлюються реквізити (props) або коли оновлюється стан

Коли компонент був видалений з DOM

Коли компонент вже пройшов фазу завершення

Коли в коді викликається метод render()

useEffect викликається лише під час монтування компонента та при кожному оновленні, не приймає параметрів

useEffect дозволяє виконувати ефекти після рендерингу компонента. Приймає два параметри: функцію, яка містить логіку ефекту, і масив залежностей, від якого залежить виклик ефекту

useEffect призначений тільки для виконання HTTP-запитів, приймає адресу серверу та тип методу HTTP

useEffect призначений для реалізації анімації в компонентах, приймає назву css-властивості, початкове і кінцеве значення, тривалість ефекту та тип функції переходу (анімації)

useEffect взаємодіє тільки з локальним станом компонента, не призначений для роботи з зовнішніми ресурсами

useEffect може використовуватися для взаємодії з REST API, в коді функції зворотного виклику, що реалізуї ефект треба встановлювати отримані дані в стан компонента.

При використанні useEffect з REST API не потрібно передавати масив залежностей, оскільки це може призвести до помилок

При використанні useEffect з REST API отримані дані потрібно повернути із функції, що передається в якості 1го аргумента

useEffect не може емулювати метод componentDidUpdate у функціональних компонентах

Для емуляції componentDidUpdate використовується окремий хук useDidUpdate

useEffect може емулювати componentDidUpdate, якщо вказати залежності, від яких залежить виклик ефекту, наприклад, [count] для оновлення при зміні count

Для емуляції componentDidUpdate використовується окремий хук useUpdate

useEffect не може емулювати метод componentWillUnmount у функціональних компонентах

useEffect може емулювати componentWillUnmount, якщо функція, яку він повертає, містить логіку очищення, наприклад, відписку від подій або очищення ресурсів

Для емуляції componentWillUnmount використовується окремий хук useWillUnmount, оскільки useEffect призначений тільки для componentDidMount та componentDidUpdate

Для емуляції componentWillUnmount використовується деструктор

useEffect(() => {

// Логіка отримання даних за userId

const fetchData = async () => {

const result = await fetch(`https://api.example.com/users/${userId}`);

const data = await result.json();

setUserData(data);

};

fetchData();

}, []);

useEffect(() => {

// Логіка отримання даних за userId

const fetchData = async () => {

const result = await fetch(`https://api.example.com/users/${userId}`);

const data = await result.json();

setUserData(data);

};

fetchData();

}, [userId]);

useEffect(() => {

// Логіка отримання даних за userId

const fetchData = async () => {

const result = await fetch(`https://api.example.com/users/${userId}`);

const data = await result.json();

setUserData(data);

};

fetchData();

});

Підписка на подію (клік на кнопку) відбувається при кожному рендері компонента, і відписка відбувається при його знищенні. Кожен новий рендер створює новий слухач події.

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

Підписка на подію (клік на кнопку) відбувається при кожному оновленні значення count, і відписка відбувається при його знищенні. Логіка підписки буде викликана при кожному оновленні компонента через зміну count.

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

Мають доступ і до props, і до стану

Мають доступ тільки до props

Мають доступ тільки до стану

Не мають доступу до props та до стану