[{"data":1,"prerenderedAt":81},["ShallowReactive",2],{"/2025/11/08-useeffect-is-executed-twice":3},{"id":4,"title":5,"body":6,"date":72,"description":38,"extension":73,"meta":74,"navigation":75,"path":76,"robots":77,"seo":78,"stem":79,"__hash__":80},"posts/2025/11/08 useEffect-is-executed-twice.md","08 UseEffect Is Executed Twice",{"type":7,"value":8,"toc":69},"minimark",[9,18,21,25,39,50,58,61],[10,11,13],"post-title",{":date":12},"date",[14,15,17],"h1",{"id":16},"useeffect-is-executed-twice","useEffect is Executed Twice",[19,20],"br",{},[22,23,24],"p",{},"I had a case in which my react app calls the same api endpoint twice. The call is wrapped inside the useEffect hook. At first, I thought the page was rendered twice, but that was not the case.",[26,27,28],"code-block",{},[29,30,35],"pre",{"className":31,"code":33,"language":34},[32],"language-text","useEffect(() => {\n  callEndpoint();\n}, []);\n","text",[36,37,33],"code",{"__ignoreMap":38},"",[22,40,41,42,49],{},"After further investigation, apparently the useEffect is executed twice even though the trigger is an empty array. I found out later on that it is due to ",[36,43,48],{"className":44},[45,46,47],"bg-gray-200","p-2","rounded","React.StrictMode",". In my App.tsx:",[26,51,52],{},[29,53,56],{"className":54,"code":55,"language":34},[32],"\u003CReact.StrictMode>\n  \u003CApp />\n\u003C/React.StrictMode>\n",[36,57,55],{"__ignoreMap":38},[22,59,60],{},"Removing it removed the duplicate execution.",[26,62,63],{},[29,64,67],{"className":65,"code":66,"language":34},[32],"//\u003CReact.StrictMode>\n  \u003CApp />\n//\u003C/React.StrictMode>\n",[36,68,66],{"__ignoreMap":38},{"title":38,"searchDepth":70,"depth":70,"links":71},2,[],"2025-11-08T00:00:00.000Z","md",{},true,"/2025/11/08-useeffect-is-executed-twice",null,{"title":5,"description":38},"2025/11/08 useEffect-is-executed-twice","81-C1--Ace2rTcAllbLMpMplgtTh1BdlP_EnXofE4zw",1785167452613]