Componentes funcionais

Os componentes funcionais são uma forma moderna e concisa de criar elementos de UI reutilizáveis ​​em aplicações React. São funções JavaScript que retornam JSX para definir a UI de um componente.

Principais características

• Sintaxe: Os componentes de função são definidos utilizando funções JavaScript simples:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

• Props: Recebem props como argumento, permitindo a passagem de dados dos componentes pais.

• Gestão de estado: com a introdução de hooks, os componentes funcionais podem gerir o estado utilizando o hook useState:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

Vantagens

• Simplicidade: os componentes de função são mais fáceis de ler, escrever e testar em comparação com os componentes de classe.
• Desempenho: podem ter um melhor desempenho, pois evitam a sobrecarga da instanciação da classe.
• Hooks: os componentes de função podem utilizar hooks React, proporcionando uma forma mais flexível de utilizar as funcionalidades do React.

Gestão do estado

Os componentes funcionais em React podem gerir o estado utilizando o hook useState, que permite aos programadores adicionar e atualizar o estado sem escrever componentes de classe.

Hook useState

O hook useState é o método principal para gerir o estado nos componentes da função:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

Pontos principais sobre o useState:

• Devolve um array com dois elementos: o valor do estado atual e uma função para o atualizar.
• O estado inicial é passado como argumento para useState.
• As atualizações de estado acionam novas renderizações de componentes.

Multiplas variáveis de estado

Os componentes de função podem ter diversas variáveis ​​de estado:

function Message() {
  const [message, setMessage] = useState('');
  const [list, setList] = useState([]);
  // ...
}

Atualização das variáveis de estado

Para atualizar o estado, utilizamos a função setter devolvida por useState:

setCount(count + 1);

Estados complexos

Para objetos ou arrays, utilize o operador spread para atualizar o estado:

const [items, setItems] = useState([]);

const addItem = () => {
  setItems([...items, { id: items.length, value: Math.random() * 10 }]);
};

Ciclo de vida

Os componentes funcionais em React não possuem métodos de ciclo de vida como os componentes de classe. Em vez disso, utilizam hooks para gerir os efeitos colaterais e os estados durante todo o ciclo de vida do componente. O principal hook para lidar com a lógica relacionada com o ciclo de vida é o useEffect.

Hook useEffect

O hook useEffect cobre várias fases do ciclo de vida:

• Montagem (Mounting): O efeito é executado após a renderização inicial.
• Atualização (Updating): O efeito é executado após cada renderização se a matriz de dependências for alterada.
• Desmontagem (Unmounting): A função de limpeza é executada quando o componente está prestes a ser desmontado.

O hook useEffect aceita dois parâmetros, sendo o 2º opcional:

useEffect(function, [dependency])

No entanto, podemos querer que o effect seja executado somente uma vez, quando um determinado valor se altera.
Para isso, passamos esse valor num array no 2º parâmetro:

useEffect(() => { 
/* Executa quando value se altera */ 
}, [value]); 

Se quisermos que o effect execute somente na 1ª renderização, passamos um array vazio no 2º parâmetro:

useEffect(() => { 
/* Executa somente na primeira renderização */ 
}, []); 

O hook useEffect combina os métodos componentDidMount(), componentDidUpdate() e componentWillUnmount() do ciclo de vida dos componentes de classe.

Equivalente ao método componentDidMount()

useEffect(() => { 
/* ComponentDidMount code */ 
}, []); 

Basta definir como 2º parâmetro um array de dependências vazio para que o código seja executado uma única vez quando o componente é renderizado.

Equivalente ao método componentDidUpdate()

useEffect(() => { 
/* componentDidUpdate code */ 
}, [var1, var2]); 

Basta alterar uma das variáveis dependentes (var ou var 2) para que o código do hook seja executado.

Equivalente ao método componentWillUnmount()

useEffect(() => { 
   return () => { 
      /* componentWillUnmount code */ 
   } 
}, []); 

Basta retornar uma função de dentro do useEffect. Se quisermos que essa função seja chamada uma única vez quando o componente é desmontado, passamos um array vazio no parâmetro das dependências.