[React] Como impedir que um componente react seja renderizado mais de uma vez ao usar state

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));
},

• );
  
  //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?
  
  Continue reading...