Unverified Commit 82540e9f authored by Andrey Azov's avatar Andrey Azov Committed by GitHub
Browse files

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.
parent 6e281b25
Pipeline #48936 passed with stages
in 4 minutes and 27 seconds
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(() => {
......
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));
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));
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));
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';
......
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;
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),
......
......@@ -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';
......
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);
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);
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);
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment