chore(docs): replace HOCs with React.memo (#3550)

Author: layershifter

docs/src/components/ComponentDoc/ComponentControls/ComponentControls.js

@@ -3,7 +3,6 @@ import React from 'react'
 import universal from 'react-universal-component'
 import { Menu } from 'semantic-ui-react'
 
-import { updateForKeys } from 'docs/src/hoc'
 import { isBrowser } from 'src/lib'
 import ComponentControlsCopyLink from './ComponentControlsCopyLink'
 import ComponentControlsEditCode from './ComponentControlsEditCode'
@@ -12,10 +11,10 @@ import ComponentControlsShowHtml from './ComponentControlsShowHtml'
 
 const ComponentControlsCodeSandbox = isBrowser()
  ? universal(import('./ComponentControlsCodeSandbox'), {
- loading: () => (
- <Menu.Item disabled icon={{ loading: true, name: 'spinner', title: 'Loading...' }} />
- ),
- })
+  loading: () => (
+  <Menu.Item disabled icon={{ loading: true, name: 'spinner', title: 'Loading...' }} />
+  ),
+  })
  : () => null
 
 const ComponentControls = (props) => {
@@ -54,4 +53,4 @@ ComponentControls.propTypes = {
  showHTML: PropTypes.bool,
 }
 
-export default updateForKeys(['exampleCode', 'showCode', 'showHTML'])(ComponentControls)
+export default React.memo(ComponentControls)

docs/src/components/ComponentDoc/ComponentControls/ComponentControlsCodeSandbox.js

@@ -5,7 +5,6 @@ import CodeSandboxer from 'react-codesandboxer'
 import { Menu } from 'semantic-ui-react'
 
 import { externals } from 'docs/src/components/ComponentDoc/ComponentExample/renderConfig'
-import { updateForKeys } from 'docs/src/hoc'
 
 const appTemplate = `import React from "react";
 import ReactDOM from "react-dom";
@@ -50,7 +49,7 @@ ReactDOM.render(
 `
 const dependencies = _.mapValues(externals, () => 'latest')
 
-class ComponentControlsShowCode extends React.Component {
+class ComponentControlsCodeSandbox extends React.Component {
  static propTypes = {
  exampleCode: PropTypes.string.isRequired,
  }
@@ -123,4 +122,4 @@ class ComponentControlsShowCode extends React.Component {
  }
 }
 
-export default updateForKeys(['exampleCode'])(ComponentControlsShowCode)
+export default React.memo(ComponentControlsCodeSandbox)

docs/src/components/ComponentDoc/ComponentExample/ComponentExampleRenderEditor.js

@@ -4,7 +4,6 @@ import React, { PureComponent } from 'react'
 import { Button, Popup, Segment, Menu } from 'semantic-ui-react'
 
 import Editor, { EDITOR_BACKGROUND_COLOR } from 'docs/src/components/CodeEditor'
-import { updateForKeys } from 'docs/src/hoc'
 import formatCode from 'docs/src/utils/formatCode'
 
 const rootStyle = {
@@ -144,4 +143,4 @@ class ComponentExampleRenderEditor extends PureComponent {
  }
 }
 
-export default updateForKeys(['error', 'value'])(ComponentExampleRenderEditor)
+export default ComponentExampleRenderEditor

docs/src/components/ComponentDoc/ComponentExample/ComponentExampleRenderSource.js

@@ -2,7 +2,6 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import SourceRender from 'react-source-render'
 
-import { updateForKeys } from 'docs/src/hoc'
 import { babelConfig, externals } from './renderConfig'
 
 const resolver = (importPath, { displayName }) => {
@@ -42,4 +41,4 @@ ComponentExampleRenderSource.propTypes = {
  sourceCode: PropTypes.string.isRequired,
 }
 
-export default updateForKeys(['sourceCode'])(ComponentExampleRenderSource)
+export default React.memo(ComponentExampleRenderSource)

docs/src/components/ComponentDoc/ComponentProp/ComponentPropEnum.js

@@ -2,7 +2,6 @@ import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { updateForKeys } from 'docs/src/hoc'
 import ComponentPropExtra from './ComponentPropExtra'
 import ComponentPropToggle from './ComponentPropEnumToggle'
 import ComponentPropValue from './ComponentPropEnumValue'
@@ -18,7 +17,9 @@ const ComponentPropEnum = ({ limit, showAll, toggle, type, values }) => {
  {exceeds && <ComponentPropToggle toggle={toggle} total={values.length} showAll={showAll} />}
 
  <div>
- {_.map(sliced, value => <ComponentPropValue key={value}>{value}</ComponentPropValue>)}
+ {_.map(sliced, (value) => (
+ <ComponentPropValue key={value}>{value}</ComponentPropValue>
+ ))}
  {exceeds && !showAll && '...'}
  </div>
  </ComponentPropExtra>
@@ -37,4 +38,4 @@ ComponentPropEnum.propTypes = {
  values: PropTypes.array,
 }
 
-export default updateForKeys(['showAll', 'type', 'values'])(ComponentPropEnum)
+export default React.memo(ComponentPropEnum)

docs/src/components/ComponentDoc/ComponentProp/ComponentPropEnumToggle.js

@@ -1,8 +1,6 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { updateForKeys } from 'docs/src/hoc'
-
 const toggleStyle = {
  cursor: 'pointer',
 }
@@ -19,4 +17,4 @@ ComponentPropEnumToggle.propTypes = {
  total: PropTypes.number,
 }
 
-export default updateForKeys(['showAll'])(ComponentPropEnumToggle)
+export default React.memo(ComponentPropEnumToggle)

docs/src/components/ComponentDoc/ComponentProp/ComponentPropEnumValue.js

@@ -1,8 +1,6 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { neverUpdate } from 'docs/src/hoc'
-
 const spanStyle = {
  display: 'inline-block',
  paddingRight: '0.2em',
@@ -18,4 +16,6 @@ ComponentPropEnumValue.propTypes = {
  children: PropTypes.node,
 }
 
-export default neverUpdate(ComponentPropEnumValue)
+const areEqual = () => true
+
+export default React.memo(ComponentPropEnumValue, areEqual)

docs/src/components/ComponentDoc/ComponentProp/ComponentPropFunctionSignature.js

@@ -2,7 +2,6 @@ import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { neverUpdate } from 'docs/src/hoc'
 import ComponentPropExtra from './ComponentPropExtra'
 
 const descriptionStyle = {
@@ -20,7 +19,7 @@ const rowStyle = {
  flexDirection: 'row',
 }
 
-const getTagType = tag => (tag.type.type === 'AllLiteral' ? 'any' : tag.type.name)
+const getTagType = (tag) => (tag.type.type === 'AllLiteral' ? 'any' : tag.type.name)
 
 const ComponentPropFunctionSignature = ({ name, tags }) => {
  const params = _.filter(tags, { title: 'param' })
@@ -31,9 +30,9 @@ const ComponentPropFunctionSignature = ({ name, tags }) => {
  if (_.isEmpty(params) && !returns) return null
 
  const paramSignature = params
- .map(param => `${param.name}: ${getTagType(param)}`)
+ .map((param) => `${param.name}: ${getTagType(param)}`)
  // prevent object properties from showing as individual params
- .filter(p => !_.includes(p, '.'))
+ .filter((p) => !_.includes(p, '.'))
  .join(', ')
 
  const tagDescriptionRows = _.compact([...params, returns]).map((tag) => {
@@ -66,4 +65,6 @@ ComponentPropFunctionSignature.propTypes = {
  tags: PropTypes.array,
 }
 
-export default neverUpdate(ComponentPropFunctionSignature)
+const areEqual = () => true
+
+export default React.memo(ComponentPropFunctionSignature, areEqual)

docs/src/components/ComponentDoc/ComponentProp/ComponentPropHeader.js

@@ -3,8 +3,6 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import { Menu } from 'semantic-ui-react'
 
-import { updateForKeys } from 'docs/src/hoc'
-
 const ComponentPropsComponents = ({
  activeDisplayName,
  displayNames,
@@ -15,7 +13,7 @@ const ComponentPropsComponents = ({
 
  return (
  <Menu color='green' compact size='small' secondary>
- {_.map(displayNames, displayName => (
+ {_.map(displayNames, (displayName) => (
  <Menu.Item
  key={displayName}
  active={activeDisplayName === displayName}
@@ -39,4 +37,8 @@ ComponentPropsComponents.propTypes = {
  parentDisplayName: PropTypes.string.isRequired,
 }
 
-export default updateForKeys(['activeDisplayName', 'parentDisplayName'])(ComponentPropsComponents)
+const areEqual = (prevProps, nextProps) =>
+ prevProps.activeDisplayName === nextProps.activeDisplayName &&
+ prevProps.parentDisplayName === nextProps.parentDisplayName
+
+export default React.memo(ComponentPropsComponents, areEqual)