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?
useCallback
. A variávellist
não está sendo usada na função, então você não precisa recriar essa função toda vez quelist
muda de valor.