0

Estou aprendendo react e desenvolvendo uma tela onde ao abrir ele vai exibir uma lista de itens obtidos de uma API. Nessa tela também tera um botão para atualizar a lista.

O código até agora é

//Componente
export default props =>{
    const [list, setList] = useState([])
    const [loaded, setLoaded] = useState(false)
    
    //função que baixa a lista da api
    const fetchRequest = useCallback(() => { 
        fetch('url da api')
            .then(response => response.json())
            .then(data => setList(data));
    }, [list]);
    
    //Aqui estou tentando impedir que a lista seja carregada mais de uma vez
    if (!loaded){
        fetchRequest()
        setLoaded(true)
    }

    return (
        <div className="container">
            <button onClick={fetchRequest}>Atualizar</button>
            {list.map((item, i) => <div key={i}>{item.canal}</div> )}
        </div>
    )
}

Observe que a função fetchRequest() é chamada logo que o componente é renderizado e tambem quando clica no botão atualizar, eu inclui essa verificação if (!loaded)... com a intensão de impedir que o componente seja renderizado mais de uma vez sem necessidade. Acontece que ainda assim ele renderiza 2 vezes e consequentemente carrega os dados da API 2 vezes.

Existe alguma forma de impedir que isso aconteça nesse caso?

1
  • Antes de responder a pergunta, queria chamar a atenção para o fato de que você colocou uma dependência desnecessária no useCallback. A variável list não está sendo usada na função, então você não precisa recriar essa função toda vez que list muda de valor. 14/09/2021 às 0:20

1 Resposta 1

1

A maneira mais comum de buscar dados em uma API com React é usando o hook useEffect. Esse hook recebe uma função e um array de dependências.

A função passada como primeiro argumento é executada na primeira renderização do componente e sempre que alguma das dependências muda de valor. Ou seja, quando você não passa nenhuma dependência, nenhuma dependência muda de valor, então a função do useEffect só é executada uma vez.

Dito isso, o seu código final ficaria assim

import { useState, useEffect, useCallback } from 'react';

export default function MyComponent() {
    const [list, setList] = useState([]);
    
    //função que baixa a lista da api
    const fetchRequest = useCallback(() => { 
        fetch('url da api')
            .then(response => response.json())
            .then(data => setList(data));
    }, []);
    
    useEffect(fetchRequest, []);

    return (
        <div className="container">
            <button onClick={fetchRequest}>Atualizar</button>
            {list.map((item, i) => <div key={i}>{item.canal}</div> )}
        </div>
    )
}

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 .