Remove listener when component unmounts

bleeding.js

@@ -11,7 +11,6 @@ import { saveBleeding } from './db'
 import { formatDateForViewHeader } from './format'
 import { bleeding as labels } from './labels'
 import getCycleDay from './get-cycle-day'
-import { bleedingDaysSortedByDate } from './db'
 
 export default class Bleeding extends Component {
   constructor(props) {

calendar.js

@@ -9,10 +9,11 @@ export default class DatePickView extends Component {
     super(props)
     this.state = { bleedingDaysInCalFormat: getBleedingDaysInCalFormat(bleedingDaysSortedByDate) }
 
-    // so we rerender the calendar when there are new bleeding days
-    bleedingDaysSortedByDate.addListener(() => {
-      this.setState({ bleedingDaysInCalFormat: getBleedingDaysInCalFormat(bleedingDaysSortedByDate) })
-    })
+    bleedingDaysSortedByDate.addListener(setStateWithCalendarFormattedDays.bind(this))
+  }
+
+  componentWillUnmount() {
+    bleedingDaysSortedByDate.removeListener(setStateWithCalendarFormattedDays)
   }
 
   passDateToDayView(result) {
@@ -44,3 +45,7 @@ function getBleedingDaysInCalFormat(bleedingDaysSortedByDate) {
     return acc
   }, {})
 }
+
+function setStateWithCalendarFormattedDays() {
+  this.setState({ bleedingDaysInCalFormat: getBleedingDaysInCalFormat(bleedingDaysSortedByDate) })
+}