title: How to stop my component from being made twice in development
body: <p>I am following this <a href="https://medium.com/@nitinpatel_20236/challenge-of-building-a-calendar-with-pure-javascript-a86f1303267d" rel="nofollow noreferrer">tutorial</a> to make a javascript calendar in react</p>
  <p>I have a working calendar UI with the following code</p>
  <pre><code>// https://medium.com/@nitinpatel_20236/challenge-of-building-a-calendar-with-pure-javascript-a86f1303267d
  import { useState, useEffect, useRef, useMemo } from 'react'
  import type { NextPage } from 'next'
  import Head from 'next/head'
  import styles from '../styles/Home.module.scss'
  
  const months = [&quot;Jan&quot;, &quot;Feb&quot;, &quot;Mar&quot;, &quot;Apr&quot;, &quot;May&quot;, &quot;Jun&quot;, &quot;Jul&quot;, &quot;Aug&quot;, &quot;Sep&quot;, &quot;Oct&quot;, &quot;Nov&quot;, &quot;Dec&quot;]
  // console.log('render')
  
  const Home: NextPage = () =&gt; {
    const today = useMemo(() =&gt; new Date(), []);
    const [currentMonth, setCurrentMonth] = useState(today.getMonth())
    const [currentYear, setCurrentYear] = useState(today.getFullYear())
    const calendarBodyRef = useRef&lt;HTMLDivElement&gt;(null)
  
    // check how many days in a month code from https://dzone.com/articles/determining-number-days-month
    const daysInMonth = (iMonth: number, iYear: number) =&gt; {
      return 32 - new Date(iYear, iMonth, 32).getDate()
    }
  
    useEffect(() =&gt; {
      const showCalendar = (month: number, year: number) =&gt; {
        const firstDay = (new Date(year, month)).getDay()
        const calendarBody = calendarBodyRef.current
  
        // creating all cells
        let date = 1;
        for (let i = 0; i &lt; 6; i++) {
          // creates a table row
          const row = document.createElement(&quot;div&quot;)
          row.classList.add(styles.row)
          //creating individual cells, filing them up with data.
          for (let j = 0; j &lt; 7; j++) {
            if (i === 0 &amp;&amp; j &lt; firstDay) {
              const cell = document.createElement(&quot;div&quot;)
              cell.classList.add(styles.cell)
              const cellText = document.createTextNode(&quot;&quot;)
              cell.appendChild(cellText)
              row.appendChild(cell)
            } else if (date &gt; daysInMonth(month, year)) {
              break
            } else {
              const cell = document.createElement(&quot;div&quot;)
              cell.classList.add(styles.cell)
              const cellText = document.createTextNode(String(date))
              if (date === today.getDate() &amp;&amp; year === today.getFullYear() &amp;&amp; month === today.getMonth()) {
                cell.classList.add(styles.currentDay)
              } // color today's date
              cell.appendChild(cellText)
              row.appendChild(cell)
              date++
            }
          }
          if (calendarBody) {
            calendarBody.appendChild(row) // appending each row into calendar body.
          }
        }
      }
      showCalendar(currentMonth, currentYear)
    }, [currentMonth, currentYear, today])
  
    return (
      &lt;&gt;
        &lt;Head&gt;
          &lt;title&gt;Calendar Budget App&lt;/title&gt;
          &lt;meta name=&quot;description&quot; content=&quot;Generated by create next app&quot; /&gt;
          &lt;link rel=&quot;icon&quot; href=&quot;/favicon.ico&quot; /&gt;
        &lt;/Head&gt;
        &lt;div className={styles.calendarWrap}&gt;
          &lt;h2 className={styles.monthTitle}&gt;{months[currentMonth]} {currentYear}&lt;/h2&gt;
          &lt;div className={styles.daysWrap}&gt;
            &lt;span&gt;Sun&lt;/span&gt;
            &lt;span&gt;Mon&lt;/span&gt;
            &lt;span&gt;Tue&lt;/span&gt;
            &lt;span&gt;Wed&lt;/span&gt;
            &lt;span&gt;Thu&lt;/span&gt;
            &lt;span&gt;Fri&lt;/span&gt;
            &lt;span&gt;Sat&lt;/span&gt;
          &lt;/div&gt;
          &lt;div ref={calendarBodyRef} className={styles.calendarBody}&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/&gt;
    )
  }
  
  export default Home
  </code></pre>
  <p>However in development, my calendar is made twice</p>
  <p><a href="https://i.stack.imgur.com/98S2n.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/98S2n.png" alt="enter image description here" /></a></p>
  <p>I assume this is because of <code>React.StrictMode</code> in development as <code>useEffect</code> seems to be running twice. If I run <code>npm run build</code> and <code>npm start</code> to mimic production, I only see one calendar.</p>
  <p>Is there still a way for my calendar to appear once in development?</p>