À medida que o React continua a dominar o ecossistema front-end, dominar seus padrões de design pode melhorar significativamente a eficiência e a escalabilidade de seus aplicativos. Os padrões de design React oferecem práticas recomendadas para organizar e estruturar componentes, gerenciar estado, manipular adereços e melhorar a reutilização. Neste blog, exploraremos alguns dos principais padrões de design do React que podem levar seu processo de desenvolvimento de bom a ótimo.

1. Componentes de apresentação e contêiner

Um dos padrões fundamentais no React é o padrão Componentes de apresentação e contêiner, que trata da separação de interesses:

• Componentes de apresentação: Esses componentes são responsáveis ​​pela aparência das coisas. Eles recebem dados e retornos de chamada por meio de adereços, mas não possuem lógica própria. Seu único propósito é renderizar a UI.

• Componentes do contêiner: Esses componentes gerenciam como as coisas funcionam. Eles contêm a lógica, gerenciam o estado e lidam com a busca de dados ou manipulação de eventos. Os componentes do contêiner passam dados para os componentes de apresentação.

// Presentational Component
const UserProfile = ({ user }) => (
  

    
{user.name}
    
{user.email}
  
);

// Container Component
const UserProfileContainer = () => {
  const [user, setUser] = useState({ name: 'John Doe', email: '[email protected]' });

  return ;
};

Esse padrão incentiva a separação de interesses, tornando o código mais fácil de manter e testar.

2. Componentes de ordem superior (HOC)

Componentes de ordem superior (HOCs) são um padrão de design poderoso para reutilizar a lógica de componentes. Um HOC é uma função que pega um componente e retorna um novo componente com comportamento aprimorado ou funcionalidade adicionada.

Esse padrão é comumente usado para questões transversais, como autenticação, temas ou busca de dados.

// Higher-Order Component for authentication
const withAuth = (WrappedComponent) => {
  return (props) => {
    const isAuthenticated = // logic to check auth;

    if (!isAuthenticated) {
      return 
You need to log in!
;
    }

    return ;
  };
};

// Usage
const Dashboard = () => 
Welcome to the dashboard
;
export default withAuth(Dashboard);

HOCs promovem os princípios DRY (Don't Repeat Yourself), permitindo lógica reutilizável em vários componentes.

3. Renderizar acessórios

O padrão Render Props envolve passar uma função como um suporte para um componente, permitindo a renderização dinâmica de conteúdo com base nessa função. Isso é particularmente útil para compartilhar lógica com estado entre componentes sem usar HOCs.

// Render Prop Component
class MouseTracker extends React.Component {
  state = { x: 0, y: 0 };

  handleMouseMove = (event) => {
    this.setState({ x: event.clientX, y: event.clientY });
  };

  render() {
    return (
      

        {this.props.render(this.state)}
      
    );
  }
}

// Usage
const App = () => (
  
Mouse position: {x}, {y}
} />
);

Esse padrão oferece flexibilidade ao separar a lógica da UI, tornando os componentes mais reutilizáveis ​​e personalizáveis.

4. Componentes Compostos

O padrão Compound Component é comumente usado em bibliotecas como react-select ou react-table. Ele permite que um componente pai controle um grupo de componentes filhos. Esse padrão promove flexibilidade na construção de interfaces reutilizáveis ​​e dinâmicas.

// Compound Component
const Tabs = ({ children }) => {
  const [activeTab, setActiveTab] = useState(0);

  return (
    

      

        {children.map((child, index) => (
           setActiveTab(index)}>
            {child.props.title}
          
        ))}
      
      
{children[activeTab]}
    
  );
};

// Usage
Content of Tab 1
  
Content of Tab 2
;

Este padrão fornece uma API limpa para comunicação entre pais e filhos, mantendo os componentes flexíveis e personalizáveis.

5. Componentes controlados versus não controlados

React fornece duas maneiras de gerenciar entradas de formulário: componentes controlados e componentes não controlados.

• Componentes controlados: Esses componentes têm seu estado totalmente controlado pelo React via props, o que os torna mais previsíveis.

• Componentes não controlados: Esses componentes dependem de referências para manipular diretamente o DOM, fornecendo menos controle, mas potencialmente mais desempenho.

// Controlled Component
const ControlledInput = () => {
  const [value, setValue] = useState('');

  return  setValue(e.target.value)} />;
};

// Uncontrolled Component
const UncontrolledInput = () => {
  const inputRef = useRef();

  const handleClick = () => {
    console.log(inputRef.current.value);
  };

  return ;
};

A escolha entre esses padrões depende se você precisa de controle refinado ou otimizações leves de desempenho.

6. Ganchos personalizados

React Hooks nos permite construir lógica personalizada de forma reutilizável. Ao extrair a lógica comum em ganchos personalizados, podemos evitar a duplicação de código e tornar nossa base de código mais modular.

// Custom Hook
const useFetch = (url) => {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch(url)
      .then((response) => response.json())
      .then((data) => setData(data))
      .catch((error) => setError(error));
  }, [url]);

  return { data, error };
};

// Usage
const DataFetchingComponent = () => {
  const { data, error } = useFetch('https://api.example.com/data');

  if (error) return 
Error: {error.message}
;
  if (!data) return 
Loading...
;

  return 
{data.someField}
;
};

Ganchos personalizados permitem melhor separação de interesses e reutilização de funcionalidades comuns de maneira declarativa.

Conclusão

Os padrões de design são uma parte crítica da escrita de aplicativos React limpos, fáceis de manter e escaláveis. Aproveitando padrões como componentes de apresentação e contêiner, HOCs, acessórios de renderização, componentes compostos e ganchos personalizados, você pode garantir que seu código seja flexível, reutilizável e fácil de entender.

Compreender e implementar esses padrões pode melhorar drasticamente seu fluxo de trabalho de desenvolvimento, tornando seus projetos React mais organizados e eficientes. Tente incorporá-los em seu próximo projeto e experimente a diferença na qualidade e na capacidade de manutenção do código!