1

Tenho meu componente header, onde busco as informações do usuario atráves da api, o problema está com no fato dessa busca ficar presa em um loop que fica buscando o usuário sem parar.

code::

 import React, { useState, useMemo } from "react";
import axios from "axios";
import Logout from '../Logout/';
import "./style.css";

const user_id = localStorage.getItem('user_id');
const avatar = localStorage.getItem('avatar');

export default function Header(){

    const [user, setUSer] = useState(null);

    useMemo(async () => {
        const data = await axios.get(`http://localhost:3001/api/users/${user_id}`);
        setUSer(data.data)
        console.log(data);
    })




    console.log(user)


    if(user !== null){
        return (
            <header className="async-header">
                <div className="user-content">
                    <span className="user-name">
                    {user.username}
                    <span>{user.email}</span>
                    <a href="/#" className="btn-logout" onClick={Logout}>Deslogar</a>
                    </span>
                <div className="user-image" style={user.avatar ? {backgroundImage: `url(${user.avatar})`} : null}></div>

                </div>


            </header>
        )
    }else{
        return <div />
    }
}

1 Resposta 1

2

O método useMemo recebe dois parâmetros, o primeiro (que você mandou) é uma função em que o retorno será o valor que o useMemo irá armazenar e retornar para a sua variável. O segundo parâmetro é um array de dependências onde o valor armazenado será recalculado apenas se uma dessas dependências tiver sido modificada.

Para corrigir o problema que você tem, adicionar o segundo parâmetro no useMemo já deve ser o suficiente.

const user = useMemo(async () => { ... }, [ user_id ])

Apenas um detalhe sobre useMemo e useEffect + useState.

Ao utilizar useMemo o react primeiro realiza a operação dentro do useMemo para só depois renderizar o seu componente. Quando você utiliza o useState + useEffect o react primeiro renderiza seu componete com o valor default, depois executa o useEffect que atualiza seu estado que gera um trigger para renderizar seu componente novamente (dessa vez com o valor atualizado pelo useEffect).

No seu caso, você está enviando uma requisição para um servidor localhost então o tempo de resposta é quase instantâneo porém, se essa requisição demorar por qualquer motivo (latência na rede ou operação muito demorada) a sua página ficará em branco para o usuário.

3
  • 1
    Obrigado pela resposta e pela explicação. Eu tinha testado um exemplo, igual a esse e não tinha funcionando, algumas horas depois descobri que o react por algum motivo não tinha atualizado o código e estava renderizando o site usando um exemplo um pouco pior do que eu coloquei. Mais depois de restartar o servidor voltou a funcionar. 31/10/2019 às 4:01
  • A sua explicação me ajudou a criar um code mais limpo. 31/10/2019 às 4:01
  • 1
    Sem problemas, feliz em ter ajudado 31/10/2019 às 11:44

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .