Берлога программиста | Веб и не только

Забайтил на опрос 😎 Есть короче такая контора CloudFlare, причем если Вы про нее не слышали это очень странно ибо примерно треть мирового трафика проходит через нее - DNS, Anti-DDoS, CDN и куча других критических вещей строиятся на глобальных датацентрах этого IT-гиганта и если они "падают" то падает и огромная доля сети, а кому-то "рикошетит" в силу использования сервисов использующих CloudFlare - такой слоеный пирог короче получается. Что случилось 12 сентября этого года - вышла новая версия панели управления (Dashboard) Cloudflare, в которой была ошибка - в компоненте React был использован useEffect-хук с зависимостью от объекта, который при каждом изменении состояния или пропсов создавался заново. Эта ошибка приводила к тому, что панель управления сделала множество лишних вызовов API к сервису «Tenant Service». По-сути клиенты CloudFalre из-за этой ошибки задудосили сервис ибо каждый клиент впадал в бесконечный цикл вызовов API... Как это работает на абстрактном примере:

import { useEffect, useState } from "react";

function Organizations() {
  const [orgs, setOrgs] = useState([]);

  // ⚠️ проблема - объект { headers: { ... }} создаётся заново при каждом рендере
  const requestOptions = {
    headers: {
      "X-User": "123"
    }
  };

  useEffect(() => {
    fetch("/api/organizations", requestOptions)
      .then(r => r.json())
      .then(data => setOrgs(data));
  }, [requestOptions]); // ← зависимость меняется каждый рендер → бесконечные вызовы

  return <div>{orgs.length}</div>;
}

Что происходит? • при каждом обновлении состояния → компонент перерисовывается • requestOptions создаётся заново → новый объект → useEffect снова срабатывает • useEffect делает новый запрос → обновляет state → новый рендер → снова запрос результат - лавина API-вызовов Да, вот такая банальная детская ошибка привела к тому что часть сервисов этого гиганта легла... В нашем примере все лечится просто - можно внести объект requestOptions в тело хука, а из массива зависимостей убрать, а если он создается динамически прокидывать только то от чего завсит объект / мемоизировать его. Подробнее кейс в их блоге

Видимо навайбкодили 🚽

Скоро вернуть к нашему циклу про TypeScript 🖼️ и затем перейдем к реакту 🖼️, буду учить на допускать таких ошибок))) Берлога программиста | Чат

Катнул релиз в своем SaaS (чуть позже расскажу что делаю), ща буду посты писать, бодрого всем понедельника

A F B D C E A - первый console.log F - дальше все идет микро- и макротаски, последний синхронный вызов B - первый микротаск, но ВОЗВРАТ извет в следующий then - он идет цепочкой и его еще нет в очереди! Он будет помещен в КОНЕЦ очереди D - следующий микротаск C - вот теперь тот микротаск который только был помещен в конец очереди отрабатывает E - мы дошли до макротасков - это setTiteout

очень мало верных ответов)))) короче ждите бесплатный курс на степике... ответ выложу через часик

😎 А пока воооот Вам на закрепление пройденного (это уже уровень задачек с собеседований)

console.log("A");

Promise.resolve()
  .then(() => {
    console.log("B");
    return Promise.resolve("C");
  })
  .then((value) => {
    console.log(value);
  });

Promise.resolve().then(() => console.log("D"));

setTimeout(() => console.log("E"), 0);

console.log("F");

Одна из миссий этого канала чтобы вы могли даже если тупо генерите код нейронками потом отдебажить его, найти проблемы, оптимизировать - опять же сейчас никто не платит за код, а платят за понимание. Пока Вы это не осознаете и не усвоите базу работы не будет. Даже если как-то устроитесь то при первой же реальной проблеме это все быстро просекут

Вот это красиво Вы отреагировали на пост, мои дорогие, ценю ❤️

Кстати 70% выше проголосовали что все знают, но справились верно только 50%, так что очень важно оценивать реально свои знания и постоянно их совершенствовать

Итак, в чем дело если кратко: В первую очередь идет обычный синхронный код, поскольку жабаскрипт однопоточный: он идёт строка за строкой как конвейерная лента:

console.log(1);

→ сразу выводит 1.

setTimeout(() => console.log(2));

→ запускает таймер с задержкой по умолчанию 0, но колбэк в очередь задач, а не выполняется сразу. Эта штука называется макротаск (ниже поясню)

Promise.resolve().then(() => console.log(3));

→ создаёт уже зарезолвленый промис, а колбэк из .then(...) попадает в очередь микрозадач (microtasks).

console.log(4);

→ сразу выводит 4 После окончания всего синхронного кода на стеке у нас уже выведено: 1 4 🔥 А тепееееееерь самое интересное - в JavaScript есть две очереди задач: Микротаски (microtasks) - это задачи повышенного приоритета. Выполняются сразу после завершения всего синхронного кода и перед любыми таймерами. К микротаскам относятся: .then(), .catch(), .finally() у Promises, queueMicrotask(), MutationObserver (двумя последними пока не забивайте себе голову и запомните про промисы) Пока микротаски не закончатся - движок не перейдёт к макротаскам. А к макротаскам относятся: setTimeout, setInterval, setImmediate, I/O (события ввода-вывода), requestAnimationFrame (по сути - очередь "кадров" при перерисовке экрана, про это в других постах)

Главное правило: микротаски всегда выполняются раньше макро, даже если у setTimeout(fn, 0) стоит задержка 0

Так что в примере нашем смотрим какие микрозадачи сначала (вывести 3 в промисе) и потом макро задача (вывести 2 в таймауте), в итоге имеем: 1 4 3 2 Вот и вся "Магия")))) Запомнить это все стоит поскольку на собесах спрашивают только в путь это. Берлога программиста | Чат

Правильный ответ 1432 10 🔥под постом и без выноса мозга объясню почему так

пока голосуйте - через пару часиков поясню что к чему

Как много голосов от тех кто знает! Ну хорошо, вопрос к умникам, что выведет этот код и в каком порядке?

console.log(1);

setTimeout(() => console.log(2));

Promise.resolve().then(() => console.log(3));

console.log(4);

ниже опрос

Так-с, вчера не было времени писать, уверен вы по мне скучали

Эксклюзивная новость можно сказать Сбер открыл веса своих моделей на HuggingFace, но еще не успел написать об этом статью, однако ребята на хабре оказались пошустрее https://habr.com/ru/news/968530/ GigaChat3-702B-A36B-preview - 702 млрд общих (⚠️) и 36 млрд активных параметров - просто обалдеть размерчик GigaChat3-10B-A1.8B - 10 млрд общих и 1,8 млрд активных - сейчас качаю, есть GGUF, 11 ГБ примерно надо, потещу.

Господа, кто сейчас проходит первые собеседования или недавно устроился, какие вопросы из технички Вам показались самыми сложными? Может это приколы с промисами и setTimeout или что-то с хуками и жизненным циклом компонентов? Или что-то другое?

Начал делать кстати бесплатный курс по JavaScript на Степике - я придумал кое-что новое и для его прохождения не надо уметь верстать... хотя будем делать полноценный проект. Вот так, своя методика Ориентировочно через недельки две добью первый модуль и можно будет опробовать.

С Вас поддержка реакциями под постами и бустами https://t.me/c/1400947488?boost

Владею - значит уверенно можете что-то сделать, отверстать, позиционировать на страницу и так далее