useEffect is calling API multiple time under component without any dependency

Question

I am beginners in React.Js

I don't know why useEffect is calling an API multiple time without any Dependency

If There any other Way to do it Please Suggest Me

Pages File : /pages/dashboard/speaking/[slug].js

} else if(slug == "repeat-sentence") {
    if (userData.role == "Admin") {
      return (<> <AdminRepeatSentence /> </>);           
    } else if(userData.role == "Teacher") {
      return (<> <TeacherRepeatSentece /> </>);
    } else if(userData.role == "Student") {
      return (<> <StudentRepeatSentece /> </>);            
    }

Component File : /components/dashboard/speaking/repeat-sentence.js

export function StudentRepeatSentece(params) {
    const [para, setPara] = useState();

    useEffect(() => {
         const handlePara = async () => {
              console.log(">>>>>>>>>>>>>>>fetching Have Been Start");
              const res = await fetch("/api/speaking/read-aloud");
              console.log(">>>>>> Fetch API <<<<<<<<<<");
              const data = await res.json();
              console.log(data);
              setData(data.para);
              console.log(">>>>>>>>> Convert Json <<<<<<<<");
         };

      handlePara();
   }, []);

   return (<> <SecondComponent myPara={para}/> </> );
}

Children Component

function SecondComponent({myPara}) {
        // Some Code Will Be Here
        useEffect(()=> {
                speak(myPara);
        }, [myPara]);

      retunr (<>someCode 
              {myPara} 
              Some Code
      </>);
}

Check if there is anything on the parent component (or its ancestors, if any) that is triggering re-renders. — Terry, Dec 25 '22 at 18:02
See [Synchronizing with `useEffect`](https://beta.reactjs.org/learn/synchronizing-with-effects#fetching-data) — Shivam Jha, Dec 25 '22 at 21:14

score -1 · Answer 1 · answered Dec 25 '22 at 18:01

-1

If you are under <React.StrictMode>, it will rerender one more time the app.

May be it is.

answered Dec 25 '22 at 18:01

Andrew Grini

62
7

so how i can fix this under react strict mood – shivam dwivedi Dec 25 '22 at 18:04
remove it man, if you don't want this behavior. In prod, it will render normally, strict mode behaves only in dev like that. But first of all, tell me if removing it solves the problem, may be it is something different – Andrew Grini Dec 25 '22 at 18:06
1

You shouldn't remove it, it's an intended behaviour that helps finding bugs – Konrad Dec 25 '22 at 18:08
ohk i got it, thank you i wish it will not become an issue in production version – shivam dwivedi Dec 25 '22 at 18:08
https://beta.reactjs.org/learn/synchronizing-with-effects#how-to-handle-the-effect-firing-twice-in-development – Konrad Dec 25 '22 at 18:09
again not working for me for me – shivam dwivedi Dec 26 '22 at 07:14

score -1 · Answer 2 · edited Jan 01 '23 at 00:52

I think the problem is because of the setData(data.para) function being called on 10th line of StudentRepeatSentece component. The useEffect will surely run when the component is loaded but the setData() function uses useState hook, which makes sure that the component is re-rendered when the data stored inside para variable is changed, so it goes inside infinite loop of re-rendering the same component again and again. It is always a good practice to keep useEffect() clean by not using any other hooks like useState() inside useEffect(). However if required the workaround is:

export function StudentRepeatSentece(params) {
    const [para, setPara] = useState();
    const [assignValueToPara,setAssignValueToPara] = useState(true);

    useEffect(() => {
         const handlePara = async () => {
              console.log(">>>>>>>>>>>>>>>fetching Have Been Start");
              const res = await fetch("/api/speaking/read-aloud");
              console.log(">>>>>> Fetch API <<<<<<<<<<");
              const data = await res.json();
              console.log(data);
              setData(data.para);
              setIsValueAssignedToPara(false);
              console.log(">>>>>>>>> Convert Json <<<<<<<<");
         };

      handlePara();
   }, [AssignValueToPara]);

   return (<> <SecondComponent myPara={para}/> </> );
}

Here you can create a boolean variable called assignValueToPara which keeps track of is value assigned to para variable or not. Add it as a dependency of useEffect. Initially the value of this variable will be true when the page loads, but as soon as the setPara() function is called on line number 10 this boolean will be also set to false and it will prevent your page from going inside this loop of re-rendering.

You can refer to this blog for more details.

already try but not working same issue – shivam dwivedi Dec 25 '22 at 20:27 — shivam dwivedi, Dec 25 '22 at 20:27

useEffect is calling API multiple time under component without any dependency

2 Answers2