1. Hooks: Conetcando Funcionalidades Externas

Hooks representam uma proposta fundamental para componentes React funcionais. Eles permitem que componentes, preferencialmente escritos como funções puras, "conectem" funcionalidades externas do React, como gerenciamento de estado e métodos de ciclo de vida. Os hooks são funções cujos nomes começam com o prefixo use.

Motivação: Antes dos hooks, reutilizar lógica de estado entre componentes era complexo, frequentemente levando a padrões como componentes de ordem superior (HOCs) ou Render Props. Essas abordagens criavam camadas de componentes "wrapper", dificultando a manutenção. Hooks permitem extrair e reutilizar lógica de estado diretamente.

2. Funções Puras e Efeitos Colaterais

Uma função pura produz sempre o mesmo resultado para os mesmos argumentos de entrada e não altera nenhum estado externo nem observa alterações externas. Elas são previsíveis e fáceis de testar.

Efeitos colaterais são interações observáveis de uma função com o ambiente externo, como requisições de rede, mutações de dados ou manipulação do DOM.

3. Otimização com useCallback e useMemo

Em componentes funcionais, funções definidas internamente são recriadas a cada renderização. Quando passadas como props, isso pode provocar renderizações desnecessárias em componentes filhos.

useCallback retorna uma versão memorizada da função, que só é recriada se suas dependências mudarem. Isso evita re-renderizações de filhos que dependem da referência estável da função.

useMemo é semelhante, mas memoriza o valor de retorno de uma função computacionalmente intensa. Se as dependências não mudam, a computação é evitada e o valor memorizado é retornado.

import React, { useState, useCallback, memo } from 'react';

const BotaoIncremento = memo(({ aoClicar, rotulo }) => {
  console.log(`Renderizando Botao ${rotulo}`);
  return <button onClick={aoClicar}>Incrementar {rotulo}</button>;
});

export default function PainelDeDesempenho() {
  const [contador, definirContador] = useState(0);
  const [visivel, definirVisivel] = useState(true);

  const incrementarRapido = useCallback(() => {
    console.log('Executando incremento rápido');
    definirContador(prev => prev + 1);
  }, []);

  return (
    <div>
      <p>Contagem: {contador}</p>
      <BotaoIncremento aoClicar={incrementarRapido} rotulo="Rápido" />
      <button onClick={() => definirVisivel(!visivel)}>
        Alternar visibilidade
      </button>
      {visivel && <p>Conteúdo visível</p>}
    </div>
  );
}

4. Componentes de Ordem Superior (HOCs) vs. Funções de Ordem Superior

Uma função de ordem superior é uma função que recebe uma ou mais funções como argumento ou retorna uma função.

Um Componente de Ordem Superior (HOC) é um padrão onde uma função recebe um componente e retorna um novo componente aprimorado. HOCs permitem reutilizar lógica, injetar props ou modificar o comportamento de componentes sem alterar sua implementação original.

5. Componentes Funcionais vs. de Classe

• Sintaxe: Componentes funcionais são funções JavaScript que recebem props e retornam JSX. Componentes de classe estendem React.Component e usam um método render.
• Estado e Ciclo de Vida: Historicamente, apenas componentes de classe possuíam estado (this.state) e métodos de ciclo de vida. Com Hooks, componentes funcionais agora podem gerenciar estado e efeitos colaterais.
• Desempenho: Componentes funcionais são geralmente mais leves e podem se beneficiar de otimizações mais eficazes pelo React.

6. Gerenciamento de Estado: state vs. props

Props são dados passados de um componente pai para um filho. Eles são imutáveis dentro do componente filho.

State é o estado interno e mutável de um componente. Ele deve ser atualizado apenas através da função setter do hook useState ou, em componentes de classe, via this.setState. Atualizar o estado aciona uma nova renderização do componente.

7. Lifecycle Hooks em Componentes de Classe

Em componentes de classe, métodos como componentDidMount, shouldComponentUpdate e componentDidUpdate permitem executar código em fases específicas da existência do componente. componentDidMount é o local ideal para buscar dados, pois é executado após a montagem inicial do componente.

8. Algoritmo de Diferenciação (Diff) e Otimização de Desempenho

O React utiliza uma representação virtual do DOM (VDOM) para minimizar operações de manipulação do DOM real. O algoritmo de diferenciação compara a árvore VDOM anterior com a nova e calcula o conjunto mínimo de operações necessárias para atualizar o DOM real.

Para manter a complexidade viável, o algoritmo de diff do React faz duas suposições:

1. Dois elementos de tipos diferentes produzem árvores de componentes diferentes.
2. O desenvolvedor pode indicar quais elementos filhos são estáveis entre renderizações usando uma propriedade key.

O hook shouldComponentUpdate e o React.memo pemritem otimizações adicionais, evitando renderizações desnecessárias.

9. Redux: Gerenciamento de Estado Previsível

Redux é uma biblioteca para gerenciar o estado global de uma aplicação. Seus princípios são:

1. Fonte Única da Verdade: O estado da aplicação é armazenado em uma única store.
2. O Estado é Somente Leitura: A única forma de alterar o estado é despachando uma action.
3. Mudanças Feitas com Funções Puras: Reducers são funções puras que especificam como o estado é transformado em resposta a uma action.

import { createStore } from 'redux';

// Reducer: (estadoAnterior, acao) => novoEstado
function contadorReducer(estado = 0, acao) {
  switch (acao.tipo) {
    case 'INCREMENTAR':
      return estado + 1;
    case 'DECREMENTAR':
      return estado - 1;
    default:
      return estado;
  }
}

const store = createStore(contadorReducer);

// Inscrever-se para mudanças
const cancelarInscricao = store.subscribe(() =>
  console.log('Estado atual:', store.getState())
);

// Despachar ações
store.dispatch({ tipo: 'INCREMENTAR' }); // 1
store.dispatch({ tipo: 'INCREMENTAR' }); // 2
store.dispatch({ tipo: 'DECREMENTAR' }); // 1

cancelarInscricao();

10. Comparação Conceitual com Vue

React e Vue compartilham conceitos como DOM virtual, componentização e foco na camada de visualização.

React adota uma abordagem mais funcional e explícita (como JSX e hooks), onde o estado é imutável e as atualizações são controladas por setState ou setters de hooks. É altamente flexível, frequentemente usando bibliotecas auxiliares para rotas e estado global.

Vue oferece uma API declarativa e um sistema de reatividade baseado em Proxy, que rastreia dependências automaticamente. Possui um ecossistema mais integrado com soluções oficiais para rotas e gerenciamento de estado.