diff --git a/src/components/periods/PeriodTypeSelect.js b/src/components/periods/PeriodTypeSelect.js
index 98917ca65..3c04c6e98 100644
--- a/src/components/periods/PeriodTypeSelect.js
+++ b/src/components/periods/PeriodTypeSelect.js
@@ -1,22 +1,19 @@
 import i18n from '@dhis2/d2-i18n'
 import PropTypes from 'prop-types'
-import React, { Component } from 'react'
+import React, { useEffect } from 'react'
 import { RELATIVE_PERIODS } from '../../constants/periods.js'
 import { getPeriodTypes, getRelativePeriods } from '../../util/periods.js'
 import { SelectField } from '../core/index.js'
 
-class PeriodTypeSelect extends Component {
-    static propTypes = {
-        onChange: PropTypes.func.isRequired,
-        className: PropTypes.string,
-        errorText: PropTypes.string,
-        hiddenPeriods: PropTypes.array,
-        period: PropTypes.object,
-        value: PropTypes.string,
-    }
-
-    componentDidMount() {
-        const { value, period, onChange } = this.props
+const PeriodTypeSelect = ({
+    onChange,
+    className,
+    errorText,
+    hiddenPeriods,
+    period,
+    value,
+}) => {
+    useEffect(() => {
         const relativePeriodType = {
             id: RELATIVE_PERIODS,
             name: i18n.t('Relative'),
@@ -31,24 +28,28 @@ class PeriodTypeSelect extends Component {
             // set relativePeriods as default
             onChange(relativePeriodType)
         }
-    }
+    }, [value, period, onChange])
 
-    render() {
-        const { value, hiddenPeriods, onChange, className, errorText } =
-            this.props
+    return (
+        <SelectField
+            label={i18n.t('Period type')}
+            items={getPeriodTypes(hiddenPeriods)}
+            value={value}
+            onChange={onChange}
+            className={className}
+            errorText={!value && errorText ? errorText : null}
+            dataTest="periodtypeselect"
+        />
+    )
+}
 
-        return (
-            <SelectField
-                label={i18n.t('Period type')}
-                items={getPeriodTypes(hiddenPeriods)}
-                value={value}
-                onChange={onChange}
-                className={className}
-                errorText={!value && errorText ? errorText : null}
-                dataTest="periodtypeselect"
-            />
-        )
-    }
+PeriodTypeSelect.propTypes = {
+    onChange: PropTypes.func.isRequired,
+    className: PropTypes.string,
+    errorText: PropTypes.string,
+    hiddenPeriods: PropTypes.array,
+    period: PropTypes.object,
+    value: PropTypes.string,
 }
 
 export default PeriodTypeSelect