Improve 'mobx' performance by adding @observer

Adding `@observer` to all React components can have a great positive impact on performance. You can see more info about it in this discussion: mobxjs/mobx#101
smiclea · Mar 29, 2018 · d2d6d27 · d2d6d27
1 parent 650386f
commit d2d6d27
Show file tree

Hide file tree

Showing 63 changed files with 126 additions and 0 deletions.
diff --git a/src/components/atoms/Arrow/index.jsx b/src/components/atoms/Arrow/index.jsx
@@ -15,6 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // @flow
 
 import React from 'react'
+import { observer } from 'mobx-react'
 import styled from 'styled-components'
 
 import Palette from '../../styleUtils/Palette'
@@ -48,6 +49,7 @@ type Props = {
   disabled?: boolean,
 }
 
+@observer
 class Arrow extends React.Component<Props> {
   static defaultProps: Props = {
     orientation: 'right',

diff --git a/src/components/atoms/Checkbox/index.jsx b/src/components/atoms/Checkbox/index.jsx
@@ -15,6 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // @flow
 
 import React from 'react'
+import { observer } from 'mobx-react'
 import styled, { css } from 'styled-components'
 
 import Palette from '../../styleUtils/Palette'
@@ -55,6 +56,7 @@ type Props = {
   disabled?: boolean,
   onChange?: (checked: boolean) => void,
 }
+@observer
 class Checkbox extends React.Component<Props> {
   handleClick() {
     if (this.props.disabled || !this.props.onChange) {

diff --git a/src/components/atoms/CopyButton/index.jsx b/src/components/atoms/CopyButton/index.jsx
@@ -15,6 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // @flow
 
 import React from 'react'
+import { observer } from 'mobx-react'
 import styled from 'styled-components'
 
 import StyleProps from '../../styleUtils/StyleProps'
@@ -31,6 +32,7 @@ const Wrapper = styled.span`
   transition: all ${StyleProps.animations.swift};
 `
 
+@observer
 class CopyButton extends React.Component<{}> {
   render() {
     return (

diff --git a/src/components/atoms/CopyValue/index.jsx b/src/components/atoms/CopyValue/index.jsx
@@ -15,6 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // @flow
 
 import React from 'react'
+import { observer } from 'mobx-react'
 import styled from 'styled-components'
 
 import CopyButton from '../CopyButton'
@@ -43,6 +44,7 @@ type Props = {
   width?: string,
   maxWidth?: string,
 }
+@observer
 class CopyValue extends React.Component<Props> {
   handleCopyIdClick(e: Event) {
     e.stopPropagation()

diff --git a/src/components/atoms/EndpointLogos/index.jsx b/src/components/atoms/EndpointLogos/index.jsx
@@ -15,6 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // @flow
 
 import React from 'react'
+import { observer } from 'mobx-react'
 import styled, { css } from 'styled-components'
 
 import Generic from './images/Generic'
@@ -119,6 +120,7 @@ type Props = {
   height: number,
   disabled?: boolean,
 }
+@observer
 class EndpointLogos extends React.Component<Props> {
   static defaultProps: Props = {
     height: 64,

diff --git a/src/components/atoms/InfoIcon/index.jsx b/src/components/atoms/InfoIcon/index.jsx
@@ -15,6 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // @flow
 
 import React from 'react'
+import { observer } from 'mobx-react'
 import styled from 'styled-components'
 
 import questionImage from './images/question.svg'
@@ -35,6 +36,7 @@ type Props = {
   marginLeft?: number,
   warning?: boolean,
 }
+@observer
 class InfoIcon extends React.Component<Props> {
   render() {
     return (

diff --git a/src/components/atoms/PasswordValue/index.jsx b/src/components/atoms/PasswordValue/index.jsx
@@ -15,6 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // @flow
 
 import React from 'react'
+import { observer } from 'mobx-react'
 import styled from 'styled-components'
 
 import StyleProps from '../../styleUtils/StyleProps'
@@ -51,6 +52,7 @@ type Props = {
 type State = {
   show: boolean,
 }
+@observer
 class PasswordValue extends React.Component<Props, State> {
   constructor() {
     super()

diff --git a/src/components/atoms/ProgressBar/index.jsx b/src/components/atoms/ProgressBar/index.jsx
@@ -15,6 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // @flow
 
 import React from 'react'
+import { observer } from 'mobx-react'
 import styled from 'styled-components'
 
 import Palette from '../../styleUtils/Palette'
@@ -35,6 +36,7 @@ const Progress = styled.div`
   width: ${(props: Props) => props.width}%;
 `
 
+@observer
 class ProgressBar extends React.Component<Props> {
   render() {
     return (

diff --git a/src/components/atoms/RadioInput/index.jsx b/src/components/atoms/RadioInput/index.jsx
@@ -15,6 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // @flow
 
 import React from 'react'
+import { observer } from 'mobx-react'
 import styled from 'styled-components'
 
 import Palette from '../../styleUtils/Palette'
@@ -53,6 +54,7 @@ const InputStyled = styled.input`
 type Props = {
   label: string,
 }
+@observer
 class RadioInput extends React.Component<Props> {
   render() {
     return (

diff --git a/src/components/atoms/ReloadButton/index.jsx b/src/components/atoms/ReloadButton/index.jsx
@@ -15,6 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // @flow
 
 import React from 'react'
+import { observer } from 'mobx-react'
 import styled, { injectGlobal } from 'styled-components'
 
 import reloadImage from './images/reload.svg'
@@ -36,6 +37,7 @@ injectGlobal`
 type Props = {
   onClick: () => void,
 }
+@observer
 class ReloadButton extends React.Component<Props> {
   wrapper: HTMLElement
   timeout: ?TimeoutID

diff --git a/src/components/atoms/SearchButton/index.jsx b/src/components/atoms/SearchButton/index.jsx
@@ -15,6 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // @flow
 
 import React from 'react'
+import { observer } from 'mobx-react'
 import styled from 'styled-components'
 
 import Palette from '../../styleUtils/Palette'
@@ -39,6 +40,7 @@ type Props = {
   primary: boolean,
   useFilterIcon: boolean,
 }
+@observer
 class SearchButton extends React.Component<Props> {
   render() {
     return (

diff --git a/src/components/atoms/StatusIcon/index.jsx b/src/components/atoms/StatusIcon/index.jsx
@@ -15,6 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // @flow
 
 import React from 'react'
+import { observer } from 'mobx-react'
 import styled, { css } from 'styled-components'
 
 import Palette from '../../styleUtils/Palette'
@@ -75,6 +76,7 @@ const Wrapper = styled.div`
   ${props => statuses(props)[props.status]}
 `
 
+@observer
 class StatusIcon extends React.Component<Props> {
   render() {
     return (

diff --git a/src/components/atoms/StatusImage/index.jsx b/src/components/atoms/StatusImage/index.jsx
@@ -15,6 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // @flow
 
 import React from 'react'
+import { observer } from 'mobx-react'
 import styled, { css } from 'styled-components'
 import StyleProps from '../../styleUtils/StyleProps'
 import Palette from '../../styleUtils/Palette'
@@ -73,6 +74,7 @@ const CircleProgressBar = styled.circle`
   transition: stroke-dashoffset ${StyleProps.animations.swift};
 `
 
+@observer
 class StatusImage extends React.Component<Props> {
   static defaultProps: $Shape<Props> = {
     status: 'RUNNING',

diff --git a/src/components/atoms/StatusPill/index.jsx b/src/components/atoms/StatusPill/index.jsx
@@ -15,6 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // @flow
 
 import React from 'react'
+import { observer } from 'mobx-react'
 import styled, { css } from 'styled-components'
 
 import Palette from '../../styleUtils/Palette'
@@ -102,6 +103,7 @@ type Props = {
   alert: boolean,
   small: boolean,
 }
+@observer
 class StatusPill extends React.Component<Props> {
   static defaultProps: $Shape<Props> = {
     status: 'INFO',

diff --git a/src/components/atoms/Switch/index.jsx b/src/components/atoms/Switch/index.jsx
@@ -15,6 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // @flow
 
 import React from 'react'
+import { observer } from 'mobx-react'
 import styled from 'styled-components'
 
 import Palette from '../../styleUtils/Palette'
@@ -130,6 +131,7 @@ type Props = {
 type State = {
   lastChecked: ?boolean,
 }
+@observer
 class Switch extends React.Component<Props, State> {
   static defaultProps: $Shape<Props> = {
     checkedLabel: 'Yes',

diff --git a/src/components/atoms/TextArea/index.jsx b/src/components/atoms/TextArea/index.jsx
@@ -15,6 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // @flow
 
 import React from 'react'
+import { observer } from 'mobx-react'
 import styled from 'styled-components'
 import Palette from '../../styleUtils/Palette'
 import StyleProps from '../../styleUtils/StyleProps'
@@ -60,6 +61,7 @@ const Input = styled.textarea`
   }
 `
 
+@observer
 class TextArea extends React.Component<{}> {
   render() {
     return (

diff --git a/src/components/atoms/ToggleButtonBar/index.jsx b/src/components/atoms/ToggleButtonBar/index.jsx
@@ -15,6 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // @flow
 
 import React from 'react'
+import { observer } from 'mobx-react'
 import styled from 'styled-components'
 
 import Palette from '../../styleUtils/Palette'
@@ -57,6 +58,7 @@ type Props = {
   onChange: (item: ItemType) => void,
   className?: string,
 }
+@observer
 class ToggleButtonBar extends React.Component<Props> {
   render() {
     if (!this.props.items) {

diff --git a/src/components/atoms/Tooltip/index.jsx b/src/components/atoms/Tooltip/index.jsx
@@ -15,6 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // @flow
 
 import React from 'react'
+import { observer } from 'mobx-react'
 import { injectGlobal } from 'styled-components'
 import ReactTooltip from 'react-tooltip'
 
@@ -40,6 +41,7 @@ injectGlobal`
   }
 `
 
+@observer
 class Tooltip extends React.Component<{}> {
   static rebuild = () => {
     ReactTooltip.rebuild()

diff --git a/src/components/molecules/AssessedVmListItem/index.jsx b/src/components/molecules/AssessedVmListItem/index.jsx
@@ -15,6 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // @flow
 
 import React from 'react'
+import { observer } from 'mobx-react'
 import styled from 'styled-components'
 
 import Checkbox from '../../atoms/Checkbox'
@@ -67,6 +68,7 @@ type Props = {
   selectedVmSize: ?VmSize,
   recommendedVmSize: string,
 }
+@observer
 class AssessedVmListItem extends React.Component<Props> {
   getColumnWidth(index: number) {
     let width = parseInt(this.props.columnsWidths[index], 10)

diff --git a/src/components/molecules/AssessmentListItem/index.jsx b/src/components/molecules/AssessmentListItem/index.jsx
@@ -15,6 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // @flow
 
 import React from 'react'
+import { observer } from 'mobx-react'
 import styled from 'styled-components'
 import moment from 'moment'
 
@@ -102,6 +103,7 @@ type Props = {
   item: Assessment,
   onClick: () => void,
 }
+@observer
 class AssessmentListItem extends React.Component<Props> {
   render() {
     let status = this.props.item.properties.status.toUpperCase()

diff --git a/src/components/molecules/DatetimePicker/index.jsx b/src/components/molecules/DatetimePicker/index.jsx
@@ -15,6 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // @flow
 
 import React from 'react'
+import { observer } from 'mobx-react'
 import styled, { injectGlobal } from 'styled-components'
 import Datetime from 'react-datetime'
 import moment from 'moment'
@@ -60,6 +61,7 @@ type State = {
   showPicker: boolean,
   date: ?moment$Moment,
 }
+@observer
 class DatetimePicker extends React.Component<Props, State> {
   itemMouseDown: boolean
 

diff --git a/src/components/molecules/DetailsNavigation/index.jsx b/src/components/molecules/DetailsNavigation/index.jsx
@@ -15,6 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // @flow
 
 import React from 'react'
+import { observer } from 'mobx-react'
 import styled from 'styled-components'
 
 import Palette from '../../styleUtils/Palette'
@@ -40,6 +41,7 @@ type Props = {
   itemType?: string,
   customHref?: (item: ItemType) => ?string,
 }
+@observer
 class DetailsNavigation extends React.Component<Props> {
   renderItems() {
     return (

diff --git a/src/components/molecules/Dropdown/index.jsx b/src/components/molecules/Dropdown/index.jsx
@@ -15,6 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // @flow
 
 import React from 'react'
+import { observer } from 'mobx-react'
 import styled from 'styled-components'
 import ReactDOM from 'react-dom'
 
@@ -113,6 +114,7 @@ type State = {
   showDropdownList: boolean,
   firstItemHover: boolean
 }
+@observer
 class Dropdown extends React.Component<Props, State> {
   static defaultProps: $Shape<Props> = {
     noSelectionMessage: 'Select an item',

diff --git a/src/components/molecules/DropdownFilter/index.jsx b/src/components/molecules/DropdownFilter/index.jsx
@@ -15,6 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // @flow
 
 import React from 'react'
+import { observer } from 'mobx-react'
 import styled from 'styled-components'
 
 import SearchInput from '../SearchInput'
@@ -74,6 +75,7 @@ type Props = {
 type State = {
   showDropdownList: boolean
 }
+@observer
 class DropdownFilter extends React.Component<Props, State> {
   static defaultProps: $Shape<Props> = {
     searchPlaceholder: 'Filter',

diff --git a/src/components/molecules/DropdownLink/index.jsx b/src/components/molecules/DropdownLink/index.jsx
@@ -15,6 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // @flow
 
 import React from 'react'
+import { observer } from 'mobx-react'
 import styled, { css } from 'styled-components'
 import ReactDOM from 'react-dom'
 
@@ -126,6 +127,7 @@ type State = {
   showDropdownList: boolean,
   searchText: string,
 }
+@observer
 class DropdownLink extends React.Component<Props, State> {
   static defaultProps: $Shape<Props> = {
     selectItemLabel: 'Select',