React JS
Відкрити в Telegram
React программирование @haarrp - admin @itchannels_telegram - 🔥лучшие ит-каналы @javascriptv - продвинутый javascript @programming_books_it - бесплатные it книги @ai_machinelearning_big_data - ml № 5037566384
Показати більше
Сітка:📈 Аналітичний огляд Telegram-каналу React JS
Канал React JS (@react_tg) у мовному сегменті Російська є активним учасником. На даний момент спільнота об'єднує 16 104 підписників, посідаючи 8 000 місце в категорії Технології та додатки та 40 641 місце у регіоні Росія.
📊 Показники аудиторії та динаміка
З моменту свого створення невідомо, проект продемонстрував стрімке зростання, зібравши аудиторію у 16 104 підписників.
За останніми даними від 31 жовтня, 2026, канал демонструє стабільну активність. Хоча за останні 30 днів спостерігається зміна кількості учасників на -144, а за останні 24 години на -9, загальне охоплення залишається високим.
- Статус верифікації: Не верифікований
- Рівень залученості (ER): Середній показник залученості аудиторії становить 14.32%. Протягом перших 24 годин після публікації контент зазвичай збирає 5.80% реакцій від загальної кількості підписників.
- Охоплення публікацій: В середньому кожен допис отримує 2 306 переглядів. Протягом першої доби публікація в середньому набирає 934 переглядів.
- Реакції та взаємодія: Аудиторія активно підтримує контент: середня кількість реакцій на один пост – 16.
- Тематичні інтереси: Контент зосереджений навколо ключових тем, таких як javascript, github, css, интерфейс, браузер.
📝 Опис та контентна політика
Автор описує ресурс як майданчик для висловлення суб'єктивної думки:
“React программирование
@haarrp - admin
@itchannels_telegram - 🔥лучшие ит-каналы
@javascriptv - продвинутый javascript
@programming_books_it - бесплатные it книги
@ai_machinelearning_big_data - ml
№ 5037566384”
Завдяки високій частоті оновлень (останні дані отримано 01 листопада, 2026), канал підтримує актуальність та високий рівень охоплення публікацій. Аналітика показує, що аудиторія активно взаємодіє з контентом, що робить його важливою точкою впливу в категорії Технології та додатки.
16 104
Підписники
-924 години
-557 днів
-14430 днів
Архів дописів
16 105
Хотите начать писать автотесты на JS?
Пройди хардкорный тест по автотестированию на JS и проверь свой уровень.
Ответишь — пройдешь на продвинутый курс «JavaScript QA Engineer» от OTUS по специальной цене + получишь видео-курс по Git в подарок
Пройти тестирование
https://otus.pw/1hTw/
Нативная интеграция. Информация о продукте www.otus.ru16 105
🗂4 пользовательских хука React.
1. useMount
Следует настроить хук под названием useMount. Тогда функция обратного вызова будет выполняться только при первом рендеринге компонента.
Исходный код:
const useMount = (callback) => {
React.useEffect(callback, [])
}
Пример:
const UseMountDemo = () => {
const [count, setCount] = React.useState(0)
useMount(() => {
console.log("useMount")
})
return (
<div>
count: { count }
<button onClick={() => setCount(count++)}>add</button>
</div>
)
}
Когда компонент рендерится повторно, useMount не выполняется снова.
2. useUnmount
Можно разработать хук useUnmount, чтобы указать, что функция обратного вызова выполняется, когда компонент размонтирован.
Исходный код:
const useUnmount = (callback) => {
React.useEffect(() => {
return callback
}, [])
}
Пример:
const Child = () => {
const [ count, setCount ] = useState(0)
useUnmount(() => {
// Мы ожидаем вывод значения num, когда компонент будет размонтирован
console.log('useUnmount', count)
})
return (
<div>
count: {count}
<button onClick={() => setCount(count + 1)}>add</button>
</div>
)
}
const UseUnmountedDemo = () => {
const [showChild, setShowChild] = React.useState(true);
// Мы используем "showChild" для управления отображением и скрытием дочернего компонента
return (
<div>
{ !!showChild && <Child /> }
<button onClick={() => setShowChild(false)}>Destroy child</button>
</div>
)
}
Когда компонент Child удаляется, функция обратного вызова useUnmount выполняется, но обнаруживается, что count — это начальное значение 0, а не 10. Что вызывает такой неправильный результат?
Причина этого кроется в механизме закрытия в useEffect, потому что функция передается при выгрузке компонента для первого рендеринга. Чтобы получить состояние в реальном времени, нужно использовать useRef.
const useUnmount = (callback) => {
const callbackRef = React.useRef(callback)
callbackRef.current = callback
React.useEffect(() => {
return () => {
callbackRef.current()
}
}, [])
}
Теперь при удалении компонента получаем правильное значение count
3. useContext
Иногда необходимо выполнять логический код только после изменения зависимости. Можно ли мы достичь этой цели, используя такой подход?
function UseUpdateEffectDemo() {
const [count, setCount] = React.useState(0)
React.useEffect(() => {
console.log('count changed', count)
}, [ count ])
return (
<div>
count: {count}
<button onClick={() => setCount(count + 1)}>change</button>
</div>
)
}
Однако count выведет 0, как только компонент будет смонтирован. Как можно выполнить функцию обратного вызова после изменения count?
const useUpdateEffect = function (effectCallback, deps = []) {
const isFirstMount = React.useRef(false)
React.useEffect(() => {
return () => {
isFirstMount.current = false
}
}, [])
React.useEffect(() => {
// Не выполняйте effectcallback для первого раза
if (!isFirstMount.current) {
isFirstMount.current = true
} else {
return effectCallback()
}
}, deps)
}
function UseUpdateEffectDemo() {
const [count, setCount] = React.useState(0)
useUpdateEffect(() => {
console.log('Count changed', count)
}, [ count ])
return (
<div>
count: {count}
<button onClick={() => setCount(count + 1)}>change</button>
</div>
)
}
4. useSetState
Читать продолжение16 105
Million.js — ориентированная на производительность замена VDOM для React
Начавшаяся два года назад как небольшая, не зависящая от библиотек реализация виртуального DOM, Million сейчас — это библиотека, которая ускоряет работу компонентов React до 70 %.
16 105
📚7 библиотек для анимаций на React
1. React Spring
React-spring - это библиотека, основанная на принципах физики пружин, которая позволяет создавать анимацию пользовательского интерфейса и удовлетворить большинство ваших потребностей в этой области. Ее гибкие инструменты позволяют реализовать ваши идеи и создать интерактивные интерфейсы с анимацией.
2. Framer Motion
Framer Motion - это библиотека анимации для React, которая подходит для использования в проектах. Она использует функциональность, предоставляемую Framer - лучшим инструментом для прототипирования команд. Библиотека создана на основе открытого исходного кода...
3. TS Particles
С tsParticles вы можете легко создавать подробные настройки для частиц и анимаций конфетти и фейерверков, которые могут использоваться как анимированные фоны для вашего сайта. Эта библиотека предоставляет готовые компоненты для работы с React, Angular, Svelte и Web Components.
4. Green Sock
GSAP, или GreenSock Animation Platform, является платформой для анимации, которая может анимировать любой элемент, на который можно нажать (CSS свойства, SVG, React Canvas, общие объекты и многое другое), решая множество проблем с несоответствиями в разных браузерах, и все это происходит с ошеломляющей скоростью.
5. Remotion
Remotion — это инструмент, который позволяет создавать видео и анимации с использованием HTML, CSS, JavaScript и TypeScript, и даже неспециалисты могут освоить этот процесс. Основываясь на своем программистском опыте, вы можете создавать анимации и видео с помощью Remotion.
6. React Move
React Move — легковесная библиотека, позволяющая разработчикам создавать красивые анимации на основе данных. Она наглядно отражает события жизненного цикла при загрузке страниц, и может быть использована для создания привлекательных эффектов в вашем проекте.
7. React Awesome Reveal
React Awesome Reveal позволяет создавать анимацию появления элементов с помощью Intersection Observer API, который определяет, когда элементы становятся видимыми в окне приложения.
Emotion использует эффективную технологию анимации CSS, которая повышает производительность и обеспечивает аппаратное ускорение.
16 105
Parallax Article Card — форма с эффектом параллакса при наведении. Реализована с помощью SCSS и JavaScript.
https://codepen.io/mprquinn/pen/zdKqGE
@react_tg
16 105
❗️ Хотите начать писать автотесты на JS?
⚠️ Приходите 8 июня в 20:00 на открытый урок в преддверии старта онлайн-курса «JavaScript QA Engineer» в OTUS.
📌 На занятии мы познакомимся с основами популярного фреймворков для написания тестов на JavaScript — mocha и библиотеки утверждений — chai.
Для этого мы:
— Рассмотрим основные принципы написания тестов
— Узнаем, как использовать chai для создания автоматизированных тестов на JavaScript
— Напишем пару unit и API тестов.
Урок пройдет в рамках онлайн-курса OTUS “JavaScript QA Engineer”. После занятия полный курс можно приобрести удобным для вас способом.👉 Готовьте вопросы и записывайтесь на вебинар! РЕГИСТРАЦИЯ — https://otus.pw/tf74/
Нативная интеграция. Информация о продукте www.otus.ru16 105
Стартануть в IT быстро и эффективно — подготовительный курс по Frontend-разработке.
🗓 Начинаем 13 июня!
Даем: 72 урока с практикой в браузере, 3 онлайн вебинара и 1 сессию лайвкодинга с практикующим разработчиком.
Получаем: крепкие знания базы языка, умение понимать код и первую программу на JavaScript, написанную вместе с наставником.
🔜 Запишитесь прямо сейчас!
16 105
7 методов оптимизации производительности React
1. Использование React.memo (HOC, а не хук)
import React, { memo } from 'react'
interface Props {
title: string
subtitle: string
}
const MyComponent: React.FC<Props> = memo(({ title, subtitle }) => {
return (
<div>
<h1>{title}</h1>
<h2>{subtitle}</h2>
</div>
)
})
2. Оптимизация обработчиков событий с помощью useCallback
import React, { useState, useCallback } from 'react'
const Counter: React.FC = () => {
const [count, setCount] = useState(0) const increment = useCallback(() => {
setCount(prevCount => prevCount + 1)
}, [])
return (
<div>
<p>Count: {count}</p>
<button onClick={increment}>Increment</button>
</div>
)
}
3. Виртуализация длинных списков с помощью react-window
import React from 'react'
import { FixedSizeList as List } from 'react-window'
const Row: React.FC<{ index: number; style: React.CSSProperties }> = ({
index,
style,
}) => {
return (
<div style={style}>
<p>{`Row ${index}`}</p>
</div>
)
}
const VirtualizedList: React.FC = () => {
const itemCount = 1000
return (
<List height={500} itemCount={itemCount} itemSize={50} width={300}>
{Row}
</List>
)
}
4. Ленивая загрузка компонентов с помощью React.lazy и Suspense
import React, { lazy, Suspense } from 'react'
const LazyLoadedComponent = lazy(() => import('./LazyLoadedComponent'))
const App: React.FC = () => {
return (
<div>
<Suspense fallback={<div>Loading...</div>}>
<LazyLoadedComponent />
</Suspense>
</div>
)
}
5. Использование API React.Profiler для выявления узких мест производительности
import React, { Profiler } from 'react'
const onRender = (
id: string,
phase: 'mount' | 'update',
actualDuration: number,
baseDuration: number,
startTime: number,
commitTime: number,
interactions: Set<{ id: number; name: string; timestamp: number }>
) => {
console.log('Profiler:', {
id,
phase,
actualDuration,
baseDuration,
startTime,
commitTime,
interactions,
})
}
const App: React.FC = () => {
return (
<Profiler id="MyComponent" onRender={onRender}>
<MyComponent />
</Profiler>
)
}
6. Оптимизация обновления состояний с помощью Immer
import React, { useState } from 'react'
import produce from 'immer'
interface User {
id: number
name: string
}
const App: React.FC = () => {
const [users, setUsers] = useState<User[]>([
{ id: 1, name: 'Alice' },
{ id: 2, name: 'Bob' },
])
const updateUser = (id: number, newName: string) => {
setUsers(
produce((draftUsers: User[]) => {
const user = draftUsers.find(user => user.id === id)
if (user) {
user.name = newName
}
})
)
}
return (
// ...
)
}
7. Использование троттлинга и дебаунсинга для обработчиков ввода
import React, { useState, useCallback } from 'react'
import { debounce } from 'lodash-es'
const SearchBox: React.FC = () => {
const [searchTerm, setSearchTerm] = useState('')
const handleSearch = useCallback(
debounce((value: string) => {
setSearchTerm(value)
}, 300),
[]
)
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
handleSearch(event.target.value)
}
return (
<div>
<input type="text" onChange={handleChange} />
</div>
)
}
@react_tg16 105
Вы фронтендер и ещё не слышали об Astro?
Это фреймворк, который стремительно набирает популярность и конкурирует с популярным NextJS. Он ориентирован на производительность сайта, а ещё с ним можно использовать любую библиотеку: React, Vue, Angular и другие.
Дмитрий Безуглый (8+ лет опыта в Яндекс, VK и Frogly) решил разобраться, чем же так хорош Astro, поэтому ничего не планируйте на 8 июня — будем строить приложение в прямом эфире!
Поговорим об основных концепциях фреймворка, его архитектурных паттернах и подходах, которые позволяют достичь такой оптимизации.
Встречаемся 8 июня в 19:00 (GMT+3)
Не забудьте зарегистрироваться!
16 105
⚡ Как избежать повторного рендеринга компонентов React
https://blog.openreplay.com/how-to-stop-react-components-from-rerendering/
@react_tg
16 105
Тем временем библиотеке React исполнилось 10 лет. Это проект, который сделал много шума в веб-индустрии и, кажется, все еще впереди. Поддержим React реакциями?
16 105
5 ошибок, которые можно допустить при запуске первого проекта React
Даже самая лучшая документация не охватывает абсолютно всё. Поэтому, работая с новым инструментом, можно столкнуться с различного рода ошибками и проблемами. Это касается даже такой популярной библиотеки, как React.
В этой статье автор поделился ошибками, которые допустил он и можете допустить вы, начиная свой первый проект:
https://css-tricks.com/5-mistakes-starting-react/
@react_tg
16 105
Как писать комментарии в React: хорошие, плохие и уродливые
Когда дело доходит до написания комментариев, React предлагает синтаксис
{/* Comment */}, который может быть немного многословен.
В этой статье вы можете посмотреть, как использовать обычные комментарии JSX и ещё 2 других способа комментирования, которые могут быть лучше:
https://dmitripavlutin.com/react-comments/
#react #фронтенд16 105
⚡️ Стартовал прием заявок на Технологический конкурс НТИ Up Great «Экстренный поиск»!
Участникам предстоит преодолеть комплексный технологический барьер, предусматривающий разработку технологий и технических решений, объединенных в единую систему, позволяющую эффективно использовать техническое зрение при поиске пропавших людей с применением беспилотных воздушных судов (БВС).
На первом этапе (Сателлит №1) участникам необходимо разработать программное решение для поиска объектов (людей) на изображениях, полученных с БВС.
Призовой фонд Сателлита №1 составляет 5 млн руб.
Лучшим командам, удовлетворяющим требованиям технического регламента, организаторами будут предоставлены БВС для участия во втором этапе (Сателлит №2) и финале конкурса.
Призерами и победителями могут стать только налоговые резиденты РФ.
📲 Заявки на Сателлит № 1 принимаются до 12 июня 2023 г. по ссылке.
Конкурс организуется совместно МФТИ, Фондом НТИ и добровольческим поисково-спасательным отрядом «ЛизаАлерт». Общий призовой фонд составляет 135 млн руб.
16 105
Mountain Hero Page — красивая страница с анимированным скроллом. Страница реализована с помощью CSS и JavaScript.
https://codepen.io/aryancodeworm/pen/rNKqgpY
@react_tg
16 105
React recursively re-renders child components, but there is a nuance
https://alexsidorenko.com/blog/react-render-children-prop #react
16 105
⚡ Подборка ресурсов с полезными шпаргалками для фронтенд-разработчика:
▫️htmlcheatsheet
▫️cssreference
▫️reactcheatsheet
▫️cheatography
▫️javascriptcheatsheet
Сохраняем себе, чтобы не потерять
@react_tg
