-1

Estou com um problema nas minhas aplicações. Eu uso bastante o useState(), porém venho observando que isso está gerando loops infinitos na minha aplicação. Segue um exemplo:

if(show){
   AsyncStorage.getItem('PEDIDO').then(value => {
      console.warn(value)
   });
}

Esse código está em um componente funcional, onde exerce a função de um modal. Por exemplo, o usuário clica em um botão e esse componente entra na tela, a propriedade show representa quando o componente está na tela. O resultado é um loop infinito mostrando o parâmetro value, se eu usar o seguinte código:

if(show){
   AsyncStorage.getItem('PEDIDO').then(value => {
      setPedido(JSON.parse(value));
   });
}

Como posso resolver esse problema do loop infinito?

2
  • Este acesso precisa estar em um useEffect(), se ficar no corpo da função (componente), vai executar em cada render (e causará um novo render por causa do setPedido) 8/10/2020 às 18:12
  • O uso do useEffect foi uma solução muito boa, muito obrigado!!
    – lima23
    8/10/2020 às 20:01

3 Respostas 3

0

Seu acesso ao AsyncStorage está num loop infinito porque você está realizando essa acesso no corpo do seu componente funcional, ou seja, a cada renderização você está obtendo o dado do AsyncStorage, atualizando o state e realizando um novo acesso (loop).

Realizei um exemplo abaixo da chamada de uma função assíncrona (com setTimeOut) sendo executada no corpo da função se show === true:

function Componente() {
  const [date, setDate] = React.useState('');
  const [show, setShow] = React.useState(false);
  
  React.useEffect(() => {
    setShow(true);
  }, []);

  function getDateAsync() {
    setTimeout(function() {
      console.log('Leitura assíncrona realizada');
      const now = (new Date()).toString();
      setDate(now);
    }, 1000);
  }

  if (show) {
    getDateAsync();
  }

  console.log("[RENDER] show:", show);
  return date ? <p>Data obtida: {date}</p> : <p>Carregando...</p>;
}

ReactDOM.render( <Componente /> , document.querySelector("#app"));
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

<div id="app"></div>

Pare resolver isso, a solução ideal é fazer uso do Hook useEffect:

O que o useEffect faz? Usando esse Hook, você diz ao React que o componente precisa fazer algo apenas depois da renderização.

Então faremos um useEffect que será chamado sempre que mudar o estado de show, mas queremos executar o getDateAsync() apenas se show for true, então criamos uma condição também:

function Componente() {
  const [date, setDate] = React.useState('');
  const [show, setShow] = React.useState(false);
  
  React.useEffect(() => {
    setShow(true);
  }, []);

  React.useEffect(() => {
    // Criando uma função desta maneira, você pode inclusive fazer uso de
    // async/await para obter o resultado do AsyncStorage.
    function getDateAsync() {
      setTimeout(function() {
        console.log('Leitura assíncrona realizada');
        const now = (new Date()).toString();
        setDate(now);
      }, 1000);
    }

    if (show) {
      getDateAsync();
    }
  }, [show]);

  console.log("[RENDER] show:", show);
  return date ? <p>Data obtida: {date}</p> : <p>Carregando...</p>;
}

ReactDOM.render( <Componente /> , document.querySelector("#app"));
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

<div id="app"></div>

Repare que quase não houve mudanças no código, mas dessa maneira fazemos um bom uso dos Hooks e o código executa o comportamento esperado pelo usuário.

0

Olá, tudo bem?

Uma sugestão é, pelo trecho do código não consigo identificar ao certo o que pode está causando o "erro", recomendo que retire o .then e coloque o um async e await na chamada do AsyncStorage

Ficaria desta forma:

  const nomeDoMetodo = async () => {
    if(show){
          let pedido = await AsyncStorage.getItem('PEDIDO');
          setPedido(JSON.parse(pedido));
    }
}
1
  • Essa método continua gerando o loop... mas obrigado por responder!
    – lima23
    8/10/2020 às 20:01
0

Você não deve ficar acessando o AsyncStorage o tempo todo.

const [fetchStorage, setFetchStorage] = useState(true);

if(show){
   if (fetchStorage) {
       AsyncStorage.getItem('PEDIDO').then(value => {
          setPedido(JSON.parse(value));
       }); 
       setFetchStorage(false)
   }
   //restante do código referente ao modal
}

Desta forma, você só acessará o storage uma vez, buscando o item e salvando no state.

Espero que ajude!

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 .