Spring e React - 2026

21 - Hook useEffect

Nesta etapa, vamos começar a utilizar o useEffect, um dos principais hooks do React, responsável por executar efeitos colaterais no componente, como chamadas para APIs.

Inicialmente, faremos um teste simples para buscar os dados da nossa API e exibi-los no console do navegador.

// Hook useEffect
useEffect(() => {
    fetch("http://localhost:8080/selecionar")
    .then(resposta => resposta.json())
    .then(dados => console.table(dados));
}, []);

Explicando o código:

• useEffect – executa uma função sempre que o componente é carregado.
• [] – o array vazio indica que o efeito será executado apenas uma vez, ao carregar o componente.
• fetch – realiza uma requisição HTTP para a nossa API.
• resposta.json() – converte a resposta para o formato JSON.
• console.table(dados) – exibe os dados no console de forma organizada.

Ao executar o projeto e abrir o console do navegador, você verá os dados cadastrados sendo exibidos em formato de tabela.

No vídeo abaixo, mostro como utilizar o useEffect na prática para consumir a API e preparar os dados para exibição na nossa aplicação.