diff --git a/packages/fscomponents/src/components/ProductMetadata.tsx b/packages/fscomponents/src/components/ProductMetadata.tsx
index f73956d6e4..5c7a655cc9 100644
--- a/packages/fscomponents/src/components/ProductMetadata.tsx
+++ b/packages/fscomponents/src/components/ProductMetadata.tsx
@@ -1,9 +1,7 @@
 /**
  * Component to display a product's brand, title, price, and review stars.
  */
-
-import React, { Component } from 'react';
-
+import React, { FunctionComponent, memo } from 'react';
 import {
   StyleProp,
   StyleSheet,
@@ -60,28 +58,26 @@ const styles = StyleSheet.create({
   }
 });
 
-export class ProductMetadata extends Component<ProductMetadataProps> {
-  renderBrand(): JSX.Element {
+export const ProductMetadata: FunctionComponent<ProductMetadataProps> = memo((props):
+  JSX.Element => {
+  const renderBrand = (): JSX.Element => {
     return (
-      <Text style={[styles.brand, this.props.brandStyle]}>{this.props.brand}</Text>
+      <Text style={[styles.brand, props.brandStyle]}>{props.brand}</Text>
     );
-  }
-
-  renderTitle(): JSX.Element {
+  };
+  const renderTitle = (): JSX.Element => {
     return (
-      <Text style={[styles.title, this.props.titleStyle]}>{this.props.title}</Text>
+      <Text style={[styles.title, props.titleStyle]}>{props.title}</Text>
     );
-  }
-
-  renderPrice(): JSX.Element {
+  };
+  const renderPrice = (): JSX.Element => {
     const {
       originalPriceStyle,
       priceStyle,
       salePriceStyle,
       originalPrice,
       price
-    } = this.props;
-
+    } = props;
     const priceStyleGenerated = [
       styles.price,
       priceStyle || null,
@@ -107,15 +103,13 @@ export class ProductMetadata extends Component<ProductMetadataProps> {
         )}
       </View>
     );
-  }
-
-  renderReviews(): JSX.Element {
+  };
+  const renderReviews = (): JSX.Element => {
     const {
       review,
       reviewCountStyle,
       reviewIndicatorProps
-    } = this.props;
-
+    } = props;
     const stats = review && review.statistics || {} as any;
     const { averageRating, reviewCount } = stats;
 
@@ -133,16 +127,13 @@ export class ProductMetadata extends Component<ProductMetadataProps> {
         )}
       </View>
     );
-  }
-
-  render(): JSX.Element {
-    return (
-      <View style={this.props.style}>
-        {this.props.brand && this.renderBrand()}
-        {this.props.title && this.renderTitle()}
-        {(this.props.originalPrice || this.props.price) && this.renderPrice()}
-        {(typeof this.props.review !== 'undefined') && this.renderReviews()}
-      </View>
-    );
-  }
-}
+  };
+  return (
+    <View style={props.style}>
+      {props.brand && renderBrand()}
+      {props.title && renderTitle()}
+      {(props.originalPrice || props.price) && renderPrice()}
+      {(typeof props.review !== 'undefined') && renderReviews()}
+    </View>
+  );
+});