Когда запускается эффект

Эффект, которому передана только функция, запускается после каждой отрисовки, даже той, которая не имеет к нему отношения. В этом упражнении в приложении есть ещё и текстовое поле для имени на билете. Каждая нажатая клавиша меняет состояние, React снова отрисовывает страницу, и эффект снова задаёт заголовок, хотя лайки не изменились. Для заголовка это лишь небольшая лишняя работа. Но эффект, который загружает данные или запускает таймер, не должен срабатывать при каждой клавише.

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

useEffect(() => {
    console.log("После каждой отрисовки");
});

useEffect(() => {
    console.log("Один раз, когда компонент появился");
}, []);

useEffect(() => {
    console.log("В начале и при каждом изменении likes");
}, [likes]);

• Без массива эффект запускается после каждой отрисовки.
• С пустым массивом [] меняться нечему, поэтому эффект запускается только после первой отрисовки, когда компонент появляется на странице.
• С [likes] он запускается после первой отрисовки, а потом после каждой отрисовки, в которой likes изменилось. С [likes, name] — когда изменилось любое из них.

Какие зависимости нужны эффекту? Каждая переменная состояния и каждый проп, которые он использует. У эффекта, который задаёт заголовок по likes, зависимости — [likes]. Если пропустить одну, эффект не запустится при изменении этого значения, и страница будет показывать старое.