diff --git a/src/DayColumn.js b/src/DayColumn.js
index 173662037..a2e396352 100644
--- a/src/DayColumn.js
+++ b/src/DayColumn.js
@@ -18,6 +18,25 @@ class DayColumn extends React.Component {
   state = { selecting: false, timeIndicatorPosition: null }
   intervalTriggered = false
 
+  static getDerivedStateFromProps(nextProps, prevState) {
+    if (nextProps.selectable && !prevState?.selectable) {
+      if (this && this._selectable) {
+        this._selectable()
+      }
+    }
+
+    if (!nextProps.selectable && prevState?.selectable) {
+      this._teardownSelectable()
+    }
+
+    const updatedSlotMetrics = prevState?.slotMetrics?.update(nextProps)
+
+    return {
+      selectable: nextProps.selectable,
+      slotMetrics: updatedSlotMetrics,
+    }
+  }
+
   constructor(...args) {
     super(...args)
 
@@ -38,14 +57,6 @@ class DayColumn extends React.Component {
     this.clearTimeIndicatorInterval()
   }
 
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (nextProps.selectable && !this.props.selectable) this._selectable()
-    if (!nextProps.selectable && this.props.selectable)
-      this._teardownSelectable()
-
-    this.slotMetrics = this.slotMetrics.update(nextProps)
-  }
-
   componentDidUpdate(prevProps, prevState) {
     const { getNow, isNow, localizer, date, min, max } = this.props
     const getNowChanged = localizer.neq(prevProps.getNow(), getNow(), 'minutes')