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

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

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

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

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

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

✏️Задача

Представьте, что вы реализуете форму с несколькими полями ввода. Одно из полей представляет собой очень тяжелый компонент из какой-то внешней библиотеки. У вас нет доступа к его внутренним элементам, поэтому вы не можете устранить проблемы с его производительностью. Но этот компонент очень нужен в форме, поэтому вы решили обернуть его в React.memo, чтобы минимизировать повторные рендеринги при изменении состояния формы. Как-то так:
const HeavyComponentMemo = React.memo(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.memo(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.memo, должно быть либо примитивным значением, либо постоянным между повторными рендерами. В противном случае мемоизация не сработает. Поэтому технически нужно обернуть 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

🖥 Представляем вашему вниманию подробный вводный курс по React 18 и Redux Toolkit.

Это пошаговое руководство по созданию интерактивных веб-приложений с помощью этих мощных инструментов.

• Видео
• React код
• Redux код

@react_tg

🖥 Прощайте, useState и useEffect: революция в React

Многие разработчики продолжают использовать хуки useState и useEffect для обновления состояний, но мне такой подход не нравится. Проблема заключается в том, что компонент одновременно монтируется, перемонтируется и размонтируется, что приводит к неожиданному поведению. В результате при записи в консоль результат может быть повторен три раза.

Назначение хука useLoaderData
Хук useLoaderData  — это пользовательский хук в React, который помогает загружать данные в компонент. Он упрощает получение данных из API и выполнение асинхронных операций.

Используя хук useLoaderData, вы предоставляете ему функцию, которая возвращает промис. Этот промис представляет собой асинхронную операцию, в результате которой будут получены необходимые данные. Как только промис разрешится, данные станут доступны компоненту.

Хук useLoaderData обрабатывает состояние загрузки, поэтому вам не нужно вручную отслеживать, загружаются ли еще данные или их загрузка уже закончена. Он предоставляет удобный способ доступа к данным, а также позволяет устранять возможные ошибки, которые могут возникнуть при загрузке данных.

Хук useLoaderData позволяет сохранить чистоту и организованность кода компонента, отделяя логику загрузки данных от остальных задач компонента. Это позволяет легко получать данные и управлять ими более удобным для новичков способом.

Как это работает
Надеюсь, вы хорошо знаете, как функционирует React Router 6. В противном случае ознакомьтесь с документацией по ссылке.

Прежде всего, нам необходимо настроить систему маршрутизации в приложении для работы с API загрузчика. До этого момента мы использовали настройку BrowserRouter для работы с различными маршрутами приложения.

Обсудим этот фрагмент.

import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom"
import HomeComponent from "./home"
import AboutCompoent from "./about"
function App () {
<BrowserRouter>
<Routes>
<Route path='/' element={<Outlet />}>
<Route index element={<HomeComponent /> } />
<Route path='about' element={<AboutComponent/> } />
</Route>
</Routes>
</BrowserRouter>
};
export default App;
Здесь создана традиционная система маршрутизации с использованием импорта из React Router.

Что тут происходит?

BrowserRouter из библиотеки React Router создает массив объектов из дочерних элементов Routes. Приведенный ниже фрагмент наглядно демонстрирует, как это происходит.

BrowserRouter([
{
path: '/',
element: <HomeComponent />,
children: []
},
{
path: '/about',
element: <AboutComponent/>,
children: []
}
])

📌 Читать дальше

@react_tg

✅ "Визуализация алгоритмов сортировки" (с использованием React и redux).

• Github

@react_tg