fetch data multiple times in one fetch

Question

I have data in mongo. I am getting my data, but when see my console.log(). it show me data multiple times. Can you please tell me why is it happening and how to fix it?

const [teams, setTeams] = useState([])

console.log(teams)

const fetchData = async () => {

  try {
       const { data } = await axios('/api/getTeam/data')
       setTeams(data)

    } catch (error) {
       console.log(error)
    }
  }
 

useEffect(() => {
 fetchData()
}, [])

if I refresh page, I am getting multiple fetch. This is my output in console.log() Can you please tell me why is it happening and how to fix it? Thank you

[]
[]
[]
[]
(14) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
(14) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
(14) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
(14) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]

score 1 · Accepted Answer · answered May 02 '23 at 19:05

1

If you are running React in StrictMode:

https://react.dev/reference/react/StrictMode

each fetch / axios equivalent of fetch that you do in a useEffect will be done twice.

Either turn off StrictMode or deal with it - for example the library react-easier (a long with many others) will debounce this and only fetch once:

https://www.npmjs.com/package/react-easier

Disclaimer: I am the author of react-easier.

answered May 02 '23 at 19:05

Thomas Frank

1,404
4
10

Thank you, I rurned off strictMode in next.config.js and right now I am getting twice [] [] and one data(14)[...] . Is it ok if I am getting twice empty array first? Thank you. – erza May 02 '23 at 19:18
Still seems a little strange, but check the timing between fetches and console.logs... And check the Network panel... – Thomas Frank May 02 '23 at 19:26

score 0 · Answer 2 · answered May 02 '23 at 19:04

0

That you have multiple logs does not mean you have multiple fetch. This is how react works. It re-renders. Components are just functions and React calls them again and again when you update some state. If you use Strict Mode, react calls everything twice.

answered May 02 '23 at 19:04

Oktay Yuzcan

2,097
1
6
15

That you have multiple logs when a fetch completes really does mean you have multiple fetches though (check your Network panel in Dev tools). Thank you StrictMode! – Thomas Frank May 02 '23 at 19:07
He does not know if there are multiple fetch, he points the logs. We don't know if there are not more states to cause renders. He prints them outside of the effect, so no information why it logs a lot of time, StrictMode or another state – Oktay Yuzcan May 02 '23 at 19:16
If you at the end of fetch (if written as await after that line, have a console.log and that console.log is outputted twice - then you are running that fetch twice - but this is also easy to check in the Network panel of your Dev tools...) – Thomas Frank May 02 '23 at 19:28
1

But he does not have console log at the end of fetch ? His log is inside the component, not inside the effect. This is why no information here if the logs are caused by multiple fetch – Oktay Yuzcan May 02 '23 at 19:29
Ah, you are quite correct @Oktay.! ezra can you try that - log direcly after the fetch! – Thomas Frank May 02 '23 at 19:32

fetch data multiple times in one fetch

2 Answers2