Estou aprendendo a usar o UseEffect e me deparei com um looping infinito na minha requisição(fetch). Pelo o que entendi, o meu useEffect apenas era para ser chamado quando a variável "user" fosse atualizada. E ela só é atualizada quando eu clico no meu botão "Pesquisar", por isso não entendi o porque do looping. Alias o Looping só acontece no carregamento da página.
import { useState, useEffect } from 'react'
import '../styles/components/content.sass'
const Content = () => {
const [getUser, setGetUser] = useState('')
const [user, setUser] = useState('')
const getInputUser = () => {
setUser(getUser)
}
useEffect(() => {
fetch(`https://api.github.com/users/PinheiroMatheus`)
.then((res) => res.json())
.then((json) => setUser(json))
console.log(user)
}, [user])
return (
<div className='content'>
<div className="main-content">
<div className="title">
Consulte um perfil do Github!
</div>
<div className="result">
<img src={user.avatar_url} alt="Foto perfil" />
<span>Nome: {user.name}</span>
<span>Localização: {user.location}</span>
</div>
<div className="info-name">
<span>Digite o nome de usuário</span>
<input
type="text"
onChange={(e) => setGetUser(e.target.value)}
placeholder='PinheiroMatheus' />
</div>
<div className="action-buttons">
<button className='search' onClick={getInputUser} >Pesquisar</button>
<button className='clean'>Limpar</button>
</div>
</div>
</div>
)
}
export default Content