Converted Stack to a functional component

src/components/Stack/Stack.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {memo, NamedExoticComponent} from 'react';
 import {classNames, variationName} from '../../utilities/css';
 import {elementChildren, wrapWithComponent} from '../../utilities/components';
 
@@ -32,33 +32,31 @@ export interface StackProps {
   distribution?: Distribution;
 }
 
-export class Stack extends React.PureComponent<StackProps, never> {
-  static Item = Item;
-
-  render() {
-    const {
-      children,
-      vertical,
-      spacing,
-      distribution,
-      alignment,
-      wrap,
-    } = this.props;
-
-    const className = classNames(
-      styles.Stack,
-      vertical && styles.vertical,
-      spacing && styles[variationName('spacing', spacing)],
-      distribution && styles[variationName('distribution', distribution)],
-      alignment && styles[variationName('alignment', alignment)],
-      wrap === false && styles.noWrap,
-    );
-
-    const itemMarkup = elementChildren(children).map((child, index) => {
-      const props = {key: index};
-      return wrapWithComponent(child, Item, props);
-    });
-
-    return <div className={className}>{itemMarkup}</div>;
-  }
-}
+export const Stack: NamedExoticComponent<StackProps> & {
+  Item: typeof Item;
+} = memo(function Stack({
+  children,
+  vertical,
+  spacing,
+  distribution,
+  alignment,
+  wrap,
+}: StackProps) {
+  const className = classNames(
+    styles.Stack,
+    vertical && styles.vertical,
+    spacing && styles[variationName('spacing', spacing)],
+    distribution && styles[variationName('distribution', distribution)],
+    alignment && styles[variationName('alignment', alignment)],
+    wrap === false && styles.noWrap,
+  );
+
+  const itemMarkup = elementChildren(children).map((child, index) => {
+    const props = {key: index};
+    return wrapWithComponent(child, Item, props);
+  });
+
+  return <div className={className}>{itemMarkup}</div>;
+});
+
+Stack.Item = Item;