React Hooks e Context transformaram a abordagem de gerenciamento de estado e compartilhamento de dados em aplicações React. Com a introdução dos hooks na versão 16.8 em 2019, desenvolvedores passaram a utilizar estado e métodos de ciclo de vida em componentes funcionais, resultando em código mais conciso e legível.

Por outro lado, Context oferece uma maneira simplificada de compartilhar dados entre componentes sem a necessidade de prop drilling. Serão exploradas as sinergias entre React hooks e Context, demonstrando o potencial combinado para simplificar o gerenciamento de estados complexos e facilitar o fluxo de dados em toda a árvore de componentes.

Nos próximos capítulos, serão detalhados os seguintes tópicos:

Hook de estado

useState permite que um componente retenha e recupere informações (por exemplo, entrada do usuário). Por exemplo, um componente de formulário pode utilizar o estado para preservar o valor inserido, enquanto um componente de galeria de imagens pode utilizar o estado para controlar o índice da imagem selecionada.

function Form() {
  const [value, setValue] = useState('');
  // ...
}

Hook de referência

useRef fornece um meio para que um componente retenha informações que não afetam a renderização, como um nó do DOM ou um ID de timeout. Diferente do estado, modificar uma referência não aciona uma nova renderização do componente. Referências funcionam como uma "saída de emergência" do paradigma típico do React e são úteis ao interagir com sistemas externos ao React, como APIs nativas do navegador.

function Form() {
  const inputRef = useRef(null);
  // ...
}

Hook de efeito

useEffect permite que um componente estabeleça conexões e sincronize com sistemas externos, incluindo interação com redes, manipulação do DOM do navegador, controle de animações, integração de widgets desenvolvidos com diferentes bibliotecas de UI e incorporação de código não React de forma transparente.

function Animation({ animationId }) {
  useEffect(() => {
    const animation = createAnimation(animationId);
    animation.start();
    
    // Cleaning up the animation when the component unmounts
    return () => animation.stop();
  }, [animationId]);
  // ...
}

Hook de memoização

useMemo melhora o desempenho da renderização ao minimizar cálculos desnecessários. Por exemplo, é possível instruir o React a reutilizar um cálculo em cache ou evitar uma nova renderização se os dados permanecerem inalterados desde a última renderização.

function NewspaperList({ data, filter }) {
  const filteredData = useMemo(
    () => performFiltering(data, filter),
    [data, filter]
  );
  // ...
}

Hook de contexto

useContext permite que um componente acesse informações de ancestrais distantes sem a necessidade de repassar props. Isso possibilita que o componente de nível superior no aplicativo transmita o tema atual da interface para todos os componentes descendentes, independentemente da profundidade na árvore de componentes.

function Section() {
  const theme = useContext(ThemeContext);
  // ...
}