diff --git a/src/components/edit/trackedEntity/TrackedEntityDialog.jsx b/src/components/edit/trackedEntity/TrackedEntityDialog.jsx
index 754b3644b..056996639 100644
--- a/src/components/edit/trackedEntity/TrackedEntityDialog.jsx
+++ b/src/components/edit/trackedEntity/TrackedEntityDialog.jsx
@@ -1,16 +1,14 @@
 import i18n from '@dhis2/d2-i18n'
 import { NoticeBox, IconErrorFilled24 } from '@dhis2/ui'
 import cx from 'classnames'
-import PropTypes from 'prop-types'
-import React, { Component, Fragment } from 'react'
-import { connect } from 'react-redux'
+import React, { useState, useEffect, useCallback, Fragment } from 'react'
+import { useSelector, useDispatch } from 'react-redux'
 import {
     setTrackedEntityType,
     setProgram,
     setProgramStatus,
     setFollowUpStatus,
     setTrackedEntityRelationshipType,
-    setTrackedEntityRelationshipOutsideProgram,
     setPeriodType,
     setStartDate,
     setEndDate,
@@ -20,7 +18,6 @@ import {
     setRelatedPointColor,
     setRelatedPointRadius,
     setRelationshipLineColor,
-    setStyleDataItem,
 } from '../../../actions/layerEdit.js'
 import {
     TEI_COLOR,
@@ -53,422 +50,381 @@ import PeriodTypeSelect from './PeriodTypeSelect.jsx'
 import ProgramStatusSelect from './ProgramStatusSelect.jsx'
 import TrackedEntityRelationshipTypeSelect from './TrackedEntityRelationshipTypeSelect.jsx'
 
-class TrackedEntityDialog extends Component {
-    static propTypes = {
-        setEndDate: PropTypes.func.isRequired,
-        setEventPointColor: PropTypes.func.isRequired,
-        setEventPointRadius: PropTypes.func.isRequired,
-        setFollowUpStatus: PropTypes.func.isRequired,
-        setOrgUnits: PropTypes.func.isRequired,
-        setPeriodType: PropTypes.func.isRequired,
-        setProgram: PropTypes.func.isRequired,
-        setProgramStatus: PropTypes.func.isRequired,
-        setRelatedPointColor: PropTypes.func.isRequired,
-        setRelatedPointRadius: PropTypes.func.isRequired,
-        setRelationshipLineColor: PropTypes.func.isRequired,
-        setStartDate: PropTypes.func.isRequired,
-        setTrackedEntityRelationshipType: PropTypes.func.isRequired,
-        setTrackedEntityType: PropTypes.func.isRequired,
-        validateLayer: PropTypes.bool.isRequired,
-        onLayerValidation: PropTypes.func.isRequired,
-        endDate: PropTypes.string,
-        eventPointColor: PropTypes.string,
-        eventPointRadius: PropTypes.number,
-        followUp: PropTypes.bool,
-        orgUnits: PropTypes.object,
-        periodType: PropTypes.string,
-        periodsSettings: PropTypes.object,
-        program: PropTypes.object,
-        programStatus: PropTypes.string,
-        relatedPointColor: PropTypes.string,
-        relatedPointRadius: PropTypes.number,
-        relationshipLineColor: PropTypes.string,
-        relationshipType: PropTypes.string,
-        rows: PropTypes.array,
-        startDate: PropTypes.string,
-        trackedEntityType: PropTypes.object,
-    }
+const TrackedEntityDialog = () => {
+    const dispatch = useDispatch()
 
-    constructor(props, context) {
-        super(props, context)
-        this.state = {
-            tab: 'data',
-            showRelationshipsChecked: false,
-        }
-    }
+    // --------------------------
+    // Redux state
+    // --------------------------
+    const {
+        startDate,
+        endDate,
+        trackedEntityType,
+        program,
+        programStatus,
+        followUp,
+        relationshipType,
+        periodType,
+        rows,
+        orgUnits,
+        eventPointColor,
+        eventPointRadius,
+        relatedPointColor,
+        relatedPointRadius,
+        relationshipLineColor,
+        periodsSettings,
+        validateLayer,
+        onLayerValidation,
+    } = useSelector((state) => ({
+        startDate: state.layerEdit.startDate,
+        endDate: state.layerEdit.endDate,
+        trackedEntityType: state.layerEdit.trackedEntityType,
+        program: state.layerEdit.program,
+        programStatus: state.layerEdit.programStatus,
+        followUp: state.layerEdit.followUp,
+        relationshipType: state.layerEdit.relationshipType,
+        periodType: state.layerEdit.periodType,
+        rows: state.layerEdit.rows,
+        orgUnits: state.layerEdit.orgUnits,
+        eventPointColor: state.layerEdit.eventPointColor,
+        eventPointRadius: state.layerEdit.eventPointRadius,
+        relatedPointColor: state.layerEdit.relatedPointColor,
+        relatedPointRadius: state.layerEdit.relatedPointRadius,
+        relationshipLineColor: state.layerEdit.relationshipLineColor,
+        periodsSettings: state.layerEdit.periodsSettings,
+        validateLayer: state.layerEdit.validateLayer,
+        onLayerValidation: state.layerEdit.onLayerValidation,
+    }))
 
-    componentDidMount() {
-        const {
-            rows,
-            startDate,
-            endDate,
-            relationshipType,
-            orgUnits,
-            setStartDate,
-            setEndDate,
-            setOrgUnits,
-        } = this.props
+    // --------------------------
+    // Local state
+    // --------------------------
+    const [tab, setTab] = useState('data')
+    const [showRelationshipsChecked, setShowRelationshipsChecked] =
+        useState(false)
+    const [trackedEntityTypeError, setTrackedEntityTypeError] = useState(null)
+    const [orgUnitsError, setOrgUnitsError] = useState(null)
+    const [periodError, setPeriodError] = useState(null)
 
+    // --------------------------
+    // Lifecycle: componentDidMount
+    // --------------------------
+    useEffect(() => {
         const hasDate = startDate !== undefined && endDate !== undefined
 
-        // Set default period (last year)
+        // Set default period if missing
         if (!hasDate) {
             const defaultDates = getDefaultDatesInCalendar()
-            setStartDate(defaultDates.startDate)
-            setEndDate(defaultDates.endDate)
+            dispatch(setStartDate(defaultDates.startDate))
+            dispatch(setEndDate(defaultDates.endDate))
         }
 
         if (relationshipType) {
-            this.setState({
-                showRelationshipsChecked: true,
-            })
+            setShowRelationshipsChecked(true)
         }
 
-        // Set org unit tree roots as default
-        if (!rows && orgUnits.roots) {
-            setOrgUnits({
-                dimension: 'ou',
-                items: orgUnits.roots,
-            })
+        // Set default org units if missing
+        if (!rows && orgUnits?.roots) {
+            dispatch(setOrgUnits({ dimension: 'ou', items: orgUnits.roots }))
         }
-    }
+    }, [dispatch, endDate, orgUnits?.roots, relationshipType, rows, startDate])
 
-    componentDidUpdate(prev) {
-        const {
-            validateLayer,
-            onLayerValidation,
-            startDate,
-            endDate,
-            program,
-            setPeriodType,
-        } = this.props
-        const { periodError } = this.state
+    // --------------------------
+    // Lifecycle: componentDidUpdate
+    // --------------------------
+    useEffect(() => {
+        if (periodError && startDate && endDate) {
+            setPeriodError(null)
+        }
+    }, [periodError, startDate, endDate])
 
-        if (validateLayer && validateLayer !== prev.validateLayer) {
-            onLayerValidation(this.validate())
+    useEffect(() => {
+        if (!program) {
+            dispatch(setPeriodType(LAST_UPDATED_DATES))
         }
+    }, [program, dispatch])
 
-        if (
-            periodError &&
-            (startDate !== prev.startDate || endDate !== prev.endDate)
-        ) {
-            this.setErrorState('periodError', null, 'period')
+    // --------------------------
+    // Validation
+    // --------------------------
+    const setErrorState = useCallback((key, message, tabName) => {
+        switch (key) {
+            case 'trackedEntityTypeError':
+                setTrackedEntityTypeError(message)
+                break
+            case 'orgUnitsError':
+                setOrgUnitsError(message)
+                break
+            case 'periodError':
+                setPeriodError(message)
+                break
+        }
+        setTab(tabName)
+        return false
+    }, [])
+
+    const validate = useCallback(() => {
+        if (!trackedEntityType) {
+            return setErrorState(
+                'trackedEntityTypeError',
+                i18n.t('Tracked Entity Type is required'),
+                'data'
+            )
+        }
+
+        const error = getStartEndDateError(startDate, endDate)
+        if (error) {
+            return setErrorState('periodError', error, 'period')
         }
 
-        if (!program && prev.program !== program) {
-            setPeriodType(LAST_UPDATED_DATES)
+        if (!getOrgUnitsFromRows(rows).length) {
+            return setErrorState(
+                'orgUnitsError',
+                i18n.t('No organisation units are selected.'),
+                'orgunits'
+            )
         }
-    }
 
-    render() {
-        const {
-            eventPointColor,
-            eventPointRadius,
-            followUp,
-            periodType,
-            program,
-            programStatus,
-            trackedEntityType,
-            relationshipType,
-            relatedPointColor,
-            relatedPointRadius,
-            relationshipLineColor,
-            periodsSettings,
-        } = this.props
+        return true
+    }, [trackedEntityType, startDate, endDate, rows, setErrorState])
 
-        const {
-            setTrackedEntityType,
-            setPeriodType,
-            setProgram,
-            setProgramStatus,
-            setFollowUpStatus,
-            setTrackedEntityRelationshipType,
-            setEventPointColor,
-            setEventPointRadius,
-            setRelatedPointColor,
-            setRelatedPointRadius,
-            setRelationshipLineColor,
-        } = this.props
+    // --------------------------
+    // Lifecycle: componentDidUpdate
+    // --------------------------
+    useEffect(() => {
+        if (validateLayer) {
+            onLayerValidation(validate())
+        }
+    }, [validateLayer, validate, onLayerValidation])
 
-        const { tab, trackedEntityTypeError, orgUnitsError, periodError } =
-            this.state
+    // --------------------------
+    // Render
+    // --------------------------
+    return (
+        <div className={styles.content}>
+            <Tabs value={tab} onChange={setTab}>
+                <Tab value="data">{i18n.t('Data')}</Tab>
+                <Tab value="relationships">{i18n.t('Relationships')}</Tab>
+                <Tab value="period">{i18n.t('Period')}</Tab>
+                <Tab value="orgunits">{i18n.t('Org Units')}</Tab>
+                <Tab value="style">{i18n.t('Style')}</Tab>
+            </Tabs>
 
-        return (
-            <div className={styles.content}>
-                <Tabs value={tab} onChange={(tab) => this.setState({ tab })}>
-                    <Tab value="data">{i18n.t('Data')}</Tab>
-                    <Tab value="relationships">{i18n.t('Relationships')}</Tab>
-                    <Tab value="period">{i18n.t('Period')}</Tab>
-                    <Tab value="orgunits">{i18n.t('Org Units')}</Tab>
-                    <Tab value="style">{i18n.t('Style')}</Tab>
-                </Tabs>
-                <div className={styles.tabContent}>
-                    {tab === 'data' && (
-                        <div className={styles.flexRowFlow}>
-                            <TrackedEntityTypeSelect
+            <div className={styles.tabContent}>
+                {tab === 'data' && (
+                    <div className={styles.flexRowFlow}>
+                        <TrackedEntityTypeSelect
+                            trackedEntityType={trackedEntityType}
+                            onChange={(val) =>
+                                dispatch(setTrackedEntityType(val))
+                            }
+                            className={styles.select}
+                            errorText={trackedEntityTypeError}
+                        />
+                        {trackedEntityType && (
+                            <ProgramSelect
+                                allPrograms
+                                program={program}
                                 trackedEntityType={trackedEntityType}
-                                onChange={setTrackedEntityType}
+                                onChange={(val) => dispatch(setProgram(val))}
                                 className={styles.select}
-                                errorText={trackedEntityTypeError}
                             />
-                            {trackedEntityType && (
-                                <ProgramSelect
-                                    allPrograms={true}
-                                    program={program}
-                                    trackedEntityType={trackedEntityType}
-                                    onChange={setProgram}
-                                    className={styles.select}
-                                />
-                            )}
-                            {program && (
-                                <ProgramStatusSelect
-                                    value={programStatus}
-                                    onChange={setProgramStatus}
-                                    className={styles.select}
-                                />
-                            )}
-                            {program && (
-                                <Checkbox
-                                    label={i18n.t('Follow up')}
-                                    checked={followUp}
-                                    onChange={setFollowUpStatus}
-                                />
+                        )}
+                        {program && (
+                            <ProgramStatusSelect
+                                value={programStatus}
+                                onChange={(val) =>
+                                    dispatch(setProgramStatus(val))
+                                }
+                                className={styles.select}
+                            />
+                        )}
+                        {program && (
+                            <Checkbox
+                                label={i18n.t('Follow up')}
+                                checked={followUp}
+                                onChange={(val) =>
+                                    dispatch(setFollowUpStatus(val))
+                                }
+                            />
+                        )}
+                    </div>
+                )}
+
+                {tab === 'relationships' &&
+                    (!trackedEntityType ? (
+                        <div
+                            style={{
+                                fontSize: 14,
+                                paddingTop: 16,
+                                marginLeft: 16,
+                            }}
+                        >
+                            {i18n.t(
+                                'Please select a Tracked Entity Type before selecting a Relationship Type'
                             )}
                         </div>
-                    )}
-                    {tab === 'relationships' &&
-                        (!this.props.trackedEntityType ? (
-                            <div
-                                style={{
-                                    fontSize: 14,
-                                    paddingTop: 16,
-                                    marginLeft: 16,
-                                }}
-                            >
-                                {i18n.t(
-                                    'Please select a Tracked Entity Type before selecting a Relationship Type'
-                                )}
-                            </div>
-                        ) : (
-                            <div className={styles.flexRowFlow}>
-                                <div className={styles.notice}>
-                                    <NoticeBox warning title="Warning">
-                                        {i18n.t(
-                                            'Displaying tracked entity relationships in Maps is an experimental feature'
-                                        )}
-                                    </NoticeBox>
-                                </div>
-                                <Checkbox
-                                    label={i18n.t(
-                                        'Display Tracked Entity relationships'
+                    ) : (
+                        <div className={styles.flexRowFlow}>
+                            <div className={styles.notice}>
+                                <NoticeBox warning title="Warning">
+                                    {i18n.t(
+                                        'Displaying tracked entity relationships in Maps is an experimental feature'
                                     )}
-                                    checked={
-                                        this.state.showRelationshipsChecked
-                                    }
-                                    onChange={(checked) => {
-                                        if (!checked) {
+                                </NoticeBox>
+                            </div>
+                            <Checkbox
+                                label={i18n.t(
+                                    'Display Tracked Entity relationships'
+                                )}
+                                checked={showRelationshipsChecked}
+                                onChange={(checked) => {
+                                    if (!checked) {
+                                        dispatch(
                                             setTrackedEntityRelationshipType(
                                                 null
                                             )
-                                        }
-                                        this.setState({
-                                            showRelationshipsChecked: checked,
-                                        })
-                                    }}
-                                    style={{
-                                        marginBottom: 0,
-                                    }}
-                                />
-                                {this.state.showRelationshipsChecked && (
-                                    <Fragment>
-                                        <TrackedEntityRelationshipTypeSelect
-                                            trackedEntityType={
-                                                this.props.trackedEntityType
-                                            }
-                                            value={relationshipType}
-                                            onChange={
-                                                setTrackedEntityRelationshipType
-                                            }
-                                            className={cx(
-                                                styles.select,
-                                                styles.indent
-                                            )}
-                                        />
-                                    </Fragment>
-                                )}
-                            </div>
-                        ))}
-                    {tab === 'period' && (
-                        <div className={styles.flexRowFlow}>
-                            <PeriodTypeSelect
-                                program={program}
-                                periodType={periodType}
-                                onChange={setPeriodType}
-                            />
-                            <StartEndDate
-                                onSelectStartDate={setStartDate}
-                                onSelectEndDate={setEndDate}
-                                periodsSettings={periodsSettings}
+                                        )
+                                    }
+                                    setShowRelationshipsChecked(checked)
+                                }}
+                                style={{ marginBottom: 0 }}
                             />
-                            {periodError && (
-                                <div className={styles.error}>
-                                    <IconErrorFilled24 />
-                                    {periodError}
-                                </div>
+                            {showRelationshipsChecked && (
+                                <TrackedEntityRelationshipTypeSelect
+                                    trackedEntityType={trackedEntityType}
+                                    value={relationshipType}
+                                    onChange={(val) =>
+                                        dispatch(
+                                            setTrackedEntityRelationshipType(
+                                                val
+                                            )
+                                        )
+                                    }
+                                    className={cx(styles.select, styles.indent)}
+                                />
                             )}
                         </div>
-                    )}
-                    {tab === 'orgunits' && (
-                        <OrgUnitSelect
-                            hideUserOrgUnits={true}
-                            hideAssociatedGeometry={true}
-                            hideSelectMode={false}
-                            hideLevelSelect={true}
-                            hideGroupSelect={true}
-                            warning={orgUnitsError}
-                        />
-                    )}
-                    {tab === 'style' && (
-                        <div className={styles.flexColumnFlow}>
-                            <div className={styles.flexColumn}>
-                                <div className={styles.header}>
-                                    {i18n.t('Tracked entity style')}:
-                                </div>
-                                <div className={styles.flexInnerColumnFlow}>
-                                    <ColorPicker
-                                        label={i18n.t('Color')}
-                                        color={eventPointColor || TEI_COLOR}
-                                        onChange={setEventPointColor}
-                                        className={styles.flexInnerColumn}
-                                    />
-                                    <NumberField
-                                        label={i18n.t('Point size')}
-                                        value={eventPointRadius || TEI_RADIUS}
-                                        onChange={setEventPointRadius}
-                                        className={styles.flexInnerColumn}
-                                    />
-                                </div>
-                                <BufferRadius defaultRadius={TEI_BUFFER} />
+                    ))}
 
-                                {relationshipType ? (
-                                    <Fragment>
-                                        <div className={styles.header}>
-                                            {i18n.t('Related entity style')}:
-                                        </div>
-                                        <div
-                                            className={
-                                                styles.flexInnerColumnFlow
-                                            }
-                                        >
-                                            <ColorPicker
-                                                label={i18n.t('Color')}
-                                                color={
-                                                    relatedPointColor ||
-                                                    TEI_RELATED_COLOR
-                                                }
-                                                onChange={setRelatedPointColor}
-                                                className={
-                                                    styles.flexInnerColumn
-                                                }
-                                            />
-                                            <NumberField
-                                                label={i18n.t('Point size')}
-                                                min={MIN_RADIUS}
-                                                max={MAX_RADIUS}
-                                                value={
-                                                    relatedPointRadius ||
-                                                    TEI_RELATED_RADIUS
-                                                }
-                                                onChange={setRelatedPointRadius}
-                                                className={
-                                                    styles.flexInnerColumn
-                                                }
-                                            />
-                                            <ColorPicker
-                                                label={i18n.t('Line Color')}
-                                                color={
-                                                    relationshipLineColor ||
-                                                    TEI_RELATIONSHIP_LINE_COLOR
-                                                }
-                                                onChange={
-                                                    setRelationshipLineColor
-                                                }
-                                                className={
-                                                    styles.flexInnerColumn
-                                                }
-                                            />
-                                        </div>
-                                    </Fragment>
-                                ) : null}
+                {tab === 'period' && (
+                    <div className={styles.flexRowFlow}>
+                        <PeriodTypeSelect
+                            program={program}
+                            periodType={periodType}
+                            onChange={(val) => dispatch(setPeriodType(val))}
+                        />
+                        <StartEndDate
+                            onSelectStartDate={(val) =>
+                                dispatch(setStartDate(val))
+                            }
+                            onSelectEndDate={(val) => dispatch(setEndDate(val))}
+                            periodsSettings={periodsSettings}
+                        />
+                        {periodError && (
+                            <div className={styles.error}>
+                                <IconErrorFilled24 />
+                                {periodError}
                             </div>
-                            <div className={styles.flexColumn} />
-                        </div>
-                    )}
-                </div>
-            </div>
-        )
-    }
-
-    // TODO: Add to parent class?
-    setErrorState(key, message, tab) {
-        this.setState({
-            [key]: message,
-            tab,
-        })
+                        )}
+                    </div>
+                )}
 
-        return false
-    }
-
-    validate() {
-        const { trackedEntityType, rows, startDate, endDate } = this.props
-
-        if (!trackedEntityType) {
-            return this.setErrorState(
-                'trackedEntityTypeError',
-                i18n.t('Tracked Entity Type is required'),
-                'data'
-            )
-        }
-
-        const error = getStartEndDateError(startDate, endDate)
-        if (error) {
-            return this.setErrorState('periodError', error, 'period')
-        }
+                {tab === 'orgunits' && (
+                    <OrgUnitSelect
+                        hideUserOrgUnits
+                        hideAssociatedGeometry
+                        hideSelectMode={false}
+                        hideLevelSelect
+                        hideGroupSelect
+                        warning={orgUnitsError}
+                    />
+                )}
 
-        if (!getOrgUnitsFromRows(rows).length) {
-            return this.setErrorState(
-                'orgUnitsError',
-                i18n.t('No organisation units are selected.'),
-                'orgunits'
-            )
-        }
+                {tab === 'style' && (
+                    <div className={styles.flexColumnFlow}>
+                        <div className={styles.flexColumn}>
+                            <div className={styles.header}>
+                                {i18n.t('Tracked entity style')}:
+                            </div>
+                            <div className={styles.flexInnerColumnFlow}>
+                                <ColorPicker
+                                    label={i18n.t('Color')}
+                                    color={eventPointColor || TEI_COLOR}
+                                    onChange={(val) =>
+                                        dispatch(setEventPointColor(val))
+                                    }
+                                    className={styles.flexInnerColumn}
+                                />
+                                <NumberField
+                                    label={i18n.t('Point size')}
+                                    value={eventPointRadius || TEI_RADIUS}
+                                    onChange={(val) =>
+                                        dispatch(setEventPointRadius(val))
+                                    }
+                                    className={styles.flexInnerColumn}
+                                />
+                            </div>
+                            <BufferRadius defaultRadius={TEI_BUFFER} />
 
-        return true
-    }
+                            {relationshipType && (
+                                <Fragment>
+                                    <div className={styles.header}>
+                                        {i18n.t('Related entity style')}:
+                                    </div>
+                                    <div className={styles.flexInnerColumnFlow}>
+                                        <ColorPicker
+                                            label={i18n.t('Color')}
+                                            color={
+                                                relatedPointColor ||
+                                                TEI_RELATED_COLOR
+                                            }
+                                            onChange={(val) =>
+                                                dispatch(
+                                                    setRelatedPointColor(val)
+                                                )
+                                            }
+                                            className={styles.flexInnerColumn}
+                                        />
+                                        <NumberField
+                                            label={i18n.t('Point size')}
+                                            min={MIN_RADIUS}
+                                            max={MAX_RADIUS}
+                                            value={
+                                                relatedPointRadius ||
+                                                TEI_RELATED_RADIUS
+                                            }
+                                            onChange={(val) =>
+                                                dispatch(
+                                                    setRelatedPointRadius(val)
+                                                )
+                                            }
+                                            className={styles.flexInnerColumn}
+                                        />
+                                        <ColorPicker
+                                            label={i18n.t('Line Color')}
+                                            color={
+                                                relationshipLineColor ||
+                                                TEI_RELATIONSHIP_LINE_COLOR
+                                            }
+                                            onChange={(val) =>
+                                                dispatch(
+                                                    setRelationshipLineColor(
+                                                        val
+                                                    )
+                                                )
+                                            }
+                                            className={styles.flexInnerColumn}
+                                        />
+                                    </div>
+                                </Fragment>
+                            )}
+                        </div>
+                    </div>
+                )}
+            </div>
+        </div>
+    )
 }
 
-export default connect(
-    null,
-    {
-        setTrackedEntityType,
-        setProgram,
-        setProgramStatus,
-        setFollowUpStatus,
-        setTrackedEntityRelationshipType,
-        setTrackedEntityRelationshipOutsideProgram,
-        setPeriodType,
-        setStartDate,
-        setEndDate,
-        setOrgUnits,
-        setEventPointColor,
-        setEventPointRadius,
-        setRelatedPointColor,
-        setRelatedPointRadius,
-        setRelationshipLineColor,
-        setStyleDataItem,
-    },
-    null,
-    {
-        forwardRef: true,
-    }
-)(TrackedEntityDialog)
+export default TrackedEntityDialog