🐸 Библиотека фронтендера

#pixel_pause

😶 Когда каждый onClick — минус FPS

Кажется, что всё просто: список, onClick — готово. Но при сотнях элементов каждый ререндер создаёт новые функции в JSX.
React считает их изменёнными и перерисовывает даже те строки, что не менялись.

На демо — незаметно. На проде — больно.

🔤 Почему это работает:

Каждый ререндер создаёт новые колбэки → React считает пропы изменёнными → перерисовывает.

useCallback стабилизирует ссылку, и компонент больше не «дёргается» без причины.

🔤 На проде:

— Если список огромный — рендерьте только видимую часть (react-window, react-virtualized).

— Если элемент сложный — выносите его в memo-компонент с передачей колбэка через пропсы.

🐸 Библиотека фронтендера

#hotfix #react

😸 Разбор задачи

Ранее мы выкладывали задачу для джуна+.

Сегодня разберем, что происходит в этом коде и как работают присваивания и ссылки на объекты в JavaScript.

🔤 Разбор:

1. let a = { n: 1 }; — создаём объект { n: 1 } и присваиваем его переменной a.

2. let b = a; — b теперь ссылается на тот же объект, что и a.

3. a.x = a = { n: 2 }; —

• Присваиваем новому объекту { n: 2 } переменную a.

• После этого свойству x объекта { n: 2 } присваиваем сам объект { n: 2 }.

4. console.log(a.x); — выводит undefined, так как свойство x в новом объекте { n: 2 } не было установлено.

5. console.log(b.x); — выводит объект { n: 2 }, потому что b ссылается на старый объект { n: 1 }, который теперь имеет свойство x, указывающее на { n: 2 }.

✅ Ответ:

• a.x — undefined
• b.x — { n: 2 }

🐸 Библиотека фронтендера

#code_challenge

🔍 Валидация форм без раздражения

Вместо :invalid, который срабатывает сразу, используйте :user-invalid.

Что это дает:

— Валидация срабатывает только после взаимодействия с полем

— Не показываем ошибки в пустой форме при загрузке

— Лучший UX без дополнительного JS

⚙️ Поддержка: Chrome 119+, Safari 16.5+, Firefox 88+

Сейчас на курсы Proglib действует −40%🥰

🐸 Библиотека фронтендера

#readme #css

💻 На каком железе вы работаете

Интересно узнать реальную статистику — от бюджетников до топовых сборок.

🔤 Любое железо приветствуется — Air на 8 ГБ, Pro, ThinkPad, игровой ноут, Desktop.

✏️ Пишите в комментах:

— Модель, процессор, RAM, SSD, год.

— Всё работает или есть проблемы?

— Довольны или хотите апгрейд?

Соберём честную картину 📊💪

🐸 Библиотека фронтендера