diff --git a/src/components/HeaderGap/index.desktop.js b/src/components/HeaderGap/index.desktop.js
index 2d583881cab6..07ea1ea6f48d 100644
--- a/src/components/HeaderGap/index.desktop.js
+++ b/src/components/HeaderGap/index.desktop.js
@@ -1,7 +1,8 @@
 import PropTypes from 'prop-types';
-import React, {PureComponent} from 'react';
+import React, {memo} from 'react';
 import {View} from 'react-native';
 import withThemeStyles, {withThemeStylesPropTypes} from '@components/withThemeStyles';
+import compose from '@libs/compose';
 
 const propTypes = {
     /** Styles to apply to the HeaderGap */
@@ -10,14 +11,15 @@ const propTypes = {
     ...withThemeStylesPropTypes,
 };
 
-class HeaderGap extends PureComponent {
-    render() {
-        return <View style={[this.props.themeStyles.headerGap, ...this.props.styles]} />;
-    }
+const defaultProps = {
+    styles: [],
+};
+
+function HeaderGap(props) {
+    return <View style={[props.themeStyles.headerGap, ...props.styles]} />;
 }
 
+HeaderGap.displayName = 'HeaderGap';
 HeaderGap.propTypes = propTypes;
-HeaderGap.defaultProps = {
-    styles: [],
-};
-export default withThemeStyles(HeaderGap);
+HeaderGap.defaultProps = defaultProps;
+export default compose(memo, withThemeStyles)(HeaderGap);
diff --git a/src/components/HeaderGap/index.js b/src/components/HeaderGap/index.js
index ca81056d5f7a..35e6bf92fb5d 100644
--- a/src/components/HeaderGap/index.js
+++ b/src/components/HeaderGap/index.js
@@ -1,7 +1,6 @@
-import {PureComponent} from 'react';
-
-export default class HeaderGap extends PureComponent {
-    render() {
-        return null;
-    }
+function HeaderGap() {
+    return null;
 }
+
+HeaderGap.displayName = 'HeaderGap';
+export default HeaderGap;