v2.4.0

• Updates dependencies to match other projects 4b1307e

v2.3.0...v2.4.0

React Utils - v2.3.0

Add Memo HOC

This update adds a new HOC called memo, which is an enhanced polyfill for the new React memo API.

This version of memo works just like React.memo, but is backwards compatible.

The enhancements include:

• A third argument that provides a componentDidUpdate lifecycle callback
• Hoists statics by default

Memo allows you to performantly created stateless-functional components, as it has a (shallow) prop comparison mechanism that protects the SFC from re-renders.

Examples

import React from 'react'
import memo from '@helpscout/react-utils/dist/memo'

const Kip = props => <div {...props} />
const MemoizedKip = memo(Kip)

Alternatively...

import React from 'react'
import memo from '@helpscout/react-utils/dist/memo'

const MemoizedKip = memo(function Kip(props) {
  return <div {...props} />
})

---

• Add Memo HOC (#18) 8be56c2
• Update Dev Dependencies (#17) 3f58a07

v2.2.0...v2.3.0

React Utils - v2.2.0

Update to Zero 3

This update bumps Zero to the latest Zero 3, which streamlines testing
improves building stability.

---

• Update Storybook for security fixes 1d0fbbd
• Remove unused dependencies e11abc9
• Update to Zero 3 (#16) faf4665

v2.1.1...v2.2.0

React Utils - v2.1.1

isPropValid: Add custom props to blacklist

This update adjusts the isPropValid function to add a custom black list,
starting with the prop action.

In HSDS: React development, we noticed that the prop action leaked through.

---

• isPropValid: Add custom props to blacklist (#15) 8742237

v2.1.0...v2.1.1

React Utils - v2.1.0

Add Fragment

This update adds a simple React.Fragment "polyfill" for React.Fragment.

It will render a native React.Fragment if supported. Otherwise, it will
wrap the children within a selector. Default is div.

Props

Props	Type	Description
selector	string	A selector to render. Default div.

Returns

React.Component: A "Fragment" wrapped React component

Examples

import Fragment from '@helpscout/react-utils/dist/Fragment'

const Pedro = () => (
  <Fragment>
    <Napoleon />
    <Debra />
  </Fragment>
)

Zero updates

This update also bumps @helpscout/zero to the latest version, allowing us to remove np and husky as dependencies.

---

• Add Fragment (#14) 6d63429

v2.0.1...v2.1.0

React Utils - v2.0.1

TS: Remove sourcemaps

This update removes sourcemaps from Typescript compiler.

The np package + npm scripts were also updated.

React Utils - v2.0.0

Convert to Typescript + Update all dependencies

This update convers react-utils to use Typescript 🎉.
Babel, Storybook, React, and friends have also been updated to their latest versions.

Some minor refactors were done during the flow -> Typescript conversion, as well
as updates to tests during the Enzyme 2 -> 3 update.

React Utils - v1.0.6

getDocumentFromComponent Fixes

This update fixes null handing for getDocumentFromComponent, specifically
for React v16.

The solution was to improve null handling for dash-get, the lower-level
get module used to retrieve the desired document object.

dash-get has been updated to v1.0.2 with the fix and additional tests
have been added to check for null within the internal React instance
object.

https://github.com/ItsJonQ/dash-get/releases/tag/v1.0.2

React Utils - v1.0.5

Add withSafeSetState HOC

This update adds a new HOC function, withSafeSetState. It enhances the
provided Wrapped component to ensure that setState only works if the
component is mounted.

---

withSafeSetState()(WrappedComponent)

Enhances the WrappedComponent's setState method to only work if the Component is mounted.

Arguments

Argument	Type	Description
WrappedComponent	React.Component	A React component.

Returns

React.Component: The enhanced React component.

Additional Methods

isComponentMounted()

Returns: boolean

The component is also provided with the method .isComponentMounted().

Note: This is different then React's native .isMounted() method, which they are deprecating.

Examples

import React from 'react'
import withSafeSetState from '@helpscout/react-utils/dist/withSafeSetState'

class Napoleon extends React.Component {
  ...
  componentWillUnmount() {
    setTimeout(() => {
      console.log('Tina, eat!')
      this.setState({
        feedTina: true
      })
    }, 1000)
  }
  ...
}

const EnhancedNapolean = withSafeSetState()(Napoleon)

// When EnhancedNapolean unmounts, the setState() method with feedTina will
// not be called. No warnings or errors will be thrown.

---

Update also resolves getDocumentFromComponent for certain React 16 versions:

#9

React Utils - v1.0.4

Make renderSpy (much) better, and add perf as an alias

GIF: Demo shows a Storybook example where I render the component a bunch of times. The same component as added twice. One that is updated from a prop change, and one that isn't (aka. "wasted" render).

This update improves renderSpy dramatically, adding in performance timing
features and wasted render capturing.

This experience is similar to Redux logger and React's deprecated performance
tools.