Why setInterval() is executed twice?

2022-05-04 10:24 Sunset Boulevard imported from Stackoverflow

Why "hi" is being logged in the console each second twice?

import { useEffect } from "react";

export default function App() {
  useEffect(() => {
    setInterval(() => console.log("hi"), 1000);
  }, []);

  return (
    <div className="App">
      Hello
    </div>
  );
}

2 answers

answered 2022-05-04 10:38 AngryJohn
because that's what setInterval is all about.

From MDN:

The setInterval() method, offered on the Window and Worker interfaces, repeatedly calls a function or executes a code snippet, with a fixed time delay between each call.

So you don't want to use setInterval because it will repeatedly execute your function, instead use setTimeout

answered 2022-05-04 10:46 Anindya Dey

In addition to what @AngryJohn wrote, you should also clear the interval when the component unmounts, by using clearInterval like so:


import { useEffect } from "react";

export default function App() {
  useEffect(() => {
    let interval = setInterval(() => console.log("hi"), 1000);

    return () => clearInterval(timer)  // This "return" function executes when a component unmounts
  }, []);

  return (
    <div className="App">
      Hello
    </div>
  );
}

Refer this SO question for more information.

See also questions close to this topic

how to change prettier format for react native

my code formatting prettier didn't works well for react native, i don't understand where to config it but it works well with flutter

from this code

      import { View, Text } from 'react-native'
    
    import React from 'react'
    
    export default function App() {
      return (
        <View>
    
    <Text>Apps</Text>   
</View>
      )
    }

it's formatted to this

import {
  View,
  Text
} from 'react-native'

import React from 'react'

export default function App() {
  return ( <
    View >

    <
    Text > Apps < /Text>


    <
    /View>
  )
}

MarkLogic server-side JavaScript and XQuery

I am just starting using NoSQL MarkLogic DB and trying to choose for me the best query language to learn and use in future. On server side MarkLogic provides the possibility to use JavaScript API or XQuery API.

I want to receive an advice. Which language is better to concentrate on and learn? JavaScript or XQuery?
Popover in chrome extension using js

My goal is I want to create a chrome extension like Toucan Extension. I want to highlight some paragraphs in random site then translate it to specific language. The problem is I do not have an idea on how to implement a popover in chrome extension like in the picture below.
react-router-dom v6 params only numbers
I want add number regex in may param in react-router-dom v6. it work fin in v5 like it:
```
 <Route path="list/:id(\d+)" element={<MyComponent/>} /> 
```
but it not work in v6.

How can I fixed my problem"FirebaseError: Firebase: Error (auth/invalid-api-key)."

My environment variable is ok. No comas and name mistakes but they given me error like "FirebaseError: Firebase: Error (auth/invalid-api-key)". How can I fixed it. Please Help me...

This my .env file

REACT_APP_apiKey=AIzaSyBWobnhbdeMdNpXXXXXXXXXXXXXXXXXXXX
REACT_APP_authDomain=XXXXX.firebaseapp.com
REACT_APP_projectId=XXXX
REACT_APP_storageBucket=XXXXX.appspot.com
REACT_APP_messagingSenderId=4997390XXXXX
REACT_APP_appId=1:4997390XXXXX:web:cc7bc80aa1bdb78fXXXXXX
REACT_APP_measurementId=G-M1XDXXXXXX

This my firebase config file

const firebaseConfig = {
  apiKey: process.env.REACT_APP_apiKey,
  authDomain: process.env.REACT_APP_authDomain,
  projectId: process.env.REACT_APP_projectId,
  storageBucket: process.env.REACT_APP_storageBucket,
  messagingSenderId: process.env.REACT_APP_messagingSenderId,
  appId: process.env.REACT_APP_appId,
  measurementId: process.env.REACT_APP_measurementId,
};

when I debugging firebaseConfig object

console.log(firebaseConfig.apiKey);  ==========> undefined 
console.log(firebaseConfig.authDomain);  ==========> undefined 
console.log(firebaseConfig.projectId);  ==========> undefined 
console.log(firebaseConfig.storageBucket); ==========> undefined 
console.log(firebaseConfig.measurementId); ==========> undefined 
console.log(firebaseConfig.appId); ==========> undefined 
console.log(firebaseConfig.measurementId); ==========> undefined

client side given error this "FirebaseError: Firebase: Error (auth/invalid-api-key)"

Related questions

Why setInterval() is executed twice?

2 answers

See also questions close to this topic