feat(component): add memoization to certain components (#191)

* feat(component): add memoization to certain components * chore: change React.FunctionComponent to React.FC Co-Authored-By: Jorge Moya <jomoya@gmail.com>
bigcommerce · Sep 5, 2019 · 0f84a23 · 0f84a23
1 parent 8258f5e
commit 0f84a23
Show file tree

Hide file tree

Showing 7 changed files with 22 additions and 27 deletions.
diff --git a/packages/big-design/src/components/Badge/Badge.tsx b/packages/big-design/src/components/Badge/Badge.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { memo } from 'react';
 
 import { MarginProps } from '../../mixins';
 
@@ -8,4 +8,4 @@ export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement>, Margi
   variant?: 'danger' | 'secondary' | 'success' | 'warning';
 }
 
-export const Badge: React.FC<BadgeProps> = ({ className, style, ...props }) => <StyledBadge {...props} />;
+export const Badge: React.FC<BadgeProps> = memo(({ className, style, ...props }) => <StyledBadge {...props} />);
diff --git a/packages/big-design/src/components/Checkbox/Checkbox.tsx b/packages/big-design/src/components/Checkbox/Checkbox.tsx
@@ -1,6 +1,6 @@
 import { CheckIcon } from '@bigcommerce/big-design-icons';
 import hoistNonReactStatics from 'hoist-non-react-statics';
-import React, { Ref } from 'react';
+import React, { memo, Ref } from 'react';
 
 import { uniqueId } from '../../utils';
 
@@ -17,7 +17,7 @@ interface PrivateProps {
 export type CheckboxProps = Props & React.InputHTMLAttributes<HTMLInputElement>;
 
 class RawCheckbox extends React.PureComponent<CheckboxProps & PrivateProps> {
-  static Label = StyledLabel;
+  static Label = memo(StyledLabel);
   private readonly uniqueId = uniqueId('checkBox_');
   private readonly labelUniqueId = uniqueId('checkBox_label_');
 

diff --git a/packages/big-design/src/components/Form/Fieldset/Fieldset.tsx b/packages/big-design/src/components/Form/Fieldset/Fieldset.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { memo } from 'react';
 
 import { StyledFieldset, StyledFieldsetDescription, StyledFieldsetLegend } from './styled';
 
@@ -8,8 +8,8 @@ export interface FieldsetProps extends React.FieldsetHTMLAttributes<HTMLFieldSet
 }
 
 export class Fieldset extends React.PureComponent<FieldsetProps> {
-  static Legend = StyledFieldsetLegend;
-  static Description = StyledFieldsetDescription;
+  static Legend = memo(StyledFieldsetLegend);
+  static Description = memo(StyledFieldsetDescription);
 
   render() {
     const { className, legend, description, children, style, ...props } = this.props;

diff --git a/packages/big-design/src/components/Link/Link.tsx b/packages/big-design/src/components/Link/Link.tsx
@@ -1,4 +1,4 @@
-import React, { Ref } from 'react';
+import React, { memo, Ref } from 'react';
 
 import { MarginProps } from '../../mixins';
 
@@ -10,7 +10,7 @@ interface PrivateProps {
   forwardedRef: Ref<HTMLAnchorElement>;
 }
 
-const StyleableLink: React.FunctionComponent<LinkProps & PrivateProps> = props => <StyledLink {...props} />;
+const StyleableLink: React.FC<LinkProps & PrivateProps> = memo(props => <StyledLink {...props} />);
 
 export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => (
   <StyleableLink {...props} forwardedRef={ref} />

diff --git a/packages/big-design/src/components/List/Item/Item.tsx b/packages/big-design/src/components/List/Item/Item.tsx
@@ -1,5 +1,5 @@
 import { CheckIcon } from '@bigcommerce/big-design-icons';
-import React, { Ref } from 'react';
+import React, { memo, Ref } from 'react';
 
 import { StyledListItem } from './styled';
 
@@ -11,20 +11,15 @@ interface PrivateProps {
   forwardedRef: Ref<HTMLLIElement>;
 }
 
-const StyleableListItem: React.FunctionComponent<ListItemProps & PrivateProps> = ({
-  children,
-  forwardedRef,
-  value,
-  ...rest
-}) => {
+const StyleableListItem: React.FC<ListItemProps & PrivateProps> = memo(({ children, forwardedRef, value, ...rest }) => {
   return (
     <StyledListItem ref={forwardedRef} tabIndex={-1} data-value={value} {...rest}>
       {children}
 
       {rest['aria-selected'] && <CheckIcon color="primary" size={'small'} />}
     </StyledListItem>
   );
-};
+});
 
 export const ListItem = React.forwardRef<HTMLLIElement, ListItemProps>((props, ref) => (
   <StyleableListItem {...props} forwardedRef={ref} />

diff --git a/packages/big-design/src/components/Radio/Radio.tsx b/packages/big-design/src/components/Radio/Radio.tsx
@@ -1,5 +1,5 @@
 import hoistNonReactStatics from 'hoist-non-react-statics';
-import React, { Ref } from 'react';
+import React, { memo, Ref } from 'react';
 
 import { uniqueId } from '../../utils';
 
@@ -16,7 +16,7 @@ interface PrivateProps {
 export type RadioProps = Props & React.InputHTMLAttributes<HTMLInputElement>;
 
 class RawRadio extends React.PureComponent<RadioProps & PrivateProps> {
-  static Label = StyledLabel;
+  static Label = memo(StyledLabel);
   private readonly uniqueId = uniqueId('radio_');
   private readonly labelUniqueId = uniqueId('checkBox_label_');
 

diff --git a/packages/big-design/src/components/Typography/Typography.tsx b/packages/big-design/src/components/Typography/Typography.tsx
@@ -1,5 +1,5 @@
 import { Colors } from '@bigcommerce/big-design-theme';
-import React from 'react';
+import React, { memo } from 'react';
 
 import { MarginProps } from '../../mixins';
 
@@ -24,10 +24,10 @@ export const StyleableH3 = StyledH3;
 export const StyleableH4 = StyledH4;
 
 // Public
-export const Text: React.FC<TextProps> = ({ className, style, ...props }) => <StyleableText {...props} />;
-export const Small: React.FC<SmallProps> = ({ className, style, ...props }) => <StyleableSmall {...props} />;
-export const H0: React.FC<HeadingProps> = ({ className, style, ...props }) => <StyleableH0 {...props} />;
-export const H1: React.FC<HeadingProps> = ({ className, style, ...props }) => <StyleableH1 {...props} />;
-export const H2: React.FC<HeadingProps> = ({ className, style, ...props }) => <StyleableH2 {...props} />;
-export const H3: React.FC<HeadingProps> = ({ className, style, ...props }) => <StyleableH3 {...props} />;
-export const H4: React.FC<HeadingProps> = ({ className, style, ...props }) => <StyleableH4 {...props} />;
+export const Text: React.FC<TextProps> = memo(({ className, style, ...props }) => <StyleableText {...props} />);
+export const Small: React.FC<SmallProps> = memo(({ className, style, ...props }) => <StyleableSmall {...props} />);
+export const H0: React.FC<HeadingProps> = memo(({ className, style, ...props }) => <StyleableH0 {...props} />);
+export const H1: React.FC<HeadingProps> = memo(({ className, style, ...props }) => <StyleableH1 {...props} />);
+export const H2: React.FC<HeadingProps> = memo(({ className, style, ...props }) => <StyleableH2 {...props} />);
+export const H3: React.FC<HeadingProps> = memo(({ className, style, ...props }) => <StyleableH3 {...props} />);
+export const H4: React.FC<HeadingProps> = memo(({ className, style, ...props }) => <StyleableH4 {...props} />);