Ты читал статьи про HOC, Render Props, Compound Components. Возможно, даже использовал.

Я тоже. И теперь жалею.

Потому что 80% этих паттернов умерли ещё в 2019. Просто не все об этом знают. 🚀

Краткая история одного обмана

Раньше React был бедным. 💥

Не было хуков. Не было контекста нормального. Жизненные циклы - только в классах.

Поэтому умные дяди придумывали обходные пути. HOC, чтобы переиспользовать логику. Render Props, чтобы прокидывать данные. Подобные танцы с бубном.

Потом вышли хуки. 🧼

И всё это стало не нужно.

Но статьи остались. И люди продолжают учить паттерны, которые решают несуществующие проблемы.

Первый труп: HOC (Higher-Order Component) 🦸‍♂️

Классика. Функция, которая берёт компонент и возвращает новый, обёрнутый.

Пример:

\\ withAuth(UserPage) withTheme(Button) withLogger(Input) \\

Выглядит умно и уместно. По факту - чёрная магия.

Ты смотришь в компонент и не видишь, откуда у него props.theme или props.user. Где-то там, в обёртке. В трёх уровнях вложенности.

Хуки решили это одной строкой:

\\ const { theme } = useTheme() const { user } = useAuth() \\

Прозрачно. Предсказуемо. Без ада обёрток.

Забудь про HOC. Используй хуки. 🎛️

—

Второй труп: Render Props 💀

Паттерн, где ты передаёшь функцию-рендер в пропс. Компонент вызывает её с данными.

Пример:

\\

{({ data, loading }) => (     loading ? :   )}

\\

Гениально. Только теперь вместо пропсов у тебя колбэк. Вложенность растёт. Читаемость падает.

Та же задача решается через useEffect и useState. Или через react-query одной строчкой.

Render Props - это прошлый век. 📈

Третий жмур: HOC + Render Props вместе 🕸️

Был такой гибрид. Компонент-монстр, который принимал и обёртки, и рендер-функции.

Пример из реального проекта:

\\ withRouter(   withTheme(     withAuth(       ({ data }) => (                   {value => {value}}               )     )   ) ) \\

Это не код. Это матрёшка. 🧨

Ты добавляешь одну фичу. Ломается три.

Хуки похоронили этот ад окончательно и бесповоротно.

Что осталось живого 🏗️

Не всё - мусор. Три паттерна до сих пор работают.

Первый. Compound Components. 🧩

Компоненты, которые работают в связке, но ты можешь менять их структуру.

Пример - Select с внутренними Select.Option. Или Tabs с Tab.Panel.

Хуки не умеют этого. Только композиция компонентов. Живой паттерн.

Второй. Провайдеры с контекстом. 🌍

Обёртка, которая даёт данные всем детям.

Раньше был HOC. Теперь - createContext и useContext. Проще, чище, без магии.

Третий. Хуки как замена всему. 🔌

Любую логику ты выносишь в кастомный хук.

useAuth, useTheme, useMediaQuery, useLocalStorage. Всё это просто хуки.

Никаких обёрток. Никаких HOC. Никаких Render Props.

Как не попасть в ловушку

Правило одно и работает всегда и безотказно.

Спроси себя: «Решает ли этот паттерн проблему, которую не решают хуки?»

Если ответ «нет» или «не уверен» - используй хуки.

Гуглил решение? Нашёл статью с HOC или Render Props? Закрой вкладку и забудь. Ищи альтернативу на хуках. Она есть в 95% случаев.

Остальные 5% - либо очень старая кодовая база, либо архитектурный изврат.

Итог

Хаки - это легаси, которое не успело состариться. 😂

Их придумали, потому что React был недоделан. Уже доделали. Пора забыть.

Пиши на хуках. Композируй через кастомные хуки. Используй Compound Components для UI-библиотек.

Всё остальное - лишний код, который через год будет бесить тебя же. 🔥

Не усложняй. React и так достаточно сложный. 🎯