React runs everything twice because of something called debugger:///vm625:236

Question

I run some functions in my app.jsx file and all the functions are run twice while they should only run once.

import React, {useState} from 'react';


function App() {

    function printer(e){
        console.log(e);
    }

    ["hello", "hi"].forEach(printer);

  return (
    <div>
        Hello
    </div>
  );
}

export default App;

result console state:

App.jsx:34 "hello"
App.jsx:34 "hi"
VM679:236 "hello"
VM679:236 "hi"

how can I stop this VM679 from doing this?

score 1 · Accepted Answer · answered Sep 08 '22 at 22:23

1

I fixed it somehow. The solution was to remove the <React.StrictMode> tags from the index.js file. I dont know why it worked or how it worked but all I know is that it worked.

answered Sep 08 '22 at 22:23

Bot Ellis

108
6

2

`StrictMode` intentionally double invokes your components to detect potential issues. – ivanatias Sep 08 '22 at 22:28
@ivanatias is right. See this thread https://stackoverflow.com/questions/72238175/react-18-useeffect-is-getting-called-two-times-on-mount. – Youssouf Oumar Sep 17 '22 at 13:25

React runs everything twice because of something called debugger:///vm625:236

1 Answers1