DEV Community

Cover image for Padrões de Projeto em React [HOCs, Render Props, Hooks]
Vitor Rios
Vitor Rios

Posted on

1

Padrões de Projeto em React [HOCs, Render Props, Hooks]

Introdução

Os padrões de projeto são soluções comprovadas para problemas comuns no desenvolvimento de software. Em React, a aplicação desses padrões pode tornar seu código mais modular, reutilizável e fácil de manter. Neste artigo, exploraremos alguns dos padrões de projeto mais comuns e úteis em React: Higher Order Components (HOCs), Render Props e Hooks.

1. Higher Order Components (HOCs)

Higher Order Components (HOCs) são funções que recebem um componente e retornam um novo componente com funcionalidades adicionais. Eles são frequentemente usados para adicionar lógica comum a múltiplos componentes.

Exemplo de HOC

Vamos criar um HOC simples que adiciona funcionalidades de log ao clicar em um botão:

import React from 'react';

// Higher Order Component
const withLogger = (WrappedComponent) => {
  return class extends React.Component {
    handleClick = () => {
      console.log('Button clicked!');
    };

    render() {
      return <WrappedComponent onClick={this.handleClick} {...this.props} />;
    }
  };
};

// Componente Original
const Button = ({ onClick, children }) => (
  <button onClick={onClick}>{children}</button>
);

// Componente Envolvido com HOC
const ButtonWithLogger = withLogger(Button);

export default ButtonWithLogger;
Enter fullscreen mode Exit fullscreen mode

2. Render Props

Render Props é uma técnica que permite compartilhar lógica entre componentes usando uma prop cujo valor é uma função. Essa função recebe os dados necessários para renderizar o conteúdo.

Exemplo de Render Props

Vamos criar um componente que gerencia o estado de visibilidade e fornece essa lógica através de render props:

import React, { useState } from 'react';

// Componente de Render Props
const Toggle = ({ children }) => {
  const [isVisible, setIsVisible] = useState(false);

  const toggleVisibility = () => setIsVisible(!isVisible);

  return children({ isVisible, toggleVisibility });
};

// Componente que utiliza Render Props
const App = () => (
  <Toggle>
    {({ isVisible, toggleVisibility }) => (
      <div>
        <button onClick={toggleVisibility}>Toggle</button>
        {isVisible && <p>Content is visible</p>}
      </div>
    )}
  </Toggle>
);

export default App;
Enter fullscreen mode Exit fullscreen mode

3. Hooks

Hooks são uma adição recente ao React que permitem usar estado e outras funcionalidades do React sem escrever uma classe. Eles são uma alternativa poderosa e flexível aos HOCs e Render Props.

Exemplo de Hook Personalizado

Vamos criar um hook personalizado para gerenciar o estado de visibilidade:

import { useState } from 'react';

// Hook Personalizado
const useToggle = (initialState = false) => {
  const [isVisible, setIsVisible] = useState(initialState);

  const toggleVisibility = () => setIsVisible(!isVisible);

  return [isVisible, toggleVisibility];
};

// Componente que utiliza o Hook
const App = () => {
  const [isVisible, toggleVisibility] = useToggle();

  return (
    <div>
      <button onClick={toggleVisibility}>Toggle</button>
      {isVisible && <p>Content is visible</p>}
    </div>
  );
};

export default App;
Enter fullscreen mode Exit fullscreen mode

Comparação entre HOCs, Render Props e Hooks

  • Higher Order Components (HOCs):

    • Quando usar: Adicionar comportamento a vários componentes sem modificar seu código.
    • Benefícios: Reutilização de lógica, separação de preocupações.
    • Desvantagens: Podem levar ao aninhamento excessivo de componentes (wrapper hell).
  • Render Props:

    • Quando usar: Compartilhar lógica complexa entre componentes.
    • Benefícios: Flexibilidade na composição de componentes.
    • Desvantagens: Pode levar a código mais verboso e menos legível.
  • Hooks:

    • Quando usar: Gerenciar estado e efeitos colaterais em componentes funcionais.
    • Benefícios: Simplicidade, concisão, facilidade de composição.
    • Desvantagens: Requer familiaridade com a API de Hooks.

Conclusão

Cada padrão de projeto em React tem seus próprios casos de uso e benefícios. Os Higher Order Components (HOCs) são úteis para adicionar comportamento comum a vários componentes, enquanto os Render Props permitem compartilhar lógica complexa de maneira flexível. Os Hooks, por sua vez, proporcionam uma maneira simples e poderosa de gerenciar estado e efeitos colaterais em componentes funcionais. Escolher o padrão certo depende das necessidades específicas do seu projeto e das preferências da sua equipe.

Implementar esses padrões de projeto em suas aplicações React pode tornar seu código mais modular, reutilizável e fácil de manter, resultando em uma base de código mais robusta e escalável.

Espero que este artigo tenha sido útil para você. Se tiver alguma dúvida ou sugestão, sinta-se à vontade para comentar!

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay