React multiple console.log?

Question

Im creating a function that sends an email based on the expiry date, however, upon trial, the function works fine but the email gets sent multiple times and the console.log is shown multiple times. Does anyone know how to counteract?

if (product?.expiry) {
      var arr = []
      var today = new Date()
      var expiry = new Date(product?.expiry)
      var week = new Date(expiry.setDate(expiry.getDate() - 7))

      var template = {
        message: product.name + " is reaching expiry date",
        footer: "Expiry Date: " + week.toDateString()
      }

     const interval =  setInterval(() => {
      if (arr.length > 0) {
        clearInterval(interval)
        console.log(arr)
       }
        if (today !== expiry) {
          // actual emailing
            emailjs.send(SERVICE_API, TEMPLATE_API, template, PUBLIC_API)
            .then(function(response) {
              console.log('SUCCESS!', response.status, response.text);
            }, function(error) {
              console.log('FAILED...', error)
            });
            arr.push('found')
          }
     }, 1000)
 }

ALERT: I am aware that the function is sending the email when it is not the expiry date, i just want to fix up this console.log error

**rest of function: **

const expiryEmail = () => {
        if (today !== week) {
          emailjs.send(SERVICE_API, TEMPLATE_API, template, PUBLIC_API)
          .then(function(response) {
            console.log('SUCCESS!', response.status, response.text);
          }, function(error) {
            console.log('FAILED...', error)
          });
        }
      }

      setTimeout(() => {
        
      })
      useEffect(() => {
          if (!product) {
            return;
          }
          //problem is that the condition returns null first time around
          expiryEmail()
      },[])

Answer 1

Try to use useEffect hook instead to set interval I am sharing the code try to use that

var today = new Date()
var expiry = new Date(product?.expiry)
var week = new Date(expiry.setDate(expiry.getDate() - 7))

var template = {
  message: product.name + " is reaching expiry date",
  footer: "Expiry Date: " + week.toDateString()
}


useEffect(()=>{
  if (today !== expiry) {
      emailjs.send(SERVICE_API, TEMPLATE_API, template, PUBLIC_API)
      .then(function(response) {
        console.log('SUCCESS!', response.status, response.text);
      }, function(error) {
        console.log('FAILED...', error)
      });
      arr.push('found')
  }
},[])

Answer 2

The first condition inside your setInterval method's callback, ie.

if (arr.length > 0) {
        clearInterval(interval)
        console.log(arr)
}

does not have a return statement, which means it will continue on to your next if block, whose condition is satisfied because you are checking is today's date is not the same as expiry 's date, which as you alerted is a conscious decision, and therefore print the console message again.

Also, I hope by multiple you mean only twice, because that is what my answer applies for, if you meant more than that, I'd like to see the part that calls this method.

Again also, you should use Mayank's suggestion and process your code inside a useEffect block, much simpler.