This media is not supported in your browser
VIEW IN TELEGRAM
#инструмент дня
На видео — не высокохудожественный глитч, а результат работыочередного нового рендер-трекера для React: React Scan.
Очевидно, натравленный на Твиттер
Репозиторий: https://github.com/aidenybai/react-scan
Чем хорош: не нужно кодить! Ну, если только ты сам не хочешь :)
Импортируем перед реактом и просто запускаем анализ:
Естественно, это не всегда нужно. Как только нашли проблемный компонент на большой картине — обернули его в withScan и дебажьте себе на здоровье.
Хороший инструмент, хоть и в начале своего пути. Мне бы очень хотелось видеть расширение для Chrome, чтобы вообще ничего не настраивать.
#react #render #devtools
На видео — не высокохудожественный глитч, а результат работы
Очевидно, натравленный на Твиттер
Репозиторий: https://github.com/aidenybai/react-scan
Чем хорош: не нужно кодить! Ну, если только ты сам не хочешь :)
Импортируем перед реактом и просто запускаем анализ:
import { scan } from 'react-scan'; // import this BEFORE react
import React from 'react';
scan({
enabled: true,
log: true, // logs render info to console (default: false)
clearLog: false, // clears the console per group of renders (default: false)
});
Естественно, это не всегда нужно. Как только нашли проблемный компонент на большой картине — обернули его в withScan и дебажьте себе на здоровье.
Хороший инструмент, хоть и в начале своего пути. Мне бы очень хотелось видеть расширение для Chrome, чтобы вообще ничего не настраивать.
#react #render #devtools
#вопрос дня
Что произойдёт, когда я нажму на кнопку?
Сначала ответ, а потом можно пройти по ссылке. Проверьте себя :)
Песочница: https://codesandbox.io/p/sandbox/twilight-glitter-vtqsf2
Ну и не стесняйтесь писать в комментарии, что вы думаете по поводу. Пусть у нас будет вот такая суббота.
Этот вопрос я на собеседовании вчера задавал. Эмоции были смешанные.
#react #interview
Что произойдёт, когда я нажму на кнопку?
Сначала ответ, а потом можно пройти по ссылке. Проверьте себя :)
Песочница: https://codesandbox.io/p/sandbox/twilight-glitter-vtqsf2
Ну и не стесняйтесь писать в комментарии, что вы думаете по поводу. Пусть у нас будет вот такая суббота.
Этот вопрос я на собеседовании вчера задавал. Эмоции были смешанные.
#react #interview
#срочно дня
У меня через 20 минут собеседование человека на сеньора-фронтенда.
Раз вам так не понравился вопрос с Array.sort, накидайте ваших любимых.
Только срочно, я знаю, вы у меня лучшие по вопросам, вы можете🤩
У меня через 20 минут собеседование человека на сеньора-фронтенда.
Раз вам так не понравился вопрос с Array.sort, накидайте ваших любимых.
Только срочно, я знаю, вы у меня лучшие по вопросам, вы можете
Please open Telegram to view this post
VIEW IN TELEGRAM
#фишка дня
Это дежурное напоминание о том, что если объявить независимые и чистые функции вне контекста компонента, они не будут пересоздаваться на каждый рендер и, соответственно, вам не нужны будут ни useEffect, ни useCallback ни прочие трюки.
То есть:
Уточнение: я в курсе, что скролл нынче можно сделать в CSS, суть не в этом.
Видите, что мы сделали? Функция — чистый сайд-эффект, она не трогает никакое из состояний приложения, только его внешний вид. Нам достаточно просто ссылки.
Скролл, фокус, анимации, обращение к глобальным состояниям и шине событий — всё это можно смело выносить наружу.
Пруф: https://codesandbox.io/p/sandbox/scroll-into-view-forked-6t9ppq
Статья на тему от создателей React Query: https://tkdodo.eu/blog/avoiding-use-effect-with-callback-refs
И конечно же напоминание от команды React, что useEffect нужен далеко не всегда: https://react.dev/learn/you-might-not-need-an-effect
#react #ref #useeffect
Это дежурное напоминание о том, что если объявить независимые и чистые функции вне контекста компонента, они не будут пересоздаваться на каждый рендер и, соответственно, вам не нужны будут ни useEffect, ни useCallback ни прочие трюки.
То есть:
const scroller = (node: HTMLDivElement | null) => {
node?.scrollIntoView({ behavior: "smooth" });
};
const ChatWindow = () => {
return (
<>
{Array.from(Array(100).keys()).map((e) => (
<div key={e}>Chat message: {e}</div>
))}
<div ref={scroller} />
</>
);
};
Уточнение: я в курсе, что скролл нынче можно сделать в CSS, суть не в этом.
Видите, что мы сделали? Функция — чистый сайд-эффект, она не трогает никакое из состояний приложения, только его внешний вид. Нам достаточно просто ссылки.
Скролл, фокус, анимации, обращение к глобальным состояниям и шине событий — всё это можно смело выносить наружу.
Пруф: https://codesandbox.io/p/sandbox/scroll-into-view-forked-6t9ppq
Статья на тему от создателей React Query: https://tkdodo.eu/blog/avoiding-use-effect-with-callback-refs
И конечно же напоминание от команды React, что useEffect нужен далеко не всегда: https://react.dev/learn/you-might-not-need-an-effect
#react #ref #useeffect
This media is not supported in your browser
VIEW IN TELEGRAM
#инструмент дня
Итак, помните пример современного глитч-искусства на примере Твиттера?
Ну я про React Scan, который показывает число ререндеров на странице, вот: https://t.me/htmlshit/3285
Парни выпустили CLI-утилиту, чтобы можно было просканировать любой сайт! Да-да, они обещали расширение для браузера, но пока так:
...и поехали.
Что-то резко стало охота завтра на работе шороху навести на корпоративном портале.
#react #render #devtools
Итак, помните пример современного глитч-искусства на примере Твиттера?
Ну я про React Scan, который показывает число ререндеров на странице, вот: https://t.me/htmlshit/3285
Парни выпустили CLI-утилиту, чтобы можно было просканировать любой сайт! Да-да, они обещали расширение для браузера, но пока так:
npx react-scan@latest <URL>
...и поехали.
Что-то резко стало охота завтра на работе шороху навести на корпоративном портале.
#react #render #devtools
This media is not supported in your browser
VIEW IN TELEGRAM
#инструмент дня
Не, ну вы только посмотрите, что происходит!
Исторически, библиотеки в Storybook собирались или с помощью webpack (5 версии сейчас), или vite. Но на днях автор Parcel выложил и свою интеграцию!
GitHub: https://github.com/parcel-bundler/storybook?tab=readme-ov-file
Основная фишка проекта продемонстрирована прямо на видео: благодаря поддержке React Fast Refresh, можно обновлять компоненты или целые стори без потери состояния!🤯
Конечно, если пропсы или аргументы стори поменялись — стейт не сохранится, но тем не менее это очень круто, что появилось больше вариантов бандлинга для Storybook.
#react #storybook #parcel
Не, ну вы только посмотрите, что происходит!
Исторически, библиотеки в Storybook собирались или с помощью webpack (5 версии сейчас), или vite. Но на днях автор Parcel выложил и свою интеграцию!
GitHub: https://github.com/parcel-bundler/storybook?tab=readme-ov-file
Основная фишка проекта продемонстрирована прямо на видео: благодаря поддержке React Fast Refresh, можно обновлять компоненты или целые стори без потери состояния!
Конечно, если пропсы или аргументы стори поменялись — стейт не сохранится, но тем не менее это очень круто, что появилось больше вариантов бандлинга для Storybook.
#react #storybook #parcel
Please open Telegram to view this post
VIEW IN TELEGRAM
#новость дня
Ой, а что это у нас такое на картинке? А это, товарищи мои, кусок документации React из 2013 года.
Да, если вы не верите своим глазам или не поняли — в то время на полном серьёзе предлагалось использовать jQuery для создания AJAX-запроса данных. А что делать, что делать...
А нынче на дворе уже React 19, который вот только-только вышел, я опоздал с новостью на пару дней: https://react.dev/blog/2024/12/05/react-19
После стольких скандалов и задержек, после стольких криков о том, что React умер (нет) и не нужен (тоже нет).
Помните, я упоминал о том, что они замедлили дерево рендера в Suspense и не отрисовывали дочерние ноды, пока не разресолвится материнская? Что ж, они эту ситуацию даже отдельно вынесли, дав ссылку в самом верху, снабдив прекрасными схемами: https://react.dev/blog/2024/04/25/react-19-upgrade-guide#improvements-to-suspense
Конечно же многострадальный React Compiler тоже здесь. И передача ref как простого пропа. И улучшенная обработка ошибок (это, кстати, ломающее изменение, читайте руководство по обновлению).
Почему я вспомнил про использование jQuery для AJAX? Ну, потому что асинхронные функции уже давно не ограничиваются одной только передачей данных по сети, и для работы со статусом их обработки появился новый API — Actions и, соответственно, новые хуки: useActionState и useTransition.
Для работы с формами предложен новый хук useFormStatus, для обращения к форме из её компонента больше не нужен контекст!
Ну об API use не писал только ленивый — считывать состояние промисов никогда не было так просто.
Там ещё много интересного. И пока одни ноют о том, что бандл стал чуть больше, я планирую убрать лишние обработчики загрузки и работы с формой. Где-то я, возможно, даже откажусь от react-hook-form и react-query, просто потому что мне не нужны все их возможности и лишний бойлерплейт.
В общем, мне нравится. А вам как?
#react #release #changelog
Ой, а что это у нас такое на картинке? А это, товарищи мои, кусок документации React из 2013 года.
Да, если вы не верите своим глазам или не поняли — в то время на полном серьёзе предлагалось использовать jQuery для создания AJAX-запроса данных. А что делать, что делать...
А нынче на дворе уже React 19, который вот только-только вышел, я опоздал с новостью на пару дней: https://react.dev/blog/2024/12/05/react-19
После стольких скандалов и задержек, после стольких криков о том, что React умер (нет) и не нужен (тоже нет).
Помните, я упоминал о том, что они замедлили дерево рендера в Suspense и не отрисовывали дочерние ноды, пока не разресолвится материнская? Что ж, они эту ситуацию даже отдельно вынесли, дав ссылку в самом верху, снабдив прекрасными схемами: https://react.dev/blog/2024/04/25/react-19-upgrade-guide#improvements-to-suspense
Конечно же многострадальный React Compiler тоже здесь. И передача ref как простого пропа. И улучшенная обработка ошибок (это, кстати, ломающее изменение, читайте руководство по обновлению).
Почему я вспомнил про использование jQuery для AJAX? Ну, потому что асинхронные функции уже давно не ограничиваются одной только передачей данных по сети, и для работы со статусом их обработки появился новый API — Actions и, соответственно, новые хуки: useActionState и useTransition.
Для работы с формами предложен новый хук useFormStatus, для обращения к форме из её компонента больше не нужен контекст!
Ну об API use не писал только ленивый — считывать состояние промисов никогда не было так просто.
Там ещё много интересного. И пока одни ноют о том, что бандл стал чуть больше, я планирую убрать лишние обработчики загрузки и работы с формой. Где-то я, возможно, даже откажусь от react-hook-form и react-query, просто потому что мне не нужны все их возможности и лишний бойлерплейт.
В общем, мне нравится. А вам как?
#react #release #changelog
#такое дня
Прежде чем волноваться о плохо пройденном собесе, помни: некий разработчик Facebook прошёл алгоритмы, лайвкодинг, калча фит... и всё ради того, чтобы при каждом нажатии клавиши в поле ввода поста прогонять регулярку на поиск ссылок по всему тексту.
Да, вы не ослышались. В итоге, на сообщение в 10000 символов задержка может составить две-три секунды.
Не надо так, котаны.
Ссылка на тред: тут. В треде народ развлекается разным профайлингом, очень интересно: React Scan, Chrome Profile, немного реверс-инжиниринга...
Как же решать такую задачу? Ну, например, debounce или throttle, зависит от условий. Или предсказание по первому символу.
#js #react
Прежде чем волноваться о плохо пройденном собесе, помни: некий разработчик Facebook прошёл алгоритмы, лайвкодинг, калча фит... и всё ради того, чтобы при каждом нажатии клавиши в поле ввода поста прогонять регулярку на поиск ссылок по всему тексту.
Да, вы не ослышались. В итоге, на сообщение в 10000 символов задержка может составить две-три секунды.
Не надо так, котаны.
Ссылка на тред: тут. В треде народ развлекается разным профайлингом, очень интересно: React Scan, Chrome Profile, немного реверс-инжиниринга...
Как же решать такую задачу? Ну, например, debounce или throttle, зависит от условий. Или предсказание по первому символу.
#js #react
#ссылка дня
Всеобъемлющее руководство по созданию приложения адресной книги от создателей React Router: https://reactrouter.com/tutorials/address-book
Клиентский и серверный рендеринг, фильтрация данных, добавление. И даже немного о кодах ответов.
Для полноценного приложения останется добавить только работу с базой данных :) Но... не здесь.
Прекрасный туториал, начинающим и тем, кто ещё не знаком с реакт-роутером или некоторыми его аспектами должно очень зайти.
#react #router #ssr #tutorial
Всеобъемлющее руководство по созданию приложения адресной книги от создателей React Router: https://reactrouter.com/tutorials/address-book
Клиентский и серверный рендеринг, фильтрация данных, добавление. И даже немного о кодах ответов.
Для полноценного приложения останется добавить только работу с базой данных :) Но... не здесь.
Прекрасный туториал, начинающим и тем, кто ещё не знаком с реакт-роутером или некоторыми его аспектами должно очень зайти.
#react #router #ssr #tutorial
#инструмент дня
Помните, как на Новый год нужно было срочно найти подарок для младшего брата, и вы отдали ему пылившийся на полке DVD с фильмом, который вы даже не смотрели?
Возможно, он до сих пор это помнит... А вы с тех пор понимаете, что такое повторное использование.
А вот ребята из Material UI aka MUI решили переработать подход к таким ситуациям.
Они только что выпустили публичную альфу Base UI 1.0 — библиотеку нестилизованных React-компонентов, выделенных из большого пакета Material UI и доступных теперь как отдельный продукт.
Помимо готовых компонентов в ней есть и низкоуровневые хуки, дающие всю мощь Material UI, но без необходимости реализовывать Material Design в приложении.
Полная свобода в стилях
Base UI не навязывает собственное решение для CSS. Вы сами выбираете, как работать: Tailwind, CSS-in-JS или любой другой способ.
Доступность (A11Y) по умолчанию
Компоненты соблюдают лучшие практики доступности. Это значит, что ваш проект будет удобен для всех, и никто не скажет, что вы плохой человек (кроме младшего брата).
Композиция
API компонентов открыто полностью. У вас есть доступ к каждому узлу, что позволяет легко добавлять, удалять или оборачивать элементы под свои нужды.
Base UI сохраняет лучшие части Material UI, не привязывая вас к "гугловскому" дизайну.
Вот это переиспользование, за которое не стыдно, котаны. Можно и младшему брату оставить.
Лучший подарок на Новый год!
#react #mui #ui #widgets
Помните, как на Новый год нужно было срочно найти подарок для младшего брата, и вы отдали ему пылившийся на полке DVD с фильмом, который вы даже не смотрели?
Возможно, он до сих пор это помнит... А вы с тех пор понимаете, что такое повторное использование.
А вот ребята из Material UI aka MUI решили переработать подход к таким ситуациям.
Они только что выпустили публичную альфу Base UI 1.0 — библиотеку нестилизованных React-компонентов, выделенных из большого пакета Material UI и доступных теперь как отдельный продукт.
Помимо готовых компонентов в ней есть и низкоуровневые хуки, дающие всю мощь Material UI, но без необходимости реализовывать Material Design в приложении.
Полная свобода в стилях
Base UI не навязывает собственное решение для CSS. Вы сами выбираете, как работать: Tailwind, CSS-in-JS или любой другой способ.
Доступность (A11Y) по умолчанию
Компоненты соблюдают лучшие практики доступности. Это значит, что ваш проект будет удобен для всех, и никто не скажет, что вы плохой человек (кроме младшего брата).
Композиция
API компонентов открыто полностью. У вас есть доступ к каждому узлу, что позволяет легко добавлять, удалять или оборачивать элементы под свои нужды.
Base UI сохраняет лучшие части Material UI, не привязывая вас к "гугловскому" дизайну.
Вот это переиспользование, за которое не стыдно, котаны. Можно и младшему брату оставить.
Лучший подарок на Новый год!
#react #mui #ui #widgets