title: Why does my useEffect run multiple times even when that component should only be rendered once?
body: <p>My useEffect is running multiple times per load even when the useEffect dependency isn't being updated. <em>See console.log(&quot;filtering events&quot;)</em>. Every time the page is loaded the useEffect runs three times (my best guess is because the components are being rendered three times?).</p>
  <p>What I am trying to do is every time the <code>filters</code> state variable is updated I want the <code>filteredEvents</code> variable to be updated from the filters applied to all of the events and then the calendar component to be re-rendered with the new events.</p>
  <pre><code>import React, { useState, useEffect, useCallback } from 'react'
  import { Calendar as BigCalendar, momentLocalizer } from 'react-big-calendar';
  import moment from 'moment';
  import loadingIMG from &quot;../../../assets/images/courses/signup/minionsLoading.gif&quot;
  import &quot;react-big-calendar/lib/css/react-big-calendar.css&quot;
  import {
      Accordion,
      AccordionItem,
      AccordionItemHeading,
      AccordionItemPanel,
      AccordionItemButton
  } from 'react-accessible-accordion'
  import { navigate, Link } from 'gatsby';
  
  moment.locale('en-US')
  const localizer = momentLocalizer(moment)
  
  const CourseSignup = ({className}) =&gt; {
      const [loading, isLoading] = useState(true)
  
      const [allEvents, setAllEvents] = useState({
          count: undefined,
          events: undefined
      })
  
      useEffect(async () =&gt; {
          console.log(&quot;fetching events&quot;)
          await fetch(&quot;http://127.0.0.1:5000/timeslots&quot;, { 
              method: 'GET',
              headers: {
                  'X-API-Key': '*F-JaNdRgUkXp2s5v8x/A?D(G+KbPeSh',
              }
          })
          .then(response =&gt; response.json())
          .then((results) =&gt; {
              let temp = []
              // Get all events
              for (var i = 0; i &lt; results.events.length; i++) {
                  // TODO: Check if class is virtual or in-person
                  // TODO: Check if class is group or 1 on 1
                  // TODO: get teacher name
                  // TODO: get class name
  
                  // Get all neccesary information and push to an array
                  temp.push({
                      title: String(results.events[i].summary),
                      info: {
                          format: undefined,
                          type: undefined,
                          name: undefined,
                          teacher: undefined
                      },
                      description: String(results.events[i].description) || undefined,
                      start: new Date(results.events[i].start.date || results.events[i].start.dateTime),
                      end: new Date(results.events[i].end.date || results.events[i].end.dateTime),
                      url: String(results.events[i].htmlLink),
                      id: String(results.events[i].id),
                      est_locale_timecodes: {
                          start: results.events[i].start.date || results.events[i].start.dateTime,
                          end: results.events[i].end.date || results.events[i].end.dateTime
                      }
                  })
              }
              // update state variable with events
              setAllEvents({
                  'count': temp.length,
                  'events': temp
              })
          })
          .catch(() =&gt; {
              // incase of an error replace all events
              setAllEvents({
                  'count': undefined,
                  'events': undefined
              })
          })
          .then(() =&gt; isLoading(false))
      }, [])
  
  
      const UserInterface = () =&gt; {
          const [filters, updateFilters] = useState({
              classTeacher: 'undefined', // name of the teacher (default: undefined)
              classType: undefined, // 'group', '1 on 1'
              classFormat: undefined, // 'virtual', 'in-person'
              class: className // name of class (default: undefined)
          })
          const [filteredEvents, setFilteredEvents] = useState({
              count: undefined,
              events: undefined
          })
  
          useEffect(() =&gt; {
              console.log(&quot;filtering events&quot;)
              if(!Object.values(filters).every(filterValue =&gt; filterValue == undefined)) {
                  // let filtered = Array(allEvents.events).filter(event =&gt; {
                  //     if(event.info.format == undefined || String(event.info.format).includes(filters.classFormat == undefined ? &quot;&quot; : filters.classFormat)) return true
                  //     if(event.info.type == undefined || String(event.info.type).includes(filters.classType == undefined ? &quot;&quot; : filters.classType)) return true
                  //     if(event.info.name == undefined || String(event.info.name).includes(filters.class == undefined ? &quot;&quot; : filters.class)) return true
                  //     if(event.info.teacher == undefined || String(event.info.teacher).includes(filters.classTeacher == undefined ? &quot;&quot; : filters.classTeacher)) return true
                  //     return false
                  // })
  
                  setFilteredEvents(allEvents)
              } else {
                  setFilteredEvents(allEvents)
              }
          }, [filters])
  
          const FilterOptions = () =&gt; {
              return null
          }
  
          const Calendar = () =&gt; {
              const getDate = () =&gt; {
                  var d = new Date()
                  return (`${d.toLocaleString('default', { month: 'long' })}, ${d.getFullYear()}`)
              }
  
              return (
                  &lt;div id=&quot;calendar-content&quot;&gt;
                      &lt;div className=&quot;section-title&quot; style={{&quot;marginBottom&quot;:&quot;10px&quot;}}&gt;
                          &lt;h3 style={{fontFamily: &quot;inherit&quot;}}&gt;{getDate()}&lt;/h3&gt;
                      &lt;/div&gt;
                      &lt;BigCalendar 
                          localizer={localizer}
                          events={filteredEvents.events} 
                          startAccessor=&quot;start&quot; 
                          endAccessor=&quot;end&quot; 
                          style={{ height: 800 }} 
                          views={{month: true}} 
                          popup={true}
                          toolbar={false}
                      /&gt;
                  &lt;/div&gt;
              )
          }
  
          const SignupForm = () =&gt; {
              return null
          }
  
          return (
              &lt;div&gt;
                  &lt;FilterOptions/&gt;
                  &lt;div&gt;
                      {loading
                          ? null
                          : &lt;Calendar/&gt;
                      }
                  &lt;/div&gt;
                  &lt;SignupForm/&gt;
              &lt;/div&gt;
          )
      }
  
      return (
          &lt;UserInterface/&gt;
      )
  
  }
  
  export default CourseSignup
  </code></pre>