Как менять состояние вкладки по интервалу

Полезная фича для демонстрации, например, уведомлений, которая может пригодиться на очень большом количестве сайтов

Для реализации нам необходимо создать состояния, между которыми мы хотим перемещаться:

javascript
1const states = [
2  { title: "Мессенджер", icon: Favicon1 },
3  { title: "Новое сообщение", icon: Favicon2 },
4];
5

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

javascript
1const [stateIndex, setStateIndex] = useState(0);
2
3// раз в секунду переходим на следующее состояние
4useEffect(() => {
5  const intervalId = setInterval(() => {
6    setStateIndex((prevIndex) => (prevIndex + 1) % states.length);
7  }, 1000);
8
9  return () => clearInterval(intervalId);
10}, []);
11

И в зависимости от текущего состояния изменяем параметры вкладки:

javascript
1useEffect(() => {
2  const link = document.querySelector("link[rel~='icon']");
3  const title = document.querySelector("head title");
4
5  if (link) {
6    link.href = states[stateIndex].icon;
7    title.textContent = states[stateIndex].title;
8  }
9}, [stateIndex]);
10

Очевидно, что в таком исполнении решение выглядит не очень красиво. Можно создать кастомный хук и вынести всю логику туда, например, или воспользоваться нативными контекстами. В общем, сделать из этого решения либу, которую можно будет легко перенести из проекта в проект