optimized node layout rerenders

src/components/input/Button/index.tsx

@@ -1,5 +1,5 @@
 import classnames from 'classnames';
-import React, { ButtonHTMLAttributes, DetailedHTMLProps, FC, createElement } from 'react';
+import React, { ButtonHTMLAttributes, DetailedHTMLProps, FC, createElement, memo } from 'react';
 import * as styles from './styles.scss';
 import { Icon } from '~/components/input/Icon';
 import { IIcon } from '~/redux/types';
@@ -22,46 +22,48 @@ type IButtonProps = DetailedHTMLProps<
   iconOnly?: boolean;
 };
 
-const Button: FC<IButtonProps> = ({
-  className = '',
-  size = 'normal',
-  iconLeft,
-  iconRight,
-  children,
-  seamless = false,
-  transparent = false,
-  non_submitting = false,
-  red = false,
-  grey = false,
-  is_loading,
-  title,
-  stretchy,
-  disabled,
-  iconOnly,
-  ...props
-}) =>
-  createElement(
-    seamless || non_submitting ? 'div' : 'button',
-    {
-      className: classnames(styles.button, className, styles[size], {
-        red,
-        grey,
-        seamless,
-        transparent,
-        disabled,
-        is_loading,
-        stretchy,
-        icon: ((iconLeft || iconRight) && !title && !children) || iconOnly,
-        has_icon_left: !!iconLeft,
-        has_icon_right: !!iconRight,
-      }),
-      ...props,
-    },
-    [
-      iconLeft && <Icon icon={iconLeft} size={20} key={0} />,
-      title ? <span>{title}</span> : children || null,
-      iconRight && <Icon icon={iconRight} size={20} key={2} />,
-    ]
-  );
+const Button: FC<IButtonProps> = memo(
+  ({
+    className = '',
+    size = 'normal',
+    iconLeft,
+    iconRight,
+    children,
+    seamless = false,
+    transparent = false,
+    non_submitting = false,
+    red = false,
+    grey = false,
+    is_loading,
+    title,
+    stretchy,
+    disabled,
+    iconOnly,
+    ...props
+  }) =>
+    createElement(
+      seamless || non_submitting ? 'div' : 'button',
+      {
+        className: classnames(styles.button, className, styles[size], {
+          red,
+          grey,
+          seamless,
+          transparent,
+          disabled,
+          is_loading,
+          stretchy,
+          icon: ((iconLeft || iconRight) && !title && !children) || iconOnly,
+          has_icon_left: !!iconLeft,
+          has_icon_right: !!iconRight,
+        }),
+        ...props,
+      },
+      [
+        iconLeft && <Icon icon={iconLeft} size={20} key={0} />,
+        title ? <span>{title}</span> : children || null,
+        iconRight && <Icon icon={iconRight} size={20} key={2} />,
+      ]
+    )
+);
 
 export { Button };

src/components/node/NodeComments/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useMemo } from 'react';
+import React, { FC, useMemo, memo } from 'react';
 import { Comment } from '../Comment';
 import { Filler } from '~/components/containers/Filler';
 
@@ -10,7 +10,7 @@ interface IProps {
   comments?: IComment[];
 }
 
-const NodeComments: FC<IProps> = ({ comments }) => {
+const NodeComments: FC<IProps> = memo(({ comments }) => {
   const groupped: ICommentGroup[] = useMemo(() => comments.reduce(groupCommentsByUser, []), [
     comments,
   ]);
@@ -24,6 +24,6 @@ const NodeComments: FC<IProps> = ({ comments }) => {
       <Filler />
     </div>
   );
-};
+});
 
 export { NodeComments };

src/components/node/NodePanel/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useCallback, useEffect, useRef, useState } from 'react';
+import React, { FC, useCallback, useEffect, useRef, useState, memo } from 'react';
 import * as styles from './styles.scss';
 import { INode } from '~/redux/types';
 import { createPortal } from 'react-dom';
@@ -14,7 +14,7 @@ interface IProps {
   onLike: () => void;
 }
 
-const NodePanel: FC<IProps> = ({ node, layout, can_edit, can_like, onEdit, onLike }) => {
+const NodePanel: FC<IProps> = memo(({ node, layout, can_edit, can_like, onEdit, onLike }) => {
   const [stack, setStack] = useState(false);
 
   const ref = useRef(null);
@@ -64,6 +64,6 @@ const NodePanel: FC<IProps> = ({ node, layout, can_edit, can_like, onEdit, onLik
       )}
     </div>
   );
-};
+});
 
 export { NodePanel };

src/components/node/NodeTags/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, memo } from 'react';
 import { Tags } from '../Tags';
 import { ITag } from '~/redux/types';
 
@@ -8,8 +8,8 @@ interface IProps {
   onChange?: (tags: string[]) => void;
 }
 
-const NodeTags: FC<IProps> = ({ is_editable, tags, onChange }) => (
+const NodeTags: FC<IProps> = memo(({ is_editable, tags, onChange }) => (
   <Tags tags={tags} is_editable={is_editable} onTagsChange={onChange} />
-);
+));
 
 export { NodeTags };