Ответ
- Большие компоненты - разбиваю на мелкие переиспользуемые компоненты с одной ответственностью. Пример плохого подхода:
function UserProfile() {
// Слишком много логики в одном компоненте
return <div>...</div>;
}-
Проп дриллинг - избегаю передачи props через множество уровней, использую Context API или state-менеджеры.
-
Использование индексов как key - это может вызвать проблемы с ререндерингом. Лучше использовать уникальные ID.
-
Прямые манипуляции DOM - вместо
document.querySelectorиспользую refs и React-way управления DOM. -
Избыточные ререндеры - оптимизирую с помощью
React.memo,useMemo,useCallback. -
Хранение недеривативного состояния - избегаю хранения данных, которые можно вычислить из существующего состояния.
-
Использование setState в цикле - группирую обновления состояния или использую функциональную форму setState.
Ответ 18+ 🔞
А, слушай, вот это я понимаю — тема! Реакт, блядь, как кухня у бабушки: вроде всё просто, но если не знать, где какая сковородка висит, можно наготовить такого, что потом полгода отмывать. Ёпта, давай по пунктам, как не наступить на эти грабли, а то они, сука, прямо в лоб бьют.
Первое — эти здоровенные компоненты, которые пытаются весь мир в себя запихнуть. Ну вот представь: пишешь ты UserProfile, а там и аватарка, и настройки, и история заказов, и ещё какая-то хуйня вроде рекомендаций друзей. Получается монстр, который одного взгляда боится. Это ж пиздец как неудобно! Дели всё на мелкие, тупые, как пробка, кусочки. Пусть один только аватарку рисует, другой — кнопки, третий — список. И живётся легче, и переиспользовать можно, как презервативы — везде сойдёт.
Второе — проп дриллинг, ёбушки-воробушки. Это когда тебе нужно протащить какую-нибудь хуйню типа themeColor через десять компонентов-посредников, которые ей нахуй не упали. Каждый раз прокидывать пропсы — это как в армии передавать приветы через третьи руки: к концу уже «передай тому мудаку, что он мудак» превращается в «скажи тому хорошему человеку привет». Используй Context, хуле, или какой state-менеджер. Пусть данные живут там, где они нужны, а не путешествуют, как бомжи по вагонам.
Третье — ключи по индексу в массивах. Ну это классика, блядь! key={index} — и думаешь, что гений. А потом добавляешь элемент в начало списка, и у тебя весь интерфейс ебётся, как коза на льду. React начинает путать, кто где был, и перерисовывает всё подряд. Бери уникальный id, ебать твою душу! Нет айдишника — генерируй, хуй с ним, лишь бы не индекс.
Четвёртое — лезть в DOM напрямую, как слон в посудную лавку. document.getElementById, querySelector — это же крик души старого фронтендера! Ты в Реакте, чувак! Здесь всё через рефы и виртуальный DOM. Хочешь до элемента дотянуться — useRef тебе в руки. Не позорься.
Пятое — ререндеры, которые летят, как из пулемёта. На каждое чихание состояние обновляется — и весь лес, сука, дёргается. React.memo для компонентов, useMemo для тяжёлых вычислений, useCallback для функций, которые ты в пропсы прокидываешь. Это не просто оптимизация — это вопрос выживания на слабых устройствах, где твоё приложение и так еле дышит.
Шестое — хранить в состоянии то, что можно на месте посчитать. Ну вот зачем тебе отдельная переменная fullName, если есть firstName и lastName? Это же производная, блядь! Вычисляй её прямо в рендере или через useMemo, если дорого. Не засоряй стейт лишней хуйней — он и так, как твоя голова после пятницы, мутный.
Седьмое — вызывать setState в циклах или колбэках, которые часто дергаются. React, он, конечно, умный, но если ты ему в одну секунду десять команд «обновись» крикнешь, он может и запутаться. Либо группируй обновления, либо используй функциональную форму: setCount(prev => prev + 1). Чтобы он точно знал, откуда ноги растут, а не гадал, как в лотерее.
Вот, блядь, семь смертных грехов Реакта. Совершаешь их — получаешь приложение, которое тормозит, ломается и вызывает желание нахуй всё удалить. А так — пиши аккуратно, думай головой, и будет тебе счастье, как тому Герасиму, только без утопления собаки в конце.