Quantas vezes você já se viu copiando e colando a mesma lógica entre componentes? Autenticação, loading states, tratamento de erros... Se você já passou por isso, este artigo é para você. Hoje, quero compartilhar Higher-Order Components (HOCs) - um padrão que pode revolucionar como você estrutura seus componentes React. By the end of this article, você vai entender como criar HOCs reutilizáveis, quando usá-los e como evitar armadilhas comuns. ## O que são Higher-Order Components? Um Higher-Order Component é uma função que recebe um componente e retorna um novo componente com funcionalidades adicionais. Pense neles como "decoradores" para seus componentes. É como ter um assistente que pega seu componente básico e adiciona superpoderes: autenticação, cache, logs, ou qualquer lógica que você precise compartilhar. ```javascript // Estrutura básica de um HOC const withSuperPowers = (WrappedComponent) => { return function EnhancedComponent(props) { // Lógica adicional aqui return ; }; }; ``` ## Quando Você Deve Usar HOCs? **Casos de uso ideais:** - Lógica de autenticação compartilhada - Loading states e error handling - Injeção de props baseada em dados externos - Logging e analytics - Conditional rendering baseado em permissões **Quando NÃO usar HOCs:** - Para lógica simples que pode ser um custom hook - Quando você precisa acessar ref (use forwardRef) - Para transformações simples de props (use componentes normais) ## Implementação: Seu Primeiro HOC Vamos construir um exemplo prático: um HOC para adicionar loading state a qualquer componente. ### Passo 1: HOC Básico de Loading ```javascript // withLoading.js import React from 'react'; const withLoading = (WrappedComponent) => { return function WithLoadingComponent(props) { const { isLoading, ...otherProps } = props; if (isLoading) { return

Carregando...

; } return ; }; }; export default withLoading; ``` Agora qualquer componente pode ter loading state automaticamente! ### Passo 2: Usando o HOC ```javascript // UserProfile.js import React from 'react'; import withLoading from './withLoading'; const UserProfile = ({ user }) => (

{user.name}

{user.email}

); const UserProfileWithLoading = withLoading(UserProfile); // Uso ``` ### Passo 3: Composição de HOCs ```javascript // Você pode compor múltiplos HOCs const EnhancedUserProfile = withLoading( withErrorHandling( withAuthentication(UserProfile) ) ); ``` ## Um Exemplo Mais Complexo: Sistema de Autenticação Vamos construir algo mais realista - um HOC para proteger rotas com autenticação: ```javascript // withAuthentication.js import React, { useEffect, useState } from 'react'; import { Navigate } from 'react-router-dom'; const withAuthentication = (WrappedComponent, options = {}) => { return function AuthenticatedComponent(props) { const [isAuthenticated, setIsAuthenticated] = useState(null); const [isLoading, setIsLoading] = useState(true); const { redirectTo = '/login', requiredRole } = options; useEffect(() => { const checkAuth = async () => { try { const response = await fetch('/api/auth/verify', { headers: { 'Authorization': `Bearer ${localStorage.getItem('token')}` } }); if (response.ok) { const userData = await response.json(); // Verifica role se necessário if (requiredRole && userData.role !== requiredRole) { setIsAuthenticated(false); } else { setIsAuthenticated(true); } } else { setIsAuthenticated(false); } } catch (error) { setIsAuthenticated(false); } finally { setIsLoading(false); } }; checkAuth(); }, []); if (isLoading) { return

Verificando autenticação...

; } if (!isAuthenticated) { return ; } return ; }; }; export default withAuthentication; ``` Este HOC verifica autenticação, suporta roles específicas e redireciona automaticamente usuários não autenticados. ## Padrão Avançado: HOC com Configuração Dinâmica Vamos criar algo ainda mais sofisticado - um HOC para gerenciar dados com cache: ```javascript // withDataFetching.js import React, { useState, useEffect, useCallback } from 'react'; const withDataFetching = (url, options = {}) => (WrappedComponent) => { return function WithDataFetchingComponent(props) { const [data, setData] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const { cacheKey = url, cacheDuration = 5 * 60 * 1000, // 5 minutos refetchOnMount = true, onSuccess, onError } = options; // Sistema de cache simples const getCachedData = useCallback(() => { const cached = localStorage.getItem(`cache_${cacheKey}`); if (!cached) return null; const { data: cachedData, timestamp } = JSON.parse(cached); const isExpired = Date.now() - timestamp > cacheDuration; return isExpired ? null : cachedData; }, [cacheKey, cacheDuration]); const setCachedData = useCallback((data) => { const cacheItem = { data, timestamp: Date.now() }; localStorage.setItem(`cache_${cacheKey}`, JSON.stringify(cacheItem)); }, [cacheKey]); const fetchData = useCallback(async (forceRefresh = false) => { if (!forceRefresh) { const cachedData = getCachedData(); if (cachedData) { setData(cachedData); setLoading(false); return; } } try { setLoading(true); setError(null); const response = await fetch(url); if (!response.ok) { throw new Error(`HTTP ${response.status}: ${response.statusText}`); } const result = await response.json(); setData(result); setCachedData(result); if (onSuccess) onSuccess(result); } catch (err) { setError(err.message); if (onError) onError(err); } finally { setLoading(false); } }, [url, getCachedData, setCachedData, onSuccess, onError]); useEffect(() => { if (refetchOnMount) { fetchData(); } }, [fetchData, refetchOnMount]); const refresh = () => fetchData(true); return ( ); }; }; export default withDataFetching; ``` ## HOCs com TypeScript Para usuários TypeScript, aqui está como tornar seus HOCs type-safe: ```typescript // types.ts interface WithLoadingProps { isLoading: boolean; } interface WithAuthProps { requiredRole?: string; redirectTo?: string; } interface WithDataProps { data: T | null; loading: boolean; error: string | null; refresh: () => void; } // withLoading.tsx import React from 'react'; function withLoading

( WrappedComponent: React.ComponentType

): React.ComponentType

{ return function WithLoadingComponent(props) { const { isLoading, ...otherProps } = props; if (isLoading) { return

Carregando...

; } return ; }; } // Uso com TypeScript interface UserProfileProps { user: { name: string; email: string; }; } const UserProfile: React.FC = ({ user }) => (

{user.name}

{user.email}

); const UserProfileWithLoading = withLoading(UserProfile); // Agora tem type safety completo! ``` ## Padrões Avançados e Melhores Práticas ### 1. Display Name para Debug Sempre defina um displayName para facilitar o debug: ```javascript const withLoading = (WrappedComponent) => { const WithLoadingComponent = (props) => { // lógica do HOC }; WithLoadingComponent.displayName = `withLoading(${WrappedComponent.displayName || WrappedComponent.name})`; return WithLoadingComponent; }; ``` ### 2. Hoisting de Static Methods Use hoist-non-react-statics para preservar métodos estáticos: ```javascript import hoistNonReactStatics from 'hoist-non-react-statics'; const withEnhancement = (WrappedComponent) => { const EnhancedComponent = (props) => { return ; }; return hoistNonReactStatics(EnhancedComponent, WrappedComponent); }; ``` ### 3. Forward Refs Para componentes que precisam de ref: ```javascript const withForwardedRef = (WrappedComponent) => { const WithForwardedRefComponent = React.forwardRef((props, ref) => { return ; }); WithForwardedRefComponent.displayName = `withForwardedRef(${WrappedComponent.displayName || WrappedComponent.name})`; return WithForwardedRefComponent; }; ``` ### 4. Composição Funcional Crie uma função para compor HOCs de forma mais legível: ```javascript const compose = (...hocs) => (WrappedComponent) => hocs.reduceRight((acc, hoc) => hoc(acc), WrappedComponent); // Uso mais limpo const EnhancedComponent = compose( withAuthentication, withLoading, withErrorHandling )(BaseComponent); ``` ## Armadilhas Comuns para Evitar ### 1. Não Mutate o Componente Original ```javascript // ❌ Não faça isso - modifica o componente original const withBadEnhancement = (WrappedComponent) => { WrappedComponent.prototype.componentDidMount = function() { // Modificação direta - muito perigoso! }; return WrappedComponent; }; // ✅ Faça isso - crie um novo componente const withGoodEnhancement = (WrappedComponent) => { return class extends React.Component { componentDidMount() { // Lógica segura aqui } render() { return ; } }; }; ``` ### 2. Cuidado com Refs ```javascript // ❌ Problema - ref não é passada const withBadRef = (WrappedComponent) => { return function BadRefComponent(props) { return ; }; }; // ✅ Solução - use forwardRef const withGoodRef = (WrappedComponent) => { return React.forwardRef((props, ref) => { return ; }); }; ``` ### 3. Props Name Collision ```javascript // ❌ Evite colisões de nomes const withBadProps = (WrappedComponent) => { return function BadPropsComponent(props) { // Se o componente já tem uma prop 'data', há conflito return ; }; }; // ✅ Use prefixos ou nomes específicos const withGoodProps = (WrappedComponent) => { return function GoodPropsComponent(props) { return ; }; }; ``` ## Quando NÃO Usar HOCs Não use HOCs quando: - A lógica é específica para um único componente - Você pode resolver com um custom hook simples - A complexidade não justifica o padrão ```javascript // ❌ Overkill para casos simples const withSimpleCounter = (WrappedComponent) => { return function WithCounterComponent(props) { const [count, setCount] = useState(0); return ; }; }; // ✅ Custom hook é mais simples const useCounter = (initialValue = 0) => { const [count, setCount] = useState(initialValue); return [count, setCount]; }; ``` ## HOCs vs Custom Hooks vs Render Props **HOCs são ótimos para:** - Lógica que precisa envolver completamente um componente - Conditional rendering baseado em autenticação - Adicionar props consistentes a múltiplos componentes **Considere alternativas quando você precisar de:** - Lógica simples de estado → Custom Hooks - Flexibilidade no render → Render Props - Composição mais explícita → Composition Components ## Conclusão Higher-Order Components são uma ferramenta poderosa que pode revolucionar como você estrutura aplicações React. Eles trazem reutilização de código, separação de responsabilidades e uma arquitetura mais limpa. **Principais takeaways:** - HOCs são funções que recebem um componente e retornam um componente enhanced - Ideais para lógica compartilhada como autenticação, loading e error handling - Sempre use displayName e hoist static methods - Cuidado com refs e colisões de props Da próxima vez que você se pegar copiando a mesma lógica entre componentes, lembre-se dos HOCs. Seu código futuro (e seus colegas de equipe) vão agradecer pela reutilização e organização! Você já usou HOCs em seus projetos? Que padrões você achou mais úteis? Compartilhe suas experiências nos comentários! --- *Se este artigo te ajudou a dominar HOCs, me siga para mais padrões e melhores práticas de React! 🚀* ## Recursos - [Higher-Order Components - Documentação Oficial React](https://legacy.reactjs.org/docs/higher-order-components.html)

Loading...

NAVEGAÇÃO

COMPANY

PROJETO

Higher-Order Components: O Padrão Que Poucos Dominam