Minor performance fixes (#207)

Trying to reduce React work when switching between focus objects
by memoizing components and callback functions. Overall — probably
achieved slight improvement.

src/ensembl/src/content/app/browser/Browser.tsx

-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useCallback } from 'react';
 import { useLocation, useParams } from 'react-router-dom';
 import { connect } from 'react-redux';
 import { replace, Replace } from 'connected-react-router';
@@ -141,7 +141,7 @@ export const Browser = (props: BrowserProps) => {
     props.setDataFromUrlAndSave(payload);
   };
 
-  const changeSelectedSpecies = (genomeId: string) => {
+  const changeSelectedSpecies = useCallback((genomeId: string) => {
     const { allChrLocations, allActiveEnsObjectIds } = props;
     const chrLocation = allChrLocations[genomeId];
     const activeEnsObjectId = allActiveEnsObjectIds[genomeId];
@@ -153,7 +153,7 @@ export const Browser = (props: BrowserProps) => {
     };
 
     props.replace(urlFor.browser(params));
-  };
+  }, []);
 
   // handle url changes
   useEffect(() => {

src/ensembl/src/content/app/browser/browser-app-bar/BrowserAppBar.tsx

-import React from 'react';
+import React, { memo, useMemo } from 'react';
 import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
+import isEqual from 'lodash/isEqual';
 
 import * as urlFor from 'src/shared/helpers/urlHelper';
 import { AppName } from 'src/global/globalConfig';
@@ -24,15 +25,20 @@ type BrowserAppBarProps = {
 };
 
 const BrowserAppBar = (props: BrowserAppBarProps) => {
-  const speciesTabs = props.species.map((species, index) => (
-    <FocusableSelectedSpecies
-      key={index}
-      species={species}
-      isActive={species.genome_id === props.activeGenomeId}
-      onClick={() => props.onSpeciesSelect(species.genome_id)}
-    />
-  ));
-  const speciesSelectorLink = <Link to={urlFor.speciesSelector()}>Change</Link>;
+  const speciesTabs = useMemo(() => {
+    return props.species.map((species, index) => (
+      <FocusableSelectedSpecies
+        key={index}
+        species={species}
+        isActive={species.genome_id === props.activeGenomeId}
+        onClick={() => props.onSpeciesSelect(species.genome_id)}
+      />
+    ));
+  }, [props.species]);
+  const speciesSelectorLink = useMemo(() => {
+    return <Link to={urlFor.speciesSelector()}>Change</Link>;
+  }, []);
+
   const wrappedSpecies = (
     <SpeciesTabsWrapper
       isWrappable={false}
@@ -55,4 +61,4 @@ const mapStateToProps = (state: RootState) => ({
   activeGenomeId: getBrowserActiveGenomeId(state)
 });
 
-export default connect(mapStateToProps)(BrowserAppBar);
+export default connect(mapStateToProps)(memo(BrowserAppBar, isEqual));

src/ensembl/src/content/app/browser/browser-image/BrowserImage.tsx

-import React, { useRef, useEffect, useCallback } from 'react';
+import React, { useRef, useEffect, useCallback, memo } from 'react';
 import { connect } from 'react-redux';
 import classNames from 'classnames';
+import isEqual from 'lodash/isEqual';
 
 import BrowserCogList from '../browser-cog/BrowserCogList';
 import { ZmenuController } from 'src/content/app/browser/zmenu';
@@ -171,4 +172,4 @@ const mapDispatchToProps = {
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(BrowserImage);
+)(memo(BrowserImage, isEqual));

src/ensembl/src/content/app/browser/track-panel/TrackPanel.tsx

-import React, { useEffect } from 'react';
+import React, { useEffect, memo } from 'react';
 import { connect } from 'react-redux';
 import { useSpring, animated } from 'react-spring';
+import isEqual from 'lodash/isEqual';
 
 import TrackPanelBar from './track-panel-bar/TrackPanelBar';
 import TrackPanelList from './track-panel-list/TrackPanelList';
@@ -106,4 +107,4 @@ const mapDispatchToProps = {
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(TrackPanel);
+)(memo(TrackPanel, isEqual));

src/ensembl/src/content/app/browser/track-panel/track-panel-list/TrackPanelListItem.tsx

-import React, { MouseEvent, ReactNode, useEffect } from 'react';
+import React, { MouseEvent, ReactNode, useEffect, useCallback } from 'react';
 import { connect } from 'react-redux';
 import classNames from 'classnames';
 
@@ -115,7 +115,7 @@ export const TrackPanelListItem = (props: TrackPanelListItemProps) => {
     updateDrawerView(viewName);
   };
 
-  const drawerViewButtonHandler = () => {
+  const drawerViewButtonHandler = useCallback(() => {
     const viewName = track.track_id;
 
     if (drawerView !== viewName) {
@@ -127,7 +127,7 @@ export const TrackPanelListItem = (props: TrackPanelListItemProps) => {
     }
 
     updateDrawerView(viewName);
-  };
+  }, [track.track_id, drawerView]);
 
   const toggleExpand = () => {
     const { track_id: trackId } = props.track;
@@ -135,7 +135,7 @@ export const TrackPanelListItem = (props: TrackPanelListItemProps) => {
     props.updateCollapsedTrackIds({ trackId, isCollapsed: !isCollapsed });
   };
 
-  const toggleTrack = () => {
+  const toggleTrack = useCallback(() => {
     const newStatus =
       trackStatus === Status.ACTIVE ? Status.INACTIVE : Status.ACTIVE;
 
@@ -168,7 +168,7 @@ export const TrackPanelListItem = (props: TrackPanelListItemProps) => {
         }
       });
     }
-  };
+  }, [trackStatus, activeGenomeId, activeEnsObjectId, track.track_id]);
 
   const updateGenomeBrowser = (status: Status) => {
     const currentTrackStatus = status === Status.ACTIVE ? 'on' : 'off';

src/ensembl/src/header/Header.tsx

-import React, { memo, FunctionComponent } from 'react';
+import React from 'react';
 import { Link } from 'react-router-dom';
 
 import config from 'config';
@@ -35,7 +35,7 @@ export const Copyright = () => (
   </div>
 );
 
-export const Header: FunctionComponent<HeaderProps> = () => (
+export const Header = () => (
   <header>
     <div className={styles.topBar}>
       <div>
@@ -50,4 +50,4 @@ export const Header: FunctionComponent<HeaderProps> = () => (
   </header>
 );
 
-export default memo(Header);
+export default Header;

src/ensembl/src/header/launchbar/LaunchbarContainer.tsx

 import React, { FunctionComponent, memo } from 'react';
 import { connect } from 'react-redux';
+import isEqual from 'lodash/isEqual';
 
 import { getEnabledCommittedSpecies } from 'src/content/app/species-selector/state/speciesSelectorSelectors';
 
@@ -20,7 +21,7 @@ type LaunchbarContainerProps = StateProps & OwnProps;
 
 export const LaunchbarContainer: FunctionComponent<
   LaunchbarContainerProps
-> = memo((props) => <Launchbar {...props} />);
+> = memo((props) => <Launchbar {...props} />, isEqual);
 
 const mapStateToProps = (state: RootState): StateProps => ({
   launchbarExpanded: getLaunchbarExpanded(state),

src/ensembl/src/shared/components/image-button/ImageButton.test.tsx

@@ -3,7 +3,7 @@ import { act } from 'react-dom/test-utils';
 import { mount } from 'enzyme';
 import faker from 'faker';
 
-import ImageButton from './ImageButton';
+import { ImageButton } from './ImageButton';
 import ImageHolder from './ImageHolder';
 
 import Tooltip from 'src/shared/components/tooltip/Tooltip';

src/ensembl/src/shared/components/image-button/ImageButton.tsx

-import React from 'react';
+import React, { memo } from 'react';
+import isEqual from 'lodash/isEqual';
 
 import useHover from 'src/shared/hooks/useHover';
 
@@ -25,7 +26,7 @@ type Props = {
   onClick?: () => void;
 };
 
-const ImageButton = (props: Props) => {
+export const ImageButton = (props: Props) => {
   const [hoverRef, isHovered] = useHover<HTMLDivElement>();
 
   const handleClick = () => {
@@ -63,4 +64,4 @@ ImageButton.defaultProps = {
   image: ''
 };
 
-export default ImageButton;
+export default memo(ImageButton, isEqual);

src/ensembl/src/shared/components/image-button/ImageHolder.tsx

-import React from 'react';
+import React, { memo } from 'react';
 import classNames from 'classnames';
+import isEqual from 'lodash/isEqual';
 
 import { Status } from 'src/shared/types/status';
 
@@ -29,4 +30,4 @@ const ImageHolder = (props: Props) => {
   );
 };
 
-export default ImageHolder;
+export default memo(ImageHolder, isEqual);

src/ensembl/src/shared/components/species-tabs-wrapper/SingleLineSpeciesWrapper.tsx

-import React, { ReactElement, useState, useEffect, useRef } from 'react';
+import React, { ReactElement, useState, useEffect, useRef, memo } from 'react';
+import isEqual from 'lodash/isEqual';
 
 import useResizeObserver from 'src/shared/hooks/useResizeObserver';
 import { getSpeciesItemWidths } from './speciesTabsWrapperHelpers';
@@ -143,4 +144,4 @@ const SingleLineWrapper = (props: Props) => {
   );
 };
 
-export default SingleLineWrapper;
+export default memo(SingleLineWrapper, isEqual);