Por que é importante dividir o código em componentes?

Dividir o código em componentes aumenta a reutilizabilidade, a manutenção e a testabilidade da aplicação.

Reutilizabilidade

Ao criar componentes independentes, eles podem ser usados em diferentes partes da aplicação ou até em outros projetos. Isto poupa tempo e reduz a probabilidade de erros.

// button.js
const Button = ({ onClick, label }) => {
  return <button onClick={onClick}>{label}</button>;
};

// LoginForm.js - usa Button
import Button from './button';

const LoginForm = () => {
  const handleSubmit = () => {
    // ...
  };

  return (
    <form>
      {/* formulário */}
      <Button onClick={handleSubmit} label="Entrar" />
    </form>
  );
};

// RegisterForm.js - também usa Button
import Button from './button';

const RegisterForm = () => {
  const handleRegister = () => {
    // ...
  };

  return (
    <form>
      {/* formulário */}
      <Button onClick={handleRegister} label="Registar" />
    </form>
  );
};

Manutenção

Dividir em componentes torna o código mais organizado e fácil de ler. Alterações num componente têm menos impacto noutras partes da aplicação. Isto facilita a depuração e a adição de novas funcionalidades.

// Header.js
const Header = () => {
  // lógica e marcação do cabeçalho
};

// Footer.js
const Footer = () => {
  // lógica e marcação do rodapé
};

// App.js - página principal
import Header from './Header';
import Footer from './Footer';

const App = () => {
  return (
    <div>
      <Header />
      {/* conteúdo principal da página */}
      <Footer />
    </div>
  );
};

Alterações apenas em Header.js não afetarão Footer.js ou App.js (se a interface de Header não mudar).

Testabilidade

Cada componente pode ser testado isoladamente, o que facilita a escrita de testes e aumenta a sua fiabilidade.

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

test('lidar com eventos de clique', () => {
  const handleClick = jest.fn();
  const { getByText } = render(<Button onClick={handleClick} label="Botão" />);
  fireEvent.click(getByText('Botão'));
  expect(handleClick).toHaveBeenCalledTimes(1); // Verifica se o manipulador foi chamado
});

Outras vantagens

• Melhor legibilidade do código: blocos de código menores são mais fáceis de entender.
• Desenvolvimento paralelo: diferentes programadores podem trabalhar em diferentes componentes ao mesmo tempo.
• Gestão da complexidade: aplicações complexas são divididas em partes geríveis.

Vantagem	Descrição
Reutilizabilidade	Uso de componentes em diferentes locais.
Manutenção	Mais fácil de fazer alterações e depurar.
Testabilidade	Possibilidade de testar isoladamente.
Legibilidade	O código torna-se mais compreensível.
Gestão	Redução da complexidade da aplicação.

Dividir em componentes é um princípio fundamental dos frameworks e bibliotecas modernas de frontend, como React, Vue e Angular.