i am trying to get data from online Api - https://api.randomuser.me/ it get rendom data every time.
import { useState } from 'react';
import './App.css';
function App() {
var [user, setUser] = useState()
fetch('https://api.randomuser.me/')
.then(res => {return res.json()})
.then(data => setUser(data.results[0].gender))
// if i write: .then(data => console.log(data.results[0].gender)) it console log 2 times, i want to fetch data just one time no 2 times
return (
<div className="App">
{user}
</div>
);
}
export default App;
display {user} is changing every second, but i want to fetch just one time not every second
You need to use useEffect, using an empty square brackets as a second parameter to fetch only once:
import { useState, useEffect } from 'react';
import './App.css';
function App() {
var [user, setUser] = useState()
useEffect(()=>{
fetch('https://api.randomuser.me/')
.then(res => {return res.json()})
.then(data => setUser(data.results[0].gender))
},[])
return (
<div className="App">
{user}
</div>
);
}
export default App;