14544
Блог Lead JS-разработчика из Хельсинки Автор: @bekharsky По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv Чат: https://t.me/htmlshitchat
#заметка дня
Интересно наблюдать, как с приходом Bun на сцену JavaScript-сред расшевелились все остальные.
Например, вот Parcel.js. Казалось бы, ну сборщик и сборщик, но начиная с его 2 версии каждая минорная удивляет!
В версии 2.12.0 появилась, например, поддержка макросов: https://parceljs.org/blog/v2-12-0/
Что такое макросы? Это код, который выполняется в момент сборки, оставляя за собой константы, регулярки и всё прочее, что можно сгенерировать. В примере выше (из новости) по переданным строкам генерируется регулярка. Удобно, если нужно создать кучку однотипных виджетов, баннеров, сборок под конкретных клиентов.
И вот появились они сначала как раз в Bun.
Ну и LightningCSS тоже не стоит на месте. Если раньше он успешно заменял собой PostCSS, то начиная с этой версии — понимает директиву import и собирает ваш CSS в кучу, без препроцессоров.
Очень ждём поддержку React Server Components, потому что это будет первая "ванильная" реализация. В смысле, не в составе фреймворка.
Пробуем, котаны!
#parcel #bundler #macros
🖥 45+ IT-компаний ищут стажёров и джунов
Карьерные форумы "Найти IT" — это шанс пообщаться с топовыми компаниями и получить оффер. Среди работодателей будут Сбер, Яндекс, Kaspersky, Avito и многие другие.
Что вас ждёт:
🔹 Мастер-классы, кейсы и Q&A-сессии.
🔹 Розыгрыш призов среди участников.
🔹 Обширное пространство для общения и обмена опытом.
🔹 Карьерные консультации от HR-ов.
Участие бесплатное!
Выбирайте город и регистрируйтесь👇🏻
📍 Москва — 6 марта
📍 Санкт-Петербург — 6 апреля
📍 Новосибирск — 10 апреля
#фишка и #статья дня
Надоело проигрывать битву z-index? Используй BFG от CSS: infinity.
Ладно, кроме шуток (хотя я и не шутил). С помощью infinity можно гарантировать верно скруглённые углы на прямоугольниках, мы с вами уже рассматривали алгоритм для веба и Flutter: /channel/htmlshit/1565
Вместо
border-radius: 9999px;
border-radius: calc(infinity * 1px);
calc(infinity) = calc(1 / 0)
calc(1px / 0) = calc(infinity * 1px)
#заметка дня
Не знаю, как вас, но меня очень раздражает то, что в React Router состоянием скролла надо управлять самостоятельно.
Перемещаешься по роутам, а скролл на месте остаётся. Ну типа, што.
К счастью, решение что для v5 React Router, что для v6 одинаковое:
function ScrollToTop() {
const { pathname } = useLocation();
useLayoutEffect(() => {
document.documentElement.scrollTo(0, 0);
}, [pathname]);
return null;
}
<BrowserRouter>
<Routes>
...
</Routes>
<ScrollToTop/>
</BrowserRouter>
Изучил CSS, но не знаешь JS?
Вместо кодинга дома ты играешь в CS?
Ты пытаешься прогать и часто тупишь?
Или на одном месте долго сидишь?
Подпишись на канал!
Стань сильнее всех тех,
Кто не начал сегодня,
Загубил свой успех!
Действуй чётко и быстро!
Не смотря на других!
Они сделали выбор...
Но ТЫ не из таких!
Ты бесстрашный Frontend'ер,
Программист всех миров!
IT-воин всесильный,
И властитель компов!
Я верю в тебя!
Я тебе помогу!
И ты станешь успешным, если я подскажу!
⭐️⭐️⭐️
Меня зовут - Андрей Шопинский и я ментор по Frontend-разработке.
🔴 1 марта в 18:30 по МСК я проведу бесплатный эфир в своём Telegram-канале на тему:
⚠️ Как Junior-разработчику пройти собеседование по JavaScript?
❗️Подписывайся на мой канал, чтобы не пропустить эфир!
Реклама. Шопинский Андрей Олегович ИНН 312834439322. erid: LjN8KE4P7
#статья дня
Уже известный нам Ахмад Шадид продолжает выдавать шикарное.
Сейчас он осваивает интерактив в своих статьях. В прошлый раз это была статья о размере кликабельных областей в виджетах: https://ishadeed.com/article/target-size
А теперь — о :has(). Мне кажется, в CSS нет более популярного селектора в последние годы :)
Встречайте: https://ishadeed.com/article/css-has-guide
Да, стоит напомнить, что :has официально поддерживается во всех мейнстримных браузерах, но тот же Firefox ESR или Safari 15 его не поддерживают, так что применяйте вдумчиво.
#css #has
#такое дня
Каждый раз когда тебе кажется, что ты плохой разработчик, помни: скорее всего так и есть это текстовое поле в Google Maps делал разработчик из, очевидно, Google. С зарплатой много выше твоей.
Я, честно, не знаю, как это может кого-то успокоить. Но вдруг.
#видео дня
Я, конечно, не дизайнер, но Figma пользуюсь, естественно. И постоянно на связи с нашим штатным дизайнером команды.
Иногда мне кажется, что возможности Figma почти безграничны, а потом оказывается, что это и правда так.
Например, вы знали, что есть плагины, позволяющие синхронизировать ваши макеты с реальными данными? Например, из Google Sheets.
Вот и я не знал.
Пока не увидел это: https://www.youtube.com/watch?v=3nXbUH9YYgo
Ссылка на обучающий файл из презентации: https://www.figma.com/community/file/1207693268826001427
Сам плагин: https://www.figma.com/community/plugin/735770583268406934/google-sheets-sync
Это, конечно, просто взрывает мозг. Но, с другой стороны, я прямо сейчас нахожусь в ситуации, когда слишком продвинутые прототипы сильно мешают работать.
Расширенные прототипы великолепно подходят для проведения юзер-сессий, но без адекватного каталога виджетов и состояний они не имеют смысла и делают жизнь разработчиков сложнее.
В любом случае, подобные синхронизаторы отлично подходят чтобы сразу протестировать дизайн без кода и, вообще, понять, работает ли он.
Пользуемся, котаны! И делитесь вашим мнением о расширенных прототипах.
#figma #design #prototype
💙🎓Прокачайте скилы c Холдингом Т1! Запускаем программу найма в формате ИТ-интенсива.
Открытые школы Т1 — это новый образовательно-карьерный формат, объединяющий offer week и обучение без отрыва от работы.
🤚Поможем улучшить навыки и освоить новые перспективы, если вы готовы к переменам в карьере и хотите присоединиться к команде Холдинга Т1 — лидера* ИТ-рынка, а также имеете опыт работы от 1 года в одном из направлений подбора.
Направления:
📊Системный аналитик
☕️Разработчик Java
📱Разработчик JS+React
🪲Ручной и автотестировщик
📌Как это работает?
🔹Подайте заявку на сайте
⬇️Рассмотрим резюме, если твой профиль подойдет, то попросим пройти тестирование👌 При успешном прохождении — зачислим в группу
🔹Лучшим назначим интервью и направим оффер!
Формат обучения: онлайн (8 часов в неделю)
Программа длится 1 месяц
🏳️Принимаем заявки до 25 февраля!
*По версии CNews Analytics 2022, TAdviser 2021 и RAEX 2023
Реклама. ООО "Т1". ИНН 7720484492.
#фишка дня
Правило position: sticky в своё время было одной из самых желанных в CSS вещей, ведь что может быть более декларативно чем “закрепи элемент вот тут когда я доскроллил вот сюда”?
А вот много лет приходилось писать JS для этой цели. Sticky даже становился частью фреймворков.
Но что делать, если элемент, который вам нужно закрепить, хочется видеть даже тогда, когда родитель выехал за пределы области видимости? Как правило, стики уезжает вместе с ним.
Ответ прост! Поставить «прилипчивый» элемент последним, а родителю задать sticky на высоту контента перед ним. Не элементу!
Вуаля: https://codepen.io/alinaki/pen/rNdYajy
Дым и зеркала :)
#css #sticky #бородач
#статья дня
— Да хули там того фронтенда?
Ну признавайтесь, слышали же хоть раз подобное высказывание, да?
Количество шуток в сторону фронтенд-разработки поражает. Да, не всегда от умных людей, но тем не менее.
Но вопрос-то остаётся открытым. А в самом-то деле, хули там того фронтенда? Как посчитать?
И мы сейчас даже не будем затрагивать огромное количество технологий и поддержке разных браузеров и сред, это детали. Они больше говорят о хорошей памяти и наработке опыта, чем о реальной сложности задачи.
Начать можно с простого: а что такое, собственно, UI? В математическом смысле в последнее время пропагандируется что-то вроде: "Интерфейс это функция состояния".
И так и есть: в модных нынче декларативных фреймворках (и в CSS, кстати, тоже) вы определяете состояния, от которых потом строится интерфейс. Разные состояния — разный результат.
Кстати, вот и подошли: а сколько их, этих состояний? Кто-то же считал?
И таки да, считали! Вот, например, статья Винса Спилмана о девяти состояниях UI:
Nothing — Пустой элемент
Loading — Загрузка
None — Ничего не вернулось
One — Одна сущность
Some — Коллекция сущностей
Too Many — Сущностей слишком много, нужна пагинация
Incorrect — Ошибка, неуспех
Correct — Успех
Done — Операция завершена
Посмотрите саму статью, там с иллюстрациями и подробнее.
Но даже эта статья не совсем то, что я хотел бы вам сегодня показать. Дейв Руперт пошёл дальше и рассматривает всё более детально.
Состояние курсора, атрибуты, язык, псевдоклассы, псевдоэлементы, фокус, ARIA, размер и положение экрана, режим энергосбережения, выбранная пользователем тема, состояние сети...
В итоге, что-то получается что фронтенда-то того действительно очень много: https://daverupert.com/2024/02/ui-states/
Я настоятельно рекомендую прочитать статью. Она короткая, просто перечисление, но любой чеклист сдачи проекта обязательно будет содержать если не всё, то часть из списка.
Чем раньше вы уложите у себя в голове факт, что делать и учитывать нужно очень много — тем лучше, котаны.
#frontend #ui #state
#заметка дня
Одна из самых раздражающих, хоть и по-своему логичных, вещей в CSS — это тот факт, что стили сопутствующих селекторов подключаются в порядке появления в CSS-файле, а не в порядке, определённом, например, классами или атрибутами.
Да, можно верно заметить, что CSS достаточно универсальная штука, селекторами можно выбрать что угодно и как угодно, решается эта проблема специфичностью.
Вот только в случае двух селекторов с одинаковой специфичностью, правила из того, что определены в файле ниже, победят.
Это, кстати, вполне себе одна из причин, почему атомарные классы набирают такую дикую популярность.
Короче, к моей проблеме. Я переписываю "классическое" веб-приложение на React. Таким образом, у меня уже имеется файл стилей, который я хочу использовать как базу. Естественно, я подключаю его в index.tsx:
import * as React from 'react';
import { App } from './App';
import '../src/scss/style.scss';
import '../src/scss/style.scss';
import * as React from 'react';
import { App } from './App';
#статья дня
Пришло время вспомнить ещё одну статью Ахмада Шадида (Ahmad Shadeed, который не раз всплывал здесь и ещё много раз всплывёт). На этот раз – о важности учитывания высоты в разработке сайтов.
https://ishadeed.com/article/responsive-design-height/
Разработчики часто забывают, что посетители редко используют весь доступный экран. Не только по ширине, но и по высоте. А мода в современных макетах диктует вольготное использование вертикального пространства, но с обязательным условием: “Всё должно влезать в один экран!”. Это, коненчо, бред, но мода есть мода.
Мне не все примеры в блоге нравятся (особенно с модальным окном, я бы предпочёл прокрутку оверлея вместо уменьшения окна), но тему он поднимает важную, хоть и очевидную. Возможно, именно очевидность является причиной, по которой дизайнеры и разработчики игнорируют эту проблему. За деревьями не видят леса — это оно.
Статья есть в переводе на Хабре: https://habr.com/ru/company/skillfactory/blog/524996/
Не забывайте, что макеты должны адаптироваться под пользователя, а не пользователи — под макеты. И выступайте против глупых решений.
#css #html #перевод #бородач
Занимаешься вёрсткой?
Регистрируйся и приходи 20-23 февраля на интенсив «ЛЕНДИНГ ПРО КИНО» от онлайн-школы METHED.
На интенсиве:
— Напишем на HTML и CSS красивый лендинг с современным дизайном для сериала;
— Реализуем адаптив под все устройства от смартфона до мониторов ПК;
— C нуля пошагово создадим лендинг, начиная с вёрстки на основе дизайн-макета в Figma/Pixso и заканчивая функциональностью для поиска, просмотра и добавления видеороликов в коллекцию при помощи JavaScript.
Участвовать в интенсиве бесплатно 👉 https://tglink.io/5b00f8dcdadf?erid=LjN8JxR3Q
Начинаем 20 февраля!
#фишка дня
TIL что можно получить список всех внутренних страниц браузеров. Ну знаете, этих chrome://flags, chrome://dino, edge://surf.
На самом же деле это всё — about:// страницы, просто переписываются каждым вендором. Попробуйте ввести about://flags.
А вот если ввести chrome://flags в Edge — он превратится в edge://flags. Гордые какие. Brave, кстати, тем же самым занимается.
Ладно, к делу: получить список всех страниц можно через about://about. Возможно, кто-нибудь найдёт там что-то экстраординарное.
Ну и на закуску: слеши можно не писать.
#chrome #edge #firefox #about #url #бородач
#молния дня
Как нам всем уже известно, в Евросоюзе Apple даст возможность использовать не только разные браузеры (в смысле, на разных движках), но и разные магазины приложений.
Я, кстати, сильно удивлен, что не все в курсе, что все браузеры на iOS используют единый системный движок WebKit под капотом.
Мне иногда пытаются доказать, что Chrome рендерит иначе, но это лишь постобработка.
Ладно, давайте к делу. Какое-то время назад поступила информация, что Apple мстит за эти решения Евросоюзу и хочет отказаться от PWA (progressive web apps) под предлогом, что для разных движков они не могут гарантировать такой же уровень безопасности песочницы.
Следует отметить, что PWA и правда умеют работать абсолютно независимо друг от друга, обладая каждое своим кешем и сервисами. Так что можно смело держать несколько аккаунтов в банках и тех же соцсетях, например.
Так или иначе, решение вызвало неистовую бурю возмущения. В итоге буквально вчера прошло официальное заявление от Apple о том, что PWA останутся, но работать будут все так же на WebKit.
Тут следует отметить, что, хоть на Android прогрессивные веб-приложения могут работать каждое в своем браузере, в магазин могут быть загружены только те, что используют системный движок Chrome WebView.
Так что хотя и можно повозмущаться в сторону iOS, решение лично мне кажется достаточно адекватным.
Победа или нет, котаны?
#такое дня
Невозможно заниматься фронтендом и не знать о существовании ресурса css-tricks.com
Когда-то он был одним из крупнейших ресурсов по верстке, взлетев достаточно быстро и собрав вокруг себя огромное сообщество заинтересованных людей.
Автором проекта, кстати, был создатель codepen.io, Крис Койер
Так вот, два года назад он продал проект самому неожиданному покупателю — DigitalOcean.
Казалось бы, где виртуальные сервера, а где — верстка. Но в продаже была своя логика: вокруг DigitalOcean тоже имеется большое сообщество и их статьи-руководства очень хороши. Была надежда, что дело пойдет.
Ну и бабки, конечно, камон.
Но... нет. CSS-Tricks.com де-факто мёртв. Сначала убрали выпускающего редактора, потом и всю остальную редакцию. Последние статьи вышли в начале прошлого года и в них нет вообще никакого смысла.
И вот, наконец, Крис Койер приоткрыл завесу о том, как происходила покупка и как он пытался — внезапно — вернуть контроль над сайтом: https://chriscoyier.net/2024/02/28/where-im-at-on-the-whole-css-tricks-thing/
Подобные материалы выходят не так часто. Понять, что стоит за успешным проектом и почему после продажи многие проекты умирают — это весьма интересно.
Просто иногда они умирают, растворяясь в новой организации. А иногда — абсолютно ни за что :(
Спасибо, что хоть не закрыли архив.
Фронтам в помощь⚠️
Изучающим фронт и уже знающим будет очень полезно
React, Vue, обучающие статьи, коды, мемы, работы с codepen, всё то, что тебе так нужно, ты найдешь тут — твой очаг разработки 💻
Запрыгивай в автобус на канал Frontend Гид, чтобы быть в тонусе разработки📊
#фишка дня
Сейчас возвращается мода (и, по-моему, это правильно) на сохранение состояния вашего веб-приложения в адресной строке браузера.
Буквально — используя параметры строки запроса (query string parameters).
Ну то есть что-то вроде https://buy.that?title=Product&action=buy&config=2&amount=3, классические GET-параметры, но управляемые с фронта.
А вот как позволить клиенту обновить страницу, сохранив эти параметры? Желательно, без лишней работы и без использования JS вообще.
А очень просто!<a href="">Reload</a>
Да, вот так просто! Самое классное, что абсолютно валидно и есть в спеках: https://stackoverflow.com/questions/5637969/is-an-empty-href-valid/43340108#43340108
В спеке буквально прописано, что такая ссылка ведёт на текущий документ, со всеми его параметрами запроса.
Не пишите лишнего, котаны!
#http #html #trick #бородач
#расширение дня
А что, если история гита может быть представлена не в виде вертикального списка?
А что, если можно правильно использовать анимации, акцентируя внимание на изменениях?
А что, если можно не открывать интерфейс git blame на каждый чих?
Именно так подумал Родриго Помбо и нафигачил прекрасное расширение для Visual Studio Code: Git File History.
Принцип действия понятен по виде, устанавливайте: https://marketplace.visualstudio.com/items?itemName=pomber.git-file-history
Всем git, котаны!
P. S. вы же в курсе, что устанавливать расширения можно из консоли?
Как-то так:
code --install-extension pomber.git-file-history
code недоступна, решение тут.
#инструмент дня
Думаю, все в курсе, что если нужно поставить изображение-заглушку, можно воспользоваться сервисами для т. н. плейсхолдеров: /channel/htmlshit/431
Но, помимо задачи поставить временное изображение, существует и задача отобразить что-то, пока грузится основная картинка.
Для этого можно или поставить серое поле, или применить различные техники под общим названием LQIP — Low Quality Image Preview: https://github.com/zouhir/lqip
Например, SQIP: https://github.com/axe312ger/sqip
Произносится сквиб, Гарри Поттер объяснит
Задача показать вместо оригинального изображения что-то передающее хоть какую-то информацию об исходнике.
И вот новое: BlurHash от Wolt: https://blurha.sh/
Для генерации используется хеш вида LEHV6nWB2yk8pyo0adR*.7kCMdnj (ограниченный набор из 83 доступных символов).
Плагины есть под любые мыслимые средства, от Eleventy до Flutter.
Если в вашем приложении или сайте требуется загрузить огромное число изображений — подобные техники очень вам помогут ускорить процесс загрузки для пользователя, попутно сделав его более, кхрм, цветным.
#css #img #placeholder
29 февраля 12:00 МСК
Вебинар «Надежное облако для команды разработки: как увеличить маржинальность проектов»
❓ Как облачные технологии могут стать одним из дополнительных источников заработка для команды разработки
❓ Как вы можете повысить маржинальность проектов ваших клиентов, расположив их в облаке ITGLOBAL.COM
Приглашаем разработчиков приложений, сервисов, сложных AI-проектов на вебинар, посвященный размещению проектов разработки в облачной инфраструктуре.
Вебинар будет полезен вам, если:
🔹 вы реализуете проекты по разработке;
🔹 вам требуются свободные ресурсы для тестирования и запусков;
🔹 вы хотите сократить time-to-market ваших проектов;
🔹 вам требуются более мощные ресурсы для работы с AI, HPC и графикой;
🔹 вам важно снизить издержки на инфраструктуру для разработки и production.
🔗 Регистрация
#тип дня
Говоришь такой коллеге: «Ты зачем столько классов насоздавал для такой простой вещи? Используй CSS-переменные».
А он приходит к тебе с картинкой выше и грустный весь.
Что мы делаем в таком случае?
Да очень просто, дополняем интерфейс CSSProperties, чтобы до реакта, наконец, дошло:
declare module 'react' {
interface CSSProperties {
[key: `--${string}`]: string | number
}
}
#заметка дня
Практически всегда в различных обучающих видео и курсах по React вы могли наблюдать следующую фразу: “В JSX надо писать className когда вы хотите задать класс HTML-элементу потому что слово class является зарезервированным”.
Это является правдой лишь отчасти. На самом же деле это просто большое упрощение.
Первый DOM API, построенный на ES3, действительно запрещал переопределение “el.class = smth“.
Но начиная с ES5 (года эдак 2009-11) это исправлено. Да, нельзя присвоить переменной имя class, но свойства объекта никто не запрещал.
Более того, в контексте JSX это не имеет смысла даже относительно ES3. JSX же будет транслирован, возможно даже в “аналоговый” setAttribute("class”, …), что, конечно, работает вообще везде.
А ещё можно вспомнить чёртов htmlFor…
Разработчики React решили отталкиваться не от атрибутов DOM-элементов, а от свойств объектов. Для большинства атрибутов разницы нет. Но есть исключения:
— многословные атрибуты (maxlength, contenteditable) преобразуются в camelCase (maxLength). Обратите внимание на отсутствие дефиса, это тоже легаси первых имплементаций DOM
— SVG не отражает атрибуты как свойства объекта
— Веб-компоненты тоже не отражают, и, более того, могут вообще не документировать свои атрибуты и свойства
— Поля форм могут иметь одинаковые атрибуты, несущие совершенно разную семантическую нагрузку.
Естественно, это очень важно для SSR, пересылать-то приходится атрибуты.
Но до тех пор пока всё "просто работает", люди привыкли считать эти случаи граничными, незначащими. Но это не так: работать с ними приходится чаще, чем кажется.
На самом же деле разработчики React в начале своего пути решили брать XML-подобные атрибуты, а не DOM. For the greater good.
А потом…
…случился ES6, где стало можно создавать объекты в сокращённой форме: {class}. И вот тут старая добрая проблема зарезервированных слов всплыла с новой силой.
Короче говоря, не доверяйте самым простым объяснениям, даже если они приводят к чему-то похожему на правду. Реальность веселее.
Это был вольный перевод треда от Yehuda Katz с включением Дэна Абрамова.
#react #jsx #бородач
#фишка дня
Иногда возникает задача поставить перенос строки после строчного (inline) элемента. Без <br/>, без преобразования элемента в блочный.
На помощь приходят псевдоэлементы.
Значение свойства content — «\A» — это Unicode-символ 0x00000A, который, внезапно, являет собой перевод строки.
Ну и чтобы он сработал, нам стоит прямо указать браузеру на необходимость сохранения переводов строк.
Что это даёт? Ну, например, на десктопе можно показать перевод строки, а на адаптиве – убрать его, очистив content. Конечно, это можно сделать и скрытием <br/>, но мы уже решили, что он лишний.
#css #tricks #unicode #after #newline #бородач
Пока вы думаете, как решить проблему, за вас уже подумали и решили!
Встречайте @LinkUp.market – настоящий многофункциональный комбайн внутри Telegram.
Хотите зарабатывать?
- Выступайте в роли исполнителя и откликайтесь на объявления заказчиков. Используйте свои навыки для удаленного заработка.
Хотите делегировать задачу?
- Выступайте в роли заказчика. Просто опишите свой проект и укажите цену.
Автоматизированный гарант Бот от @LinkUp.market обеспечит честный и прозрачный коннект между заказчиком и исполнителем.
💡 И это только малая часть возможностей данного сервиса
Переходите по ссылке для ознакомления с полным перечнем услуг:
/channel/+P0LtxgvFLtUwOTIy
Готов ворваться в профессию frontend-разработчика?
Для тебя - бесплатный интенсив от технического директора IT-компании!
Сергей Пономарев расскажет:
- какие технологии интересны заказчикам;
- сколько получает фронтендер и как ему расти;
- как стартануть в этой специальности.
Регистрируйся на онлайн интенсив 👉 здесь
#фишка дня
Не только лишь все знают, что одному элементу можно задавать несколько фонов.
Ну, буквально:
.myclass {
background:
background1,
background2,
/* …, */ backgroundN;
}
#такое дня
2011 год: You Might Not Need jQuery aka Возможно, вам не нужен jQuery
2024 год: You Might Not Need an Effect aka Возможно, вам не нужен (хук use-) Effect
Как мы дошли до жизни такой, котаны? 🫠
Ладно, вообще, статья по делу написано. Учитывая скорый выход React 19, обзор фишек которого я скоро проведу, это всё имеет смысл:
1. Не используйте useEffect чтобы обновить стейт, зависящий от других стейтов. Сюда же: не применяйте цепочки useEffect (один за одним).
2. Для тяжёлых операций используйте useMemo.
3. Запросы делайте в обработчиках событий, а не по хранимому в стейте флагу.
4. Не надо забывать, что компонент верхнего уровня — App — это всё ещё компонент, который может перемаунтиться (например, по ошибке).
Если что-то должно произойти всего раз за жизненный цикл приложения — определяйте флаги (didInit) за пределами компонента.
5. Постарайтесь избегать передачи данных от дочернего компонента к родительскому.
В статье прекрасные примеры. В сотый раз повторю: обновлённая документация по React — это лучший учебник.
Старая была полным дерьмом, я согласен. Именно по этой причине родилась туча инфоцыган-менторов. Сейчас всё хорошо.
#react #effect
Бесплатный практический вебинар для всех возрастов: Профессия «Frontend-разработчик».
⏰ Когда: уже 20 февраля в 19:00 по мск.
Вы узнаете о типичных рабочих задачах программиста и напишете мини-игру, которая работает прямо в браузере. Под капотом немного HTML+CSS и базовые конструкции JS.
Расскажем, что ждут работодатели от джунов, какие есть грейды во фронтенд-разработке и на какую зарплату рассчитывать в перспективе. Какие JS фреймворки учить: Vue, React, а может, Angular?
🎁 Всем, кто зарегистрировался — Карта компетенций начинающего Frontend-разработчика, а каждому участнику — Гайд «Как заговорить на сленге IT-специалистов».