React é uma das bibliotecas mais populares para desenvolvimento de interfaces de usuário, e uma de suas maiores forças é a capacidade de criar componentes reutilizáveis. Componentes bem projetados podem reduzir significativamente o tempo de desenvolvimento, aumentar a consistência da interface e melhorar a manutenibilidade do código. Neste guia, você aprenderá como criar componentes reutilizáveis, desde os fundamentos até práticas avançadas.

1. O que são Componentes Reutilizáveis?

Componentes reutilizáveis são blocos independentes e encapsulados de código que podem ser usados em diferentes partes de uma aplicação sem a necessidade de reescrevê-los. Eles permitem:

• Consistência: Mesma aparência e comportamento em diferentes lugares.
• Redução de código repetitivo: Menos duplicação de lógica e estilo.
• Manutenção simplificada: Alterações em um componente refletem em todas as instâncias.

Por exemplo, um botão, uma barra de navegação ou um card podem ser projetados como componentes reutilizáveis.

2. Estrutura de um Componente Reutilizável

Um componente reutilizável deve ser:

1. Genérico: Deve abstrair detalhes específicos e permitir personalização via props.
2. Bem encapsulado: Não deve depender de variáveis ou estados externos.
3. Personalizável: Deve aceitar diferentes estilos, comportamentos e conteúdos via propriedades.

Exemplo básico de um componente botão:

import React from 'react';

const Button = ({ children, onClick, style, className }) => {
  return (
    <button
      onClick={onClick}
      style={style}
      className={`btn ${className}`}
    >
      {children}
    </button>
  );
};

export default Button;

Aqui, o botão é genérico porque:

• O conteúdo é dinâmico ({children}).
• Ele aceita um estilo (style) e classes adicionais (className).
• A lógica de clique é passada via props (onClick).

3. Boas Práticas para Componentes Reutilizáveis

3.1. Organização do Código

Armazene seus componentes em uma estrutura clara. Por exemplo:

src/
├── components/
│   ├── Button/
│   │   ├── Button.js
│   │   ├── Button.css
│   │   └── index.js
│   ├── Card/
│   │   ├── Card.js
│   │   ├── Card.css
│   │   └── index.js

Isso facilita encontrar e manter seus componentes.

3.2. Prop Types e Default Props

Use PropTypes para validar as propriedades e definir valores padrão.

import React from 'react';
import PropTypes from 'prop-types';

const Button = ({ children, onClick, style, className }) => {
  return (
    <button onClick={onClick} style={style} className={`btn ${className}`}>
      {children}
    </button>
  );
};

Button.propTypes = {
  children: PropTypes.node.isRequired,
  onClick: PropTypes.func,
  style: PropTypes.object,
  className: PropTypes.string,
};

Button.defaultProps = {
  onClick: () => {},
  style: {},
  className: '',
};

export default Button;

3.3. Separação de Estilos

Centralize os estilos do componente em arquivos CSS, SCSS ou utilize bibliotecas como styled-components ou Emotion para manter os estilos coesos com o componente.

Exemplo com CSS Module:

import styles from './Button.module.css';

const Button = ({ children, onClick }) => {
  return (
    <button className={styles.button} onClick={onClick}>
      {children}
    </button>
  );
};

export default Button;

4. Níveis de Reutilização

Nem todo componente precisa ser completamente genérico. Divida-os em diferentes níveis de reutilização:

4.1. Componentes Puros

São os mais genéricos, como Button, Input, Checkbox. Não possuem lógica específica e aceitam props para personalização.

const Input = ({ value, onChange, placeholder, type = 'text' }) => (
  <input
    type={type}
    value={value}
    onChange={onChange}
    placeholder={placeholder}
  />
);

4.2. Componentes Composicionais

Permitem personalização por composição de outros componentes.

const Card = ({ header, footer, children }) => (
  <div className="card">
    {header && <div className="card-header">{header}</div>}
    <div className="card-body">{children}</div>
    {footer && <div className="card-footer">{footer}</div>}
  </div>
);

Uso:

<Card
  header={<h3>Título</h3>}
  footer={<button>Leia mais</button>}
>
  <p>Este é o conteúdo do card.</p>
</Card>

4.3. Componentes Específicos

São reutilizáveis, mas atendem a um caso de uso mais definido, como UserCard ou ProductList.

5. Estratégias para Maior Reutilização

5.1. Hooks Personalizados

Crie hooks para encapsular lógica reutilizável.

Exemplo de hook para um contador:

import { useState } from 'react';

const useCounter = (initialValue = 0) => {
  const [count, setCount] = useState(initialValue);

  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);

  return { count, increment, decrement };
};

export default useCounter;

Uso no componente:

import useCounter from './hooks/useCounter';

const Counter = () => {
  const { count, increment, decrement } = useCounter();

  return (
    <div>
      <button onClick={decrement}>-</button>
      <span>{count}</span>
      <button onClick={increment}>+</button>
    </div>
  );
};

5.2. Context API

Use o Context API para compartilhar estado ou lógica entre componentes.

Exemplo:

import React, { createContext, useContext, useState } from 'react';

const ThemeContext = createContext();

const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () =>
    setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

export const useTheme = () => useContext(ThemeContext);

export default ThemeProvider;

6. Teste seus Componentes

Teste seus componentes para garantir que funcionem em diferentes cenários. Use Jest e React Testing Library:

import { render, screen, fireEvent } from '@testing-library/react';
import Button from './Button';

test('Renderiza o botão corretamente', () => {
  render(<Button>Click Me</Button>);
  const buttonElement = screen.getByText(/Click Me/i);
  expect(buttonElement).toBeInTheDocument();
});

test('Dispara evento onClick', () => {
  const handleClick = jest.fn();
  render(<Button onClick={handleClick}>Click Me</Button>);
  fireEvent.click(screen.getByText(/Click Me/i));
  expect(handleClick).toHaveBeenCalledTimes(1);
});

7. Evite Armadilhas Comuns

• Componentes muito complexos: Mantenha-os simples e com responsabilidade única.
• Acoplamento excessivo: Um componente reutilizável não deve depender de outros módulos específicos.
• Prop Drilling: Use Context API ou Redux quando necessário para evitar passar muitas props.

8. Conclusão

Criar componentes reutilizáveis em React é uma habilidade essencial para desenvolvedores frontend. Seguindo as práticas descritas neste guia, você poderá construir sistemas robustos, consistentes e fáceis de manter. Lembre-se: simplicidade e clareza são chaves para o sucesso.

Agora é sua vez! Comece analisando os componentes que você já criou e veja como pode torná-los mais reutilizáveis. Feliz codificação! 🎉