fix: stop unnecessary re-rendering

Author: Lodin

__tests__/FixedSizeTree.spec.tsx

@@ -41,7 +41,11 @@ describe('FixedSizeTree', () => {
 
   function* treeWalker(
     refresh: boolean,
-  ): IterableIterator<FixedSizeNodeData<ExtendedData> | string | symbol> {
+  ): Generator<
+    FixedSizeNodeData<ExtendedData> | string | symbol,
+    void,
+    boolean
+  > {
     const stack: StackElement[] = [];
 
     stack.push({
@@ -161,15 +165,26 @@ describe('FixedSizeTree', () => {
     expect(component.find(FixedSizeList).prop('children')).toBe(rowComponent);
   });
 
-  it('recomputes on new props', () => {
+  it('recomputes on new treeWalker', () => {
     treeWalkerSpy = jest.fn(treeWalker);
+
     component.setProps({
       treeWalker: treeWalkerSpy,
     });
 
     expect(treeWalkerSpy).toHaveBeenCalledWith(true);
   });
 
+  it('does not recompute if treeWalker is the same', () => {
+    treeWalkerSpy.mockClear();
+
+    component.setProps({
+      treeWalker: treeWalkerSpy,
+    });
+
+    expect(treeWalkerSpy).not.toHaveBeenCalled();
+  });
+
   describe('component instance', () => {
     let treeInstance: FixedSizeTree<ExtendedData>;
 

__tests__/VariableSizeTree.spec.tsx

@@ -42,7 +42,11 @@ describe('VariableSizeTree', () => {
 
   function* treeWalker(
     refresh: boolean,
-  ): IterableIterator<VariableSizeNodeData<ExtendedData> | string | symbol> {
+  ): Generator<
+    VariableSizeNodeData<ExtendedData> | string | symbol,
+    void,
+    boolean
+  > {
     const stack: StackElement[] = [];
 
     stack.push({
@@ -171,15 +175,26 @@ describe('VariableSizeTree', () => {
     );
   });
 
-  it('recomputes on new props', () => {
+  it('recomputes on new treeWalker', () => {
     treeWalkerSpy = jest.fn(treeWalker);
+
     component.setProps({
       treeWalker: treeWalkerSpy,
     });
 
     expect(treeWalkerSpy).toHaveBeenCalledWith(true);
   });
 
+  it('does not recompute if treeWalker is the same', () => {
+    treeWalkerSpy.mockClear();
+
+    component.setProps({
+      treeWalker: treeWalkerSpy,
+    });
+
+    expect(treeWalkerSpy).not.toHaveBeenCalled();
+  });
+
   describe('component instance', () => {
     let treeInstance: VariableSizeTree<ExtendedData>;
 
@@ -599,7 +614,7 @@ describe('VariableSizeTree', () => {
           .instance() as VariableSizeList;
 
         const resetAfterIndexSpy = spyOn(listInstance, 'resetAfterIndex');
-        const order = component.state('order');
+        const order = component.state('order')!;
         const foo3 = component.state('records')['foo-3'];
 
         foo3.resize(100, true);

src/FixedSizeTree.tsx

@@ -112,12 +112,15 @@ export default class FixedSizeTree<T> extends React.PureComponent<
     props: FixedSizeTreeProps<{}>,
     state: FixedSizeTreeState<{}>,
   ): Partial<FixedSizeTreeState<{}>> {
-    const {children: component, itemData: treeData} = props;
+    const {children: component, itemData: treeData, treeWalker} = props;
+    const {treeWalker: oldTreeWalker, order} = state;
 
     return {
       component,
       treeData,
-      ...computeTree({refreshNodes: true}, props, state),
+      ...(treeWalker !== oldTreeWalker || !order
+        ? computeTree({refreshNodes: true}, props, state)
+        : null),
     };
   }
 
@@ -126,16 +129,11 @@ export default class FixedSizeTree<T> extends React.PureComponent<
   public constructor(props: FixedSizeTreeProps<T>, context: any) {
     super(props, context);
 
-    const initialState: FixedSizeTreeState<T> = {
+    this.state = {
       component: props.children,
-      order: [],
       recomputeTree: this.recomputeTree.bind(this),
       records: {},
-    };
-
-    this.state = {
-      ...initialState,
-      ...computeTree({refreshNodes: true}, props, initialState),
+      treeWalker: props.treeWalker,
     };
   }
 
@@ -153,7 +151,7 @@ export default class FixedSizeTree<T> extends React.PureComponent<
   }
 
   public scrollToItem(id: string | symbol, align?: Align): void {
-    this.list.current?.scrollToItem(this.state.order.indexOf(id) || 0, align);
+    this.list.current?.scrollToItem(this.state.order!.indexOf(id) || 0, align);
   }
 
   public render(): React.ReactNode {
@@ -163,7 +161,7 @@ export default class FixedSizeTree<T> extends React.PureComponent<
       <FixedSizeList
         {...rest}
         itemData={this.state}
-        itemCount={this.state.order.length}
+        itemCount={this.state.order!.length}
         ref={this.list}
       >
         {rowComponent!}

src/VariableSizeTree.tsx

@@ -163,12 +163,15 @@ export default class VariableSizeTree<T> extends React.PureComponent<
     props: VariableSizeTreeProps<{}>,
     state: VariableSizeTreeState<{}>,
   ): Partial<VariableSizeTreeState<{}>> {
-    const {children: component, itemData: treeData} = props;
+    const {children: component, itemData: treeData, treeWalker} = props;
+    const {treeWalker: oldTreeWalker, order} = state;
 
     return {
       component,
       treeData,
-      ...computeTree({refreshNodes: true}, props, state),
+      ...(treeWalker !== oldTreeWalker || !order
+        ? computeTree({refreshNodes: true}, props, state)
+        : null),
     };
   }
 
@@ -179,17 +182,12 @@ export default class VariableSizeTree<T> extends React.PureComponent<
 
     this.getItemSize = this.getItemSize.bind(this);
 
-    const initialState: VariableSizeTreeState<T> = {
+    this.state = {
       component: props.children,
-      order: [],
       recomputeTree: this.recomputeTree.bind(this),
       records: {},
       resetAfterId: this.resetAfterId.bind(this),
-    };
-
-    this.state = {
-      ...initialState,
-      ...computeTree({refreshNodes: true}, props, initialState),
+      treeWalker: props.treeWalker,
     };
   }
 
@@ -215,7 +213,7 @@ export default class VariableSizeTree<T> extends React.PureComponent<
     shouldForceUpdate: boolean = false,
   ): void {
     this.list.current?.resetAfterIndex(
-      this.state.order.indexOf(id),
+      this.state.order!.indexOf(id),
       shouldForceUpdate,
     );
   }
@@ -225,7 +223,7 @@ export default class VariableSizeTree<T> extends React.PureComponent<
   }
 
   public scrollToItem(id: string | symbol, align?: Align): void {
-    this.list.current?.scrollToItem(this.state.order.indexOf(id) || 0, align);
+    this.list.current?.scrollToItem(this.state.order!.indexOf(id) || 0, align);
   }
 
   public render(): React.ReactNode {
@@ -235,7 +233,7 @@ export default class VariableSizeTree<T> extends React.PureComponent<
       <VariableSizeList
         {...rest}
         itemData={this.state}
-        itemCount={this.state.order.length}
+        itemCount={this.state.order!.length}
         // tslint:disable-next-line:no-unbound-method
         itemSize={itemSize || this.getItemSize}
         ref={this.list}
@@ -248,6 +246,6 @@ export default class VariableSizeTree<T> extends React.PureComponent<
   private getItemSize(index: number): number {
     const {order, records} = this.state;
 
-    return records[order[index] as string].height;
+    return records[order![index] as string].height;
   }
 }

src/utils.tsx

@@ -2,6 +2,10 @@
 import * as React from 'react';
 import {ListChildComponentProps} from 'react-window';
 
+export type TreeWalker<T> = (
+  refresh: boolean,
+) => Generator<T | string | symbol, void, boolean>;
+
 export type CommonNodeData<T> = {
   /**
    * Unique ID of the current node. Will be used to identify the node to change
@@ -42,9 +46,7 @@ export type CommonNodeComponentProps<TData extends CommonNodeData<T>, T> = Omit<
 
 export type TreeProps<TData extends CommonNodeData<T>, T> = {
   readonly rowComponent?: React.ComponentType<ListChildComponentProps>;
-  readonly treeWalker: (
-    refresh: boolean,
-  ) => Generator<TData | string | symbol, void, boolean>;
+  readonly treeWalker: TreeWalker<TData>;
 };
 
 export type TreeState<
@@ -55,10 +57,11 @@ export type TreeState<
   T
 > = {
   readonly component: React.ComponentType<TNodeComponentProps>;
-  readonly order: ReadonlyArray<string | symbol>;
+  readonly order?: ReadonlyArray<string | symbol>;
   readonly records: Record<string, TNodeRecord>;
   readonly treeData?: any;
   readonly recomputeTree: (options?: TUpdateOptions) => Promise<void>;
+  readonly treeWalker: TreeWalker<TData>;
 };
 
 export const Row: React.FunctionComponent<ListChildComponentProps> = ({