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,7 +22,8 @@ type IButtonProps = DetailedHTMLProps<
   iconOnly?: boolean;
 };
 
-const Button: FC<IButtonProps> = ({
+const Button: FC<IButtonProps> = memo(
+  ({
     className = '',
     size = 'normal',
     iconLeft,
@@ -39,7 +40,7 @@ const Button: FC<IButtonProps> = ({
     disabled,
     iconOnly,
     ...props
-}) =>
+  }) =>
     createElement(
       seamless || non_submitting ? 'div' : 'button',
       {
@@ -62,6 +63,7 @@ const Button: FC<IButtonProps> = ({
         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,7 +35,8 @@ type IProps = ReturnType<typeof mapStateToProps> &
   typeof mapDispatchToProps &
   RouteComponentProps<{ id: string }> & {};
 
-const NodeLayoutUnconnected: FC<IProps> = ({
+const NodeLayoutUnconnected: FC<IProps> = memo(
+  ({
     match: {
       params: { id },
     },
@@ -47,7 +48,7 @@ const NodeLayoutUnconnected: FC<IProps> = ({
     nodeEdit,
     nodeLike,
     nodeSetCoverImage,
-}) => {
+  }) => {
     const [layout, setLayout] = useState({});
 
     const updateLayout = useCallback(() => setLayout({}), []);
@@ -125,7 +126,8 @@ const NodeLayoutUnconnected: FC<IProps> = ({
         </Group>
       </Card>
     );
-};
+  }
+);
 
 const NodeLayout = connect(
   mapStateToProps,