Componente Funcional
Os componentes funcionais são uma parte fundamental do ecossistema React, oferecendo uma abordagem concisa e elegante para a construção de interfaces de usuário. Esses componentes são essencialmente funções JavaScript que retornam elementos React, e eles desempenham um papel crucial no desenvolvimento de aplicações modernas.
Características dos componentes funcionais
Simplicidade
Componentes funcionais são mais concisos e diretos em comparação com componentes baseados em classes. A sintaxe de uma função é geralmente mais enxuta, facilitando a leitura e a manutenção do código.
Ausência de estado interno (até o React 16.8)
Antes da introdução dos Hooks no React 16.8, os componentes funcionais eram limitados a componentes stateless. Com a chegada dos Hooks, agora é possível ter estado e outras funcionalidades em componentes funcionais.
Menos boilerplate
A necessidade de escrever menos código boilerplate é uma vantagem significativa dos componentes funcionais. Isso resulta em um desenvolvimento mais eficiente e código mais limpo.
Sintaxe básica
// Exemplo de Componente Funcional
const Saudacao = (props) => {
return <div>{`Olá, ${props.nome}!`}</div>;
};Neste exemplo, Saudacao é um componente funcional que aceita um objeto props e retorna um elemento React. Esse componente pode ser utilizado em outros lugares do código como qualquer outro componente React.
React Hooks
Com a introdução dos Hooks, componentes funcionais ganharam a capacidade de gerenciar estado interno e realizar efeitos colaterais, trazendo funcionalidades anteriormente associadas apenas a componentes baseados em classes.
import React, { useState, useEffect } from 'react';
const Contador = () => {
const [contador, setContador] = useState(0);
useEffect(() => {
document.title = `Contagem: ${contador}`;
}, [contador]);
return (
<div>
<p>Contagem: {contador}</p>
<button onClick={() => setContador(contador + 1)}>Incrementar</button>
</div>
);
};No exemplo acima, useState é um Hook que permite adicionar estado a um componente funcional, e useEffect é utilizado para realizar efeitos colaterais após a renderização do componente.