React

Коварные утечки памяти в React: как можно обжечься на useCallback и замыканиях Я работаю в Ramblr, это ИИ-стартап, где мы строим на React сложные приложения для аннотирования видео. Недавно мне попалась сложная утечка памяти, которая возникает при одновременном использовании замыканий JavaScript и хука useCallback в React. Поскольку я вырос на .NET, мне потребовалось немало времени, чтобы разобраться в происходящем. Поэтому я решил написать этот пост и рассказать вам, чему меня научила эта ситуация. Сначала я кратко напомню вам, как устроены замыкания, но можете смело пропустить этот раздел, если вы уже хорошо знаете, как устроен этот механизм в JavaScript. https://schiener.io/2024-03-03/react-closures ✍️ @React_lib

⚛️ Совет по React💡 Ввод возвращаемых значений пользовательских хуков с помощью TypeScript ✍️ @React_lib

Построение фильтра поиска в реальном времени в React: Пошаговое руководство Когда я начал работать с React, одной из распространенных проблем, с которыми я столкнулся, была реализация функции фильтра поиска в реальном времени. Эта функция обновляет отображаемые элементы по мере ввода пользователем текста и показывает все элементы заново, если поисковый фильтр пуст. Поэтому в этом руководстве я расскажу вам о том, как создать эту функцию в React. Мы начнем со списка жестко заданных элементов, а затем перейдем к списку элементов, полученных из API. https://dev.to/alais29/building-a-real-time-search-filter-in-react-a-step-by-step-guide-3lmm ✍️ @React_lib

Построение уникальных диаграмм React Эта галерея, основанная на сотнях примеров графиков, познакомит вас с основными концепциями визуализации данных с помощью React и D3.js. В ней также представлены готовые к использованию шаблоны, позволяющие быстрее приступить к работе. https://www.react-graph-gallery.com/ ✍️ @React_lib

No Outer margin В статье обсуждается проблема использования внешних отступов (outer margin) в веб-дизайне. Автор объясняет, почему лучше избегать их в пользу внутренних отступов (padding) для компонентов. Основной аргумент: внутренние отступы делают дизайн более предсказуемым и гибким, упрощая настройку элементов и их позиционирование. Статья также содержит примеры и рекомендации для практического применения в современной веб-разработке. Что такое «внешние» отступы и padding? Здесь термин «внешние» относится к отступам, которые выходят за границы border-box пользовательского интерфейса. В основном это касается случаев, когда margin применяется к самому внешнему элементу компонента.

function Card({ children }) {
  return (
    // WARNING: Don't do this! It is an outer `margin`!
    <div style={{ marginBottom: '1rem' }}>{children}</div>
  )
}

function EmployeeCard({ name, occupation }) {
  return (
    <Card>
      {/**
       * This is fine! We can use internal margins for layout,
       * but there are better ways we'll learn later!
       */}
      <div style={{ marginBottom: '1rem' }}>{name}</div>
      <div>{occupation}</div>
    </Card>
  )
}

https://kyleshevlin.com/no-outer-margin/ ✍️ @React_lib

Избегаем ошибки гидратации с помощью useSyncExternalStore Статья рассматривает, как разработчики могут эффективно справляться с проблемами, связанными с несовпадением данных при гидратации в React. Гидратация — это процесс, при котором серверный рендеринг синхронизируется с клиентским. Ошибки на этом этапе могут приводить к неожиданным багам. Основная идея заключается в использовании хука useSyncExternalStore, который помогает синхронизировать состояние внешнего источника данных с React-компонентами. Это особенно полезно для библиотек или приложений с критичными требованиями к корректности данных, таких как те, что полагаются на глобальные состояния или сложные асинхронные обновления. Статья также объясняет причины появления гидрационных ошибок и предлагает практические подходы для их минимизации, например, правильное управление состоянием и использование актуальных инструментов React для синхронизации данных.

const emptySubscribe = () => () => {}

function LastUpdated() {
  const date = React.useSyncExternalStore(
    emptySubscribe,
    () => lastUpdated.toLocaleDateString(),
    () => lastUpdated.toLocaleDateString('en-US')
  )

  return <span>Last updated at: {date}</span>
}

https://tkdodo.eu/blog/avoiding-hydration-mismatches-with-use-sync-external-store ✍️ @React_lib

Как использовать автофокус с помощью React Hooks В веб-разработке автофокус играет важную роль, улучшая пользовательский опыт за счёт автоматического фокусирования на полях ввода при загрузке страницы или в ответ на определённые действия пользователя. В этой статье будет показано, как реализовать эту функцию в React с использованием хуков. https://blog.openreplay.com/how-to-autofocus-using-react-hooks/ ✍️ @React_lib

👩‍💻 Курс по Electron - Создание настольных приложений (включая React и TypeScript) Изучите, как использовать Electron, React и TypeScript для создания настольных приложений. В ходе этого курса вы узнаете всё: от настройки среды разработки до внедрения продвинутых функций, таких как визуализация данных, безопасная коммуникация и кастомные рамки окон, при этом обеспечивая безупречный пользовательский опыт. ⌨️ 0:00:00 Intro & How electron works ⌨️ 0:08:31 Setting up React ⌨️ 0:11:45 Setting up Electron ⌨️ 0:17:41 Adding TypeScript ⌨️ 0:22:47 Configuring Electron-Builder ⌨️ 0:29:07 DX Improvements ⌨️ 0:35:16 Reading System Resources ⌨️ 0:46:25 Communicating with the UI ⌨️ 1:09:34 Making IPC Typesafe ⌨️ 1:32:10 Event Validation ⌨️ 1:39:55 Unsubscribing from Events ⌨️ 1:43:55 Data Visualisation ⌨️ 2:00:24 Securing the App ⌨️ 2:06:53 Creating Tray Elements ⌨️ 2:14:40 Hiding to the Tray ⌨️ 2:27:31 Customising the Menu Bar ⌨️ 2:35:01 Enable View Switching ⌨️ 2:40:02 Custom Window Frames ⌨️ 2:51:00 Testing Theory ⌨️ 2:53:26 E2E Tests ⌨️ 3:06:27 Unit Tests ⌨️ 3:19:19 Finalising the UI ⌨️ 3:33:03 Outro источник ✍️ @React_lib

Хотите улучшить производительность ваших React-приложений и освоить современные методы разработки? Присоединяйтесь к нашему бесплатному вебинару "Использование хуков и мемоизации для оптимизации React-приложений"! На вебинаре вы узнаете: - Основные API хуки: useState, useEffect, useRef, useContext. - Как использовать хуки для управления состоянием и побочными эффектами в React-приложениях. - Как применять мемоизацию для оптимизации производительности компонентов с помощью useCallback, useMemo и React.memo. Этот вебинар будет полезен: - Новичкам, стремящимся освоить React и познакомиться с современными методами разработки и оптимизации. - JavaScript-разработчикам, которые хотят углубить понимание React и познакомиться с современными техниками управления состоянием и побочными эффектами. - Frontend-разработчикам, стремящимся улучшить производительность своих React-приложений. Не упустите возможность повысить свои навыки и улучшить свои проекты! Зарегистрируйтесь на вебинар прямо сейчас и начните оптимизировать свои React-приложения уже сегодня: https://vk.cc/cFgcHD Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

Как использовать forwardRef с generic компонентами Статья объясняет, как использовать forwardRef с обобщенными компонентами в TypeScript. Она рассматривает проблемы forwardRef с типизацией обобщенных компонентов и предлагает способ их решения. Этот метод позволяет сохранить типовую безопасность при передаче ссылок на компоненты. Одно из ограничений forwardRef в том, что он отключает выведение типа для generic компонентов. Например:

const Table = <T,>(
  props: {
    data: T[];
    renderRow: (row: T) => React.ReactNode;
  },
  ref: React.ForwardedRef<HTMLTableElement>
) => {
  /** --snip-- */
};
 
const ForwardReffedTable = React.forwardRef(Table);

<Table
    data={["a", "b"]}
    renderRow={(row) => { // Тип выводится: row: string
      return <tr>{row}</tr>;
  }}
/>;

<ForwardReffedTable
    data={["a", "b"]}
    renderRow={(row) => { // Тип не выводится: row: unknown
      return <tr>{row}</tr>;
  }}
/>;

https://www.totaltypescript.com/forwardref-with-generic-components ✍️ @React_lib

Хотите улучшить производительность ваших React-приложений и освоить современные методы разработки? Присоединяйтесь к нашему бесплатному вебинару "Использование хуков и мемоизации для оптимизации React-приложений"! На вебинаре вы узнаете: - Основные API хуки: useState, useEffect, useRef, useContext. - Как использовать хуки для управления состоянием и побочными эффектами в React-приложениях. - Как применять мемоизацию для оптимизации производительности компонентов с помощью useCallback, useMemo и React.memo. Этот вебинар будет полезен: - Новичкам, стремящимся освоить React и познакомиться с современными методами разработки и оптимизации. - JavaScript-разработчикам, которые хотят углубить понимание React и познакомиться с современными техниками управления состоянием и побочными эффектами. - Frontend-разработчикам, стремящимся улучшить производительность своих React-приложений. Не упустите возможность повысить свои навыки и улучшить свои проекты! Зарегистрируйтесь на вебинар прямо сейчас и начните оптимизировать свои React-приложения уже сегодня: https://vk.cc/cF1xjp Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

❌ Не используйте React Query для чтения синхронных данных Не всегда следует использовать React Query только потому, что это возможно. Это касается, например, localStorage, но также и других случаев. Если данные можно читать синхронно и подписываться на изменения, используйте useSyncExternalStore(). Отсутствует необходимость обрабатывать состояние загрузки/ошибок. ✍️ @React_lib

Разработка Telegram Mini App с помощью React Telegram Mini App — это веб-приложения, которые открываются внутри мессенджера Telegram. Эти приложения создаются с использованием стандартных веб-технологий, таких как HTML, CSS и JavaScript, и выглядят как обыкновенные сайты. Сегодня рассмотрим, как создать собственный Mini App, используя React. https://habr.com/ru/companies/timeweb/articles/858382/ ✍️ @React_lib

Подборка библиотек React React существует уже довольно давно. С тех пор вокруг этой библиотеки, основанной на компонентах, сформировалась хорошо развитая, но зачастую перегруженная экосистема библиотек. Разработчикам, приходящим из других языков программирования или библиотек/фреймворков, часто бывает сложно разобраться во всех библиотеках для создания веб-приложений с использованием React. В своей основе React позволяет создавать интерфейсы, управляемые компонентами, с помощью функциональных компонентов. Он включает встроенные решения, такие как React Hooks для локального состояния, побочных эффектов и оптимизации производительности. Но, в конце концов, здесь вы работаете только с функциями (компонентами и хуками) для создания пользовательского интерфейса. • Starting a new React Project • Package Manager for React • React State Management • React Data Fetching • Routing with React Router • CSS Styling in React • React UI Libraries • React Animation Libraries • Visualization and Chart Libraries in React • Form Libraries in React • React Type Checking • Code Structure in React • React Authentication • React Backend • React Database • React Hosting • Testing in React • React and Immutable Data Structures • React Internationalization • Rich Text Editor in React • Payments in React • Time in React • React Desktop Applications • File Upload in React • Mails in React • Drag and Drop • Mobile Development with React • React VR/AR • Design Prototyping for React • React Component Documentation ✍️ @React_lib

Бесплатное IT-образование в 2024 Отобрали для вас полезные телеграм-каналы, которые помогут освоить программирование и другие IT-направления Выбирайте нужное и подписывайтесь: 👩‍💻 С/С++: @Cpportal 📱 GitHub: @git_developer 🤓 Книги айти: @portalToIT 👩‍💻 Golang: @juniorGolang 👩‍💻 PHP: @PHPortal 👩‍💻 Моб. разработка: @MobDev 👩‍💻 Java: @Java_Iibrary 👩‍💻 Frontend: @FrontendPortal ⚙️ Backend: @BackendPortal 👩‍💻 Python: @PythonPortal 👩‍💻 C#: @KodBlog 🖥 Базы Данных & SQL: @SQL 👩‍💻 Разработка игр: @GameDevgx 👩‍💻 DevOps: @loose_code 🖥 Data Science: @DataSciencegx 🤔 Хакинг & ИБ: @cybersecinform 🐞 Тестирование: @QAPortal 📱 Маркетинг: @MarketingPortal 🖥 Дизайн: @PortalToDesign ➡️ Сохраняйте себе, чтобы не потерять

useContextSelector: Ускорение работы React-приложений Случалось ли вам иметь контекст, который был настолько велик, что негативно влиял на производительность вашего React-приложения? Это происходит потому, что одно изменение значения контекста приводит к рендерингу всех компонентов, зависящих от этого контекста. Классический пример - контекст темы, хранящий все цвета, шрифты и другие стили пользовательского интерфейса.

import { createContext, useState } from 'react';

const defaultTheme = { color: '#aabbcc', fontFamily: 'Arial', fontSize: 16 };

export const ThemeContext = createContext(defaultTheme);

export const ThemeContextProvider = ({ value = defaultTheme, children }) => {
    const [theme, setTheme] = useState(value);
    return (
        <ThemeContext.Provider value={{ theme, setTheme }}>
            {children}
        </ThemeContext.Provider>
    );
};

export const useTheme = () => {
    const { theme } = useContext(ThemeContext);
    return theme;
}

https://marmelab.com/blog/2024/10/16/usecontextselector-a-faster-usecontext-for-react.html ✍️ @React_lib

LLRT (Low Latency Runtime) LLRT (Low Latency Runtime) — это экспериментальная, легковесная среда выполнения JavaScript, разработанная для удовлетворения растущего спроса на быстрые и эффективные серверлесс-приложения. https://github.com/awslabs/llrt ✍️ @React_lib

🔥Тест по React JS от OTUS🔥 — Ответьте на 19 вопросов и проверьте, насколько хорошо вы знаете язык. Сможете сдать — пройдёте на продвинутый онлайн-курс по React.js со скидкой! 🚀ПРОЙТИ ТЕСТ ОНЛАЙН-КУРСА ПО REACT.JS https://vk.cc/cEvoIp Курс доступен в рассрочку. 🎁Пройдете успешно тест, получите доступ к открытым урокам курса. Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

Интерактивное руководство по рендерингу в React В чистом виде React - это библиотека для построения пользовательских интерфейсов. Она настолько проста, что всю ментальную модель можно представить в виде формулы v = f(s) - где ваше представление является просто функцией вашего состояния. Хотя это уравнение дает нам простую мысленную модель работы React, есть один аспект уравнения, который до сих пор, после стольких лет, кажется, смущает людей. Когда и как именно вызывается f? Или, говоря иначе, когда и как React обновляет представление? Этой, казалось бы, простой теме посвящено множество постов в блогах, докладов на конференциях и сообщений в твиттере. И все же почему-то даже опытные разработчики React имеют некоторые (часто неизвестные) заблуждения на этот счет. https://ui.dev/why-react-renders ✍️ @React_lib

Я упустил еще какую-то ошибку в useEffect? 😅 Сколько ты насчитал? ✍️ @React_lib