Refactor(NoteList): Use createRef() instead of ref function (#1811)

Keeping up with React standards. This patch replaces the use of a ref function with a `createRef()`. This will end up making our types easier. This is part of broader work to separate modifying the search parameters from actually filtering the notes and was originally created as part of an exploratory PR #1807.
Automattic · Jan 7, 2020 · a27d526 · a27d526
1 parent 2fbb8fc
commit a27d526
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 6 deletions.
diff --git a/RELEASE-NOTES.txt b/RELEASE-NOTES.txt
@@ -25,7 +25,7 @@
 - Added React Hooks ESLint Plugin [#1789](https://github.com/Automattic/simplenote-electron/pull/1789)
 - Added end-to-end testing with Spectron [#1773](https://github.com/Automattic/simplenote-electron/pull/1773)
 - Removed a workaround for indexing note pinned status [#1795](https://github.com/Automattic/simplenote-electron/pull/1795)
-- Maintenance cleanups [#1796](https://github.com/Automattic/simplenote-electron/pull/1796), [#1797](https://github.com/Automattic/simplenote-electron/pull/1797), [#1808](https://github.com/Automattic/simplenote-electron/pull/1808), [#1809](https://github.com/Automattic/simplenote-electron/pull/1809), [#1810](https://github.com/Automattic/simplenote-electron/pull/1810)
+- Maintenance cleanups [#1796](https://github.com/Automattic/simplenote-electron/pull/1796), [#1797](https://github.com/Automattic/simplenote-electron/pull/1797), [#1808](https://github.com/Automattic/simplenote-electron/pull/1808), [#1809](https://github.com/Automattic/simplenote-electron/pull/1809), [#1810](https://github.com/Automattic/simplenote-electron/pull/1810), [#1811](https://github.com/Automattic/simplenote-electron/pull/1811)
 - Updated dependencies [#1802](https://github.com/Automattic/simplenote-electron/pull/1802)
 
 ## [v1.13.0]

diff --git a/lib/note-list/index.tsx b/lib/note-list/index.tsx
@@ -12,7 +12,7 @@
  * row height calculations should be double-checked
  * against performance regressions.
  */
-import React, { Component, Fragment } from 'react';
+import React, { Component, Fragment, createRef } from 'react';
 import PropTypes from 'prop-types';
 import { AutoSizer, List } from 'react-virtualized';
 import PublishIcon from '../icons/feed';
@@ -299,6 +299,8 @@ const createCompositeNoteList = (notes, filter, tagResultsFound) => {
 export class NoteList extends Component {
   static displayName = 'NoteList';
 
+  list = createRef();
+
   static propTypes = {
     closeNote: PropTypes.func.isRequired,
     filter: PropTypes.string.isRequired,
@@ -320,7 +322,7 @@ export class NoteList extends Component {
      * performance hits due to row height computation
      */
     this.recomputeHeights = debounce(
-      () => this.list && this.list.recomputeRowHeights(),
+      () => this.list.current && this.list.current.recomputeRowHeights(),
       TYPING_DEBOUNCE_DELAY,
       { maxWait: TYPING_DEBOUNCE_MAX }
     );
@@ -391,8 +393,6 @@ export class NoteList extends Component {
     return true;
   };
 
-  refList = r => (this.list = r);
-
   toggleShortcuts = doEnable => {
     if (doEnable) {
       window.addEventListener('keydown', this.handleShortcut, true);
@@ -454,7 +454,7 @@ export class NoteList extends Component {
               <AutoSizer>
                 {({ height, width }) => (
                   <List
-                    ref={this.refList}
+                    ref={this.list}
                     estimatedRowSize={
                       ROW_HEIGHT_BASE +
                       ROW_HEIGHT_LINE * maxPreviewLines[noteDisplay]