O que são componentes React?

📽️

Se você quer entender ainda mais sobre o conceito de componentes e propriedades no React, confira este vídeo incrível:

Por que os componentes são importantes no React?

Principais tipos de componentes React

1. Componentes funcionais

2. Componentes de classe

3. Componentes de ordem superior (higher-order components, HOCs)

4. Componentes render props

5. Componentes memoizados

6. Componentes assíncronos (server components)

1. Componentes funcionais

Como criar um componente funcional

function OlaMundo() {
  return <h1>Olá, Mundo!</h1>;
}

export default OlaMundo;

Hooks nos componentes funcionais

import React, { useState } from 'react';

function Contador() {
  const [contador, setContador] = useState(0);

  return (
    <div>
      <p>Você clicou {contador} vezes</p>
      <button onClick={() => setContador(contador + 1)}>Clique aqui</button>
    </div>
  );
}

export default Contador;

Vantagens dos componentes funcionais

• Sintaxe simples: a escrita de um componente funcional é mais direta e enxuta.

• Reutilização: eles permitem a reutilização de lógica com os hooks, especialmente o useEffect e useReducer.

• Performance: geralmente são mais leves e rápidos, principalmente para renderizações simples.

Quando usar componentes funcionais?

2. Componentes de classe

Estrutura básica de um componente de classe

import React, { Component } from 'react';

class OlaMundo extends Component {
  render() {
    return <h1>Olá, Mundo!</h1>;
  }
}

export default OlaMundo;

Ciclo de vida dos componentes de classe

import React, { Component } from 'react';

class Contador extends Component {
  constructor(props) {
    super(props);
    this.state = { contador: 0 };
  }

  componentDidMount() {
    console.log('Componente montado');
  }

  componentDidUpdate() {
    console.log('Componente atualizado');
  }

  render() {
    return (
      <div>
        <p>Você clicou {this.state.contador} vezes</p>
        <button onClick={() => this.setState({ contador: this.state.contador + 1 })}>
          Clique aqui
        </button>
      </div>
    );
  }
}

export default Contador;

Quando usar componentes de classe?

3. Componentes de ordem superior (higher-order components)

import React from 'react';

const withExtraInfo = (Component) => (props) => {
  return (
    <div>
      <Component {...props} />
      <p>Informação extra</p>
    </div>
  );
};

const MeuComponente = () => <h1>Componente Original</h1>;
export default withExtraInfo(MeuComponente);

Evolução com hooks personalizados

• Menos aninhamento: elimina a necessidade de envolver componentes dentro de outros.

• Maior legibilidade: a lógica é extraída para funções separadas, tornando o componente principal mais limpo.

import React, { useState, useEffect } from 'react';

// Hook personalizado que adiciona informação extra
function useExtraInfo() {
  const [info, setInfo] = useState('');

  useEffect(() => {
    setInfo('Informação extra');
  }, []);

  return info;
}

const MeuComponente = () => {
  const info = useExtraInfo();

  return (
    <div>
      <h1>Componente Original</h1>
      <p>{info}</p>
    </div>
  );
};

export default MeuComponente;

4. Componentes render props

import React from 'react';

class ComponenteRenderProp extends React.Component {
  render() {
    return <div>{this.props.render("Olá com render props!")}</div>;
  }
}

export default () => (
  <ComponenteRenderProp render={(mensagem) => <h1>{mensagem}</h1>} />
);

5. Componentes memoizados

import React from 'react';

const ComponenteMemoizado = React.memo(({ valor }) => {
  console.log("Renderizado apenas se 'valor' mudar");
  return <p>{valor}</p>;
});

export default ComponenteMemoizado;

Quando usar componentes memoizados?

• Realizam operações pesadas: componentes que fazem cálculos complexos ou renderizam listas extensas.

• São puros: componentes que retornam o mesmo resultado dadas as mesmas props e não dependem de estado ou efeitos colaterais internos.

• Sobrecarga desnecessária: em componentes leves, a comparação das props pode consumir mais recursos do que a própria renderização.

• Complexidade adicional: pode tornar o código mais difícil de ler e manter se usado indiscriminadamente.

Vantagens e considerações

• Vantagens:
• Otimiza a performance evitando renderizações desnecessárias.
• Fácil de implementar em componentes funcionais.

• Considerações:
• Use após identificar problemas reais de performance.
• Avalie se a complexidade adicionada justifica os benefícios.

6. Componentes assíncronos (server components)

const ReactServerComponent = async () => {
  const response = await fetch('https://api.exemplo.com/data');
  const dados = await response.json();
  return (
    <ul>
      {dados.map((item) => (
        <li key={item.id}>{item.nome}</li>
      ))}
    </ul>
  );
};

export default ReactServerComponent;

Comparação: principais tipos de componentes React

Conclusão

Quer avançar mais? Conheça a formação em React da Rocketseat!

• Intermediário - Pensada para quem já tem noções básicas de desenvolvimento.

• +64 horas de conteúdo - Aulas gravadas para você assistir quando e onde quiser.

• Certificado reconhecido pelo mercado - Valide suas habilidades com um certificado final.

• +15 projetos profissionais - Inclua projetos reais no seu portfólio para se destacar.

• Acompanhamento personalizado - Tutoria e suporte para suas dúvidas ao longo da jornada.

• +437 aulas e 113 quizzes e desafios - Pratique e aplique o que aprendeu.

• JavaScript

• ReactJS

• Node.js

• Next.js

• TypeScript

• Vite

• TailwindCSS