optimized node layout rerenders

package.json

@@ -104,6 +104,7 @@
     "sass-loader": "^7.3.1",
     "sass-resources-loader": "^2.0.0",
     "scrypt": "^6.0.3",
+    "sticky-sidebar": "^3.3.1",
     "throttle-debounce": "^2.1.0",
     "tslint": "^5.20.0",
     "tslint-config-airbnb": "^5.11.2",

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> = ({
+const Button: FC<IButtonProps> = memo(
-  className = '',
+  ({
-  size = 'normal',
+    className = '',
-  iconLeft,
+    size = 'normal',
-  iconRight,
+    iconLeft,
-  children,
+    iconRight,
-  seamless = false,
+    children,
-  transparent = false,
+    seamless = false,
-  non_submitting = false,
+    transparent = false,
-  red = false,
+    non_submitting = false,
-  grey = false,
+    red = false,
-  is_loading,
+    grey = false,
-  title,
+    is_loading,
-  stretchy,
+    title,
-  disabled,
+    stretchy,
-  iconOnly,
+    disabled,
-  ...props
+    iconOnly,
-}) =>
+    ...props
-  createElement(
+  }) =>
-    seamless || non_submitting ? 'div' : 'button',
+    createElement(
-    {
+      seamless || non_submitting ? 'div' : 'button',
-      className: classnames(styles.button, className, styles[size], {
+      {
-        red,
+        className: classnames(styles.button, className, styles[size], {
-        grey,
+          red,
-        seamless,
+          grey,
-        transparent,
+          seamless,
-        disabled,
+          transparent,
-        is_loading,
+          disabled,
-        stretchy,
+          is_loading,
-        icon: ((iconLeft || iconRight) && !title && !children) || iconOnly,
+          stretchy,
-        has_icon_left: !!iconLeft,
+          icon: ((iconLeft || iconRight) && !title && !children) || iconOnly,
-        has_icon_right: !!iconRight,
+          has_icon_left: !!iconLeft,
-      }),
+          has_icon_right: !!iconRight,
-      ...props,
+        }),
-    },
+        ...props,
-    [
+      },
-      iconLeft && <Icon icon={iconLeft} size={20} key={0} />,
+      [
-      title ? <span>{title}</span> : children || null,
+        iconLeft && <Icon icon={iconLeft} size={20} key={0} />,
-      iconRight && <Icon icon={iconRight} size={20} key={2} />,
+        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 };

src/containers/node/NodeLayout/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, createElement, useEffect, useCallback, useState, useMemo } from 'react';
+import React, { FC, createElement, useEffect, useCallback, useState, useMemo, memo } from 'react';
 import { RouteComponentProps } from 'react-router';
 import { connect } from 'react-redux';
 import { canEditNode, canLikeNode } from '~/utils/node';
@@ -35,97 +35,99 @@ type IProps = ReturnType<typeof mapStateToProps> &
   typeof mapDispatchToProps &
   RouteComponentProps<{ id: string }> & {};
 
-const NodeLayoutUnconnected: FC<IProps> = ({
+const NodeLayoutUnconnected: FC<IProps> = memo(
-  match: {
+  ({
-    params: { id },
+    match: {
-  },
+      params: { id },
-  node: { is_loading, is_loading_comments, comments = [], current: node, current_cover_image },
-  user,
-  user: { is_user },
-  nodeLoadNode,
-  nodeUpdateTags,
-  nodeEdit,
-  nodeLike,
-  nodeSetCoverImage,
-}) => {
-  const [layout, setLayout] = useState({});
-
-  const updateLayout = useCallback(() => setLayout({}), []);
-
-  useEffect(() => {
-    if (is_loading) return;
-    nodeLoadNode(parseInt(id, 10), null);
-  }, [nodeLoadNode, id]);
-
-  const onTagsChange = useCallback(
-    (tags: string[]) => {
-      nodeUpdateTags(node.id, tags);
     },
-    [node, nodeUpdateTags]
+    node: { is_loading, is_loading_comments, comments = [], current: node, current_cover_image },
-  );
+    user,
+    user: { is_user },
+    nodeLoadNode,
+    nodeUpdateTags,
+    nodeEdit,
+    nodeLike,
+    nodeSetCoverImage,
+  }) => {
+    const [layout, setLayout] = useState({});
 
-  const can_edit = useMemo(() => canEditNode(node, user), [node, user]);
+    const updateLayout = useCallback(() => setLayout({}), []);
-  const can_like = useMemo(() => canLikeNode(node, user), [node, user]);
 
-  const block = node && node.type && NODE_COMPONENTS[node.type];
+    useEffect(() => {
-  const inline_block = node && node.type && NODE_INLINES[node.type];
+      if (is_loading) return;
+      nodeLoadNode(parseInt(id, 10), null);
+    }, [nodeLoadNode, id]);
 
-  const onEdit = useCallback(() => nodeEdit(node.id), [nodeEdit, node]);
+    const onTagsChange = useCallback(
-  const onLike = useCallback(() => nodeLike(node.id), [nodeLike, node]);
+      (tags: string[]) => {
+        nodeUpdateTags(node.id, tags);
+      },
+      [node, nodeUpdateTags]
+    );
 
-  useEffect(() => {
+    const can_edit = useMemo(() => canEditNode(node, user), [node, user]);
-    if (!node.cover) return;
+    const can_like = useMemo(() => canLikeNode(node, user), [node, user]);
-    nodeSetCoverImage(node.cover);
-    return () => nodeSetCoverImage(null);
-  }, [nodeSetCoverImage, node.cover]);
 
-  return (
+    const block = node && node.type && NODE_COMPONENTS[node.type];
-    <Card className={styles.node} seamless>
+    const inline_block = node && node.type && NODE_INLINES[node.type];
-      {block && createElement(block, { node, is_loading, updateLayout, layout })}
 
-      <NodePanel
+    const onEdit = useCallback(() => nodeEdit(node.id), [nodeEdit, node]);
-        node={node}
+    const onLike = useCallback(() => nodeLike(node.id), [nodeLike, node]);
-        layout={layout}
-        can_edit={can_edit}
-        can_like={can_like}
-        onEdit={onEdit}
-        onLike={onLike}
-      />
 
-      <Group>
+    useEffect(() => {
-        <Padder>
+      if (!node.cover) return;
-          <Group horizontal className={styles.content}>
+      nodeSetCoverImage(node.cover);
-            <Group className={styles.comments}>
+      return () => nodeSetCoverImage(null);
-              {inline_block && (
+    }, [nodeSetCoverImage, node.cover]);
-                <div className={styles.inline_block}>
-                  {createElement(inline_block, { node, is_loading, updateLayout, layout })}
-                </div>
-              )}
 
-              {is_loading_comments || !comments.length ? (
+    return (
-                <NodeNoComments is_loading={is_loading_comments} />
+      <Card className={styles.node} seamless>
-              ) : (
+        {block && createElement(block, { node, is_loading, updateLayout, layout })}
-                <NodeComments comments={comments} />
-              )}
 
-              {is_user && <CommentForm id={0} />}
+        <NodePanel
-            </Group>
+          node={node}
+          layout={layout}
+          can_edit={can_edit}
+          can_like={can_like}
+          onEdit={onEdit}
+          onLike={onLike}
+        />
 
-            <div className={styles.panel}>
+        <Group>
-              <Group style={{ flex: 1, minWidth: 0 }}>
+          <Padder>
-                <NodeTags is_editable={is_user} tags={node.tags} onChange={onTagsChange} />
+            <Group horizontal className={styles.content}>
+              <Group className={styles.comments}>
+                {inline_block && (
+                  <div className={styles.inline_block}>
+                    {createElement(inline_block, { node, is_loading, updateLayout, layout })}
+                  </div>
+                )}
 
-                <NodeRelated title="First album" />
+                {is_loading_comments || !comments.length ? (
+                  <NodeNoComments is_loading={is_loading_comments} />
+                ) : (
+                  <NodeComments comments={comments} />
+                )}
 
-                <NodeRelated title="Second album" />
+                {is_user && <CommentForm id={0} />}
               </Group>
-            </div>
+
-          </Group>
+              <div className={styles.panel}>
-        </Padder>
+                <Group style={{ flex: 1, minWidth: 0 }}>
-      </Group>
+                  <NodeTags is_editable={is_user} tags={node.tags} onChange={onTagsChange} />
-    </Card>
+
-  );
+                  <NodeRelated title="First album" />
-};
+
+                  <NodeRelated title="Second album" />
+                </Group>
+              </div>
+            </Group>
+          </Padder>
+        </Group>
+      </Card>
+    );
+  }
+);
 
 const NodeLayout = connect(
   mapStateToProps,