Fechando o ciclo com o back-end

O uso nº 1 do useEffect: buscar dados quando o componente aparece, guardar no estado e deixar o React desenhar.

const [produtos, setProdutos] = useState([]);

useEffect(() => {
  fetch("/produtos")
    .then((r) => r.json())
    .then((dados) => setProdutos(dados));
}, []);

O fluxo: estado começa vazio [] → o efeito busca da API → setProdutos guarda os dados → o React re-renderiza com a lista → o .map desenha os produtos.

🎯 Repare como tudo se conecta: fetch (JS) → sua API (curso de back-end) → useState/useEffect → .map. Este é o coração de qualquer app real: buscar dados e mostrá-los.