react repeat request multiple time

Question

I am building a React component but when rendering the component, the request done two times even if the first request success

import axios from 'axios';
import React, { useEffect, useState } from 'react';
import { useParams } from 'react-router';
import Post from './Post';

export const SinglePost = () => {

   const { id } = useParams();
   const getData =  async() => {
       await axios.get(`post/${id}`)
       .then((response)=>{
          return response.data
       })
       .catch((err)=>{
          return err
       })
   }
  return <Post post = {getData()} />
}

Is there a common way to fix it? Thanks.

Here my index.tsx

const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement);

root.render(
 <Provider store ={store}>
    <App />
 </Provider>
);

The error happens I think when passing the result to Post component. Even in that component, the request to that URL is never made.

Edit

I am rendering the component inside app.tsx by this code

<Route path="post/:id" element={<SinglePost/>}/>

Edit2

Post object contains:

Object { id: 132, content: "", updated: "2022-10-08T09:56:37.070618Z", image: "http://127.0.0.1:8000/media/images/admin%40socialbook.org/posts/b2e5d26fff1965a4.jpeg", created: "2022-10-08T09:56:37.070618Z", author: {…} }

See: https://stackoverflow.com/questions/72489140/react-18-strict-mode-causing-component-to-render-twice — Kostas Minaidis, Oct 15 '22 at 09:35
Can you supply the code where the SinglePost Component is used? — Kostas Minaidis, Oct 15 '22 at 18:03
Also, you probably don't want to execute getData() inside the Post prop but inside a useEffect. — Kostas Minaidis, Oct 15 '22 at 18:04
I tried to execute it inside useEffect but it wont execute at all due the return post error — bassam malla, Oct 17 '22 at 19:36

score 1 · Accepted Answer · edited Oct 19 '22 at 13:19

1

The main reason why it throws an error, is because the component did not mount to call useEffect, so I think giving initial value to the state that holds post will work, for example:

var initialValue = {
    info:"",
    author:"",
    content:""
}

outside the component then define const [singlePost, setSinglePost] = useState(initialValue)

Inside your component finally when you get a response set that response to setSinglePost

edited Oct 19 '22 at 13:19

node_modules

4,790
6
21
37

answered Oct 19 '22 at 13:12

omar

258
2
6

but the component load empty before load content and image – bassam malla Oct 19 '22 at 17:48
use spinner to deal with it – omar Oct 19 '22 at 17:48

score 0 · Answer 2 · edited Oct 19 '22 at 13:18

0

It may have something to do with React.StrictMode. If you remove this, it should only render once.

I believe that this only happens in development. In production this wouldn't happen, but I may be wrong.

edited Oct 19 '22 at 13:18

node_modules

4,790
6
21
37

answered Oct 15 '22 at 09:33

ctkr

36
3

I added the index.tsx as an Edit, strict mode is removed before that error occure – bassam malla Oct 15 '22 at 10:35
As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Oct 18 '22 at 15:32

score 0 · Answer 3 · edited Oct 19 '22 at 13:18

0

This is due to React Strict mode, and it only happens in development. It's enabled by default for your whole React app. If you wish to remove it, go to your index.js and remove the tags <React.StrictMode> wrapping your app.

edited Oct 19 '22 at 13:18

node_modules

4,790
6
21
37

answered Oct 15 '22 at 09:38

MohamedZh

189
6

I added the index.tsx as an Edit, strict mode is removed before that error occure – bassam malla Oct 15 '22 at 10:33
Are you using a useEffect hook in your code? I see you imported it. If so, then it is due to the useEffect that gets triggered after rendering. I suggest you put your request in a useEffect with empty dependacy array, and without any other useEffects in the page. – MohamedZh Oct 17 '22 at 07:54
I tried to execute it inside useEffect but it wont execute at all due the return post error, and I also tried without useEffect – bassam malla Oct 17 '22 at 19:37

react repeat request multiple time

3 Answers3