☹️ Проблема устаревших замыканий и способы ее решения в React. Часть 1

Замыкания — пожалуй, одна из самых пугающих концепций JavaScript. Даже всезнающий ChatGPT скажет вам это. Во всяком случае, это одна из самых скрытых особенностей языка. Вы используете замыкания, когда пишите какой-либо React-код, чаще всего даже не осознавая этого. Но в конечном итоге от этой фичи никуда не деться: чтобы разрабатывать сложные и производительные React-приложения, придется овладеть ею.

Попробуем проникнуть в очередную тайну JavaScript-кода, чтобы выяснить:

🟡что такое замыкания, как они появляются и зачем нужны;
🟡что такое “устаревшее” замыкание и почему оно возникает.

Предупреждение: если вы никогда не сталкивались с замыканиями в React, эта статья может взорвать ваш мозг. Рекомендую запастись достаточным количеством шоколада, чтобы стимулировать клетки мозга во время чтения.

‼️Задача
Представьте, что вы реализуете форму с несколькими полями ввода. Одно из полей представляет собой очень тяжелый компонент из какой-то внешней библиотеки. У вас нет доступа к его внутренним элементам, поэтому вы не можете устранить проблемы с его производительностью. Но этот компонент очень нужен в форме, поэтому вы решили обернуть его в React.iss.onemo, чтобы минимизировать повторные рендеринги при изменении состояния формы. Как-то так:
const HeavyComponentMemo = React.iss.onemo(HeavyComponent);

const Form = () => {
const [value, setValue] = useState();

return (
<>
<input
type="text"
value={value}
onChange={(e) => setValue(e.target.value)}
/>
<HeavyComponentMemo />
</>
);
};

Пока все хорошо. Тяжелый компонент принимает только одно строковое свойство, например title, и коллбэк onClick. Это происходит при нажатии кнопки “done” (“готово”) внутри компонента. Отправить данные формы также довольно просто: достаточно передать title и onClick.
const HeavyComponentMemo = React.iss.onemo(HeavyComponent);

const Form = () => {
const [value, setValue] = useState();
const onClick = () => {
// сюда передаем данные формы
console.log(value);
};

return (
<>
<input
type="text"
value={value}
onChange={(e) => setValue(e.target.value)}
/>
<HeavyComponentMemo
title="Welcome to the form"
onClick={onClick}
/>
</>
);
};

А вот теперь перед вами встает дилемма. Как известно, каждое свойство компонента, обернутое в React.iss.onemo, должно быть либо примитивным значением, либо постоянным между повторными рендерами. В противном случае мемоизация не сработает. Поэтому технически нужно обернуть onClick в useCallback:
const onClick = useCallback(() => {
// здесь передаем данные
}, []);

Но, как известно, хук useCallback должен иметь все зависимости, объявленные в его массиве зависимостей. Поэтому, чтобы отправить данные формы в компонент, нужно объявить эти данные как зависимость:

🚀Смотреть

@react_tg

🖥 Крутой ИИ сервис, который конвертирует дизайн Figma в рабочий код на HTML + CSS и React. Не нужно делать группировку элементов вручную — сервис справляется с любым дизайном, на выходе получается вполне неплохой код за пару кликов!

📌Попробовать можно тут.

@react_tg

🖥 Проблема устаревших замыканий и способы ее решения в React. Часть 1

Замыкания — пожалуй, одна из самых пугающих концепций JavaScript. Даже всезнающий ChatGPT скажет вам это. Во всяком случае, это одна из самых скрытых особенностей языка.

Вы используете замыкания, когда пишите какой-либо React-код, чаще всего даже не осознавая этого. Но в конечном итоге от этой фичи никуда не деться: чтобы разрабатывать сложные и производительные React-приложения, придется овладеть ею.

Попробуем проникнуть в очередную тайну JavaScript-кода, чтобы выяснить:

🟢что такое замыкания, как они появляются и зачем нужны;
🟢что такое “устаревшее” замыкание и почему оно возникает.

Предупреждение: если вы никогда не сталкивались с замыканиями в React, эта статья может взорвать ваш мозг. Рекомендую запастись достаточным количеством шоколада, чтобы стимулировать клетки мозга во время чтения.

✏️Задача

Представьте, что вы реализуете форму с несколькими полями ввода. Одно из полей представляет собой очень тяжелый компонент из какой-то внешней библиотеки. У вас нет доступа к его внутренним элементам, поэтому вы не можете устранить проблемы с его производительностью. Но этот компонент очень нужен в форме, поэтому вы решили обернуть его в React.iss.onemo, чтобы минимизировать повторные рендеринги при изменении состояния формы. Как-то так:
const HeavyComponentMemo = React.iss.onemo(HeavyComponent);

const Form = () => {
const [value, setValue] = useState();

return (
<>
<input
type="text"
value={value}
onChange={(e) => setValue(e.target.value)}
/>
<HeavyComponentMemo />
</>
);
};

Пока все хорошо. Тяжелый компонент принимает только одно строковое свойство, например title, и коллбэк onClick. Это происходит при нажатии кнопки “done” (“готово”) внутри компонента. Отправить данные формы также довольно просто: достаточно передать title и onClick.

const HeavyComponentMemo = React.iss.onemo(HeavyComponent);

const Form = () => {
const [value, setValue] = useState();
const onClick = () => {
// сюда передаем данные формы
console.log(value);
};

return (
<>
<input
type="text"
value={value}
onChange={(e) => setValue(e.target.value)}
/>
<HeavyComponentMemo
title="Welcome to the form"
onClick={onClick}
/>
</>
);
};

А вот теперь перед вами встает дилемма. Как известно, каждое свойство компонента, обернутое в React.iss.onemo, должно быть либо примитивным значением, либо постоянным между повторными рендерами. В противном случае мемоизация не сработает. Поэтому технически нужно обернуть onClick в useCallback:

const onClick = useCallback(() => {
// здесь передаем данные
}, []);

Но, как известно, хук useCallback должен иметь все зависимости, объявленные в его массиве зависимостей. Поэтому, чтобы отправить данные формы в компонент, нужно объявить эти данные как зависимость:

const onClick = useCallback(() => {
// сюда подаются данные
console.log(value);

// добавление значения к зависимости
}, [value]);

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

👆 Далее

👆 Часть 2

@react_js

🖥 15 обязательных шпаргалок для веб-разработчиков

По ссылке вы найдёте подборку шпаргалок для разработчиков, которые содержат основные синтаксические конструкции и команды для работы с различными технологиями и языками программирования. Шпаргалки по CSS Flexbox, Grid, React, Git, Node.js, Django и не только ждут вас тут:

https://dev.to/ishratumar/15-must-have-cheatsheets-for-developers-1n92

@react_tg

🤖10 конструкторов сайтов с ИИ, которые стоит попробовать каждому UI/UX-дизайнеру

1. Framer AI
возможность не только создавать отличные сайты с помощью ИИ, но и редактировать их так же, как файл Figma.

2. Durable
идеально подходит для тех, кому нужен деловой или профессиональный сайт. По моим наблюдениям, его результаты даже лучше, чем у Framer. Всего несколько настроек — и сайт готов к работе.

3. 10Web
представьте, что используете ИИ для создания сайта на WordPress, а затем настраиваете его с помощью редактора Elementor. А знаете, что самое замечательное в этом инструменте? Он синхронизируется с WordPress, на котором работает почти половина всех сайтов.

4. Dora AI
один из лидеров по внедрению искусственного интеллекта в создание сайтов. Он еще не выпущен, но, судя по промо-роликам, довольно интересен.

5. Wix AI
пожалуй, самый простой инструмент с ИИ-функциями, который я использовал. С ним можно запустить сайт всего за день. К тому же он очень выгоден для кошелька, и в него добавлено много новых классных ИИ-функций, таких как создание текста и изображений, автоматическое удаление фона и многое другое.

6. Bookmark
идеальный помощник для создания бизнес-сайтов. Он помогает с SEO-оптимизацией, предлагает варианты онлайн-продаж, предоставляет большой объем памяти и даже детальную аналитику.

7. Kleap
не только создаст сайт с помощью ИИ, но и поможет подобрать наиболее подходящие слова и картинки. Кроме того, он позволит отслеживать аналитику и отлично смотрится на телефонах.

8. Hocoos
можно за несколько минут создать потрясающий сайт, просто ответив на 8 вопросов о своем бизнесе. Это немного сложнее, чем просто написать промпт, но в результате ИИ создаст подробный и индивидуальный сайт.

9. Jimbo
задаст вам несколько вопросов о предпочитаемом стиле и целях — а затем на экране появится сайт. Jimbo похож на Wix. Он предложит выбрать внешний вид сайта, например цвета и кнопки. Правда, он не так богат возможностями, как некоторые другие ИИ-конструкторы, зато это может упростить вам работу.

10. Unbounce
известная платформа для разработки лендингов, использующая искусственный интеллект для создания страниц, написания копий и даже оптимизации трафика.

@react_tg

🖥 Большой интерактивный учебник по React. Он обучает современному React с помощью функциональных компонентов и хуков. В него включены: диаграммы, иллюстрации, задачи и более 600 интерактивных примеров. Зацените!

https://react.dev

@react_tg

✅ Creating day-night CSS only toggle switch - Анимированный переключатель, выполненный с помощью SCSS, без использования JavaScript

https://codepen.io/gvissing/pen/XWVpjJd

@react_tg

🖼 Почему разрабатывать веб-интерфейсы так сложно?

Разработка веб-интерфейсов кажется простой, но только на первый взгляд.

Если углубиться в нее, обнаруживается множество сложностей, озадачивающих даже опытных специалистов.

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

Кроме того, мы исследуем так называемые “нерезультативные пути” (“unhappy paths”), часто упускаемые из виду. К ним относятся состояния загрузки, обработка ошибок, а также более широкие архитектурные аспекты, включающие безопасность, производительность и доступность.

📌 Читать

@react_tg

🖥 Animated blob SVG text clipping effect — анимация появления и исчезновения текста. Реализован с помощью SVG-текста и JavaScript.

https://codepen.io/ZachSaucier/pen/gZzPgQ

@react_tg