L&L on React 16.7.0 hooks

hooks.md

React 16.7.0 hooks

• Currently in alpha.2, but scheduled for release ~Q1 2019 React roadmap
• Opt in (100% backwards compatible)

3 things that suck in React

1. Reusing logic (wrapper hell) think HOCs & render prop functions
2. Reduce “giant” components (too much boiler plate logic split across lifecycle methods)

   class Foo extends React.Component {
       componentDidMount() {
           this.subscribeToSomething(this.props.id)
           this.fetchSomeData(this.props.id)
           this.startTimers()
       }
       
       componentDidUnmount() {
           this.unsubscribeFromSomething(this.props.id)
           this.cancelPendingRequests()
           this.stopTimers()
       }
       
       componentDidUpdate() { ... }
   }

3. Confusing classes (hard for humans and machines)
   • convert function component to class component to add state (boiler plate volcano task)
   • function binding and scoping is weird (fat arrow/binding in constructor)
   • why start with function component if you may eventually need state
   • also difficult to implement hot reloading reliably
   • classes harder for compiler to optimize (no minification of function names, etc..)

• 3 symptoms of one problem (simpler smaller lightweight primitive) Mixins were original solution for this

Why Hooks?

• Make UI easier to implement
• Use state and lifecycle from function components
• Let you reuse stateful logic between components without introducing extra nesting in your tree (SS large_tree)
• Debugging
• Performance
  • compiler optimizations
  • function components that only re-render when an effect causes a change
• Handles lifecycle methods that we don't need (or care about)
  • componentWillMount
  • componentDidUpdate
  • shouldComponentUpdate
  • componentWillUnmount
• Widespread sharing of state and naming conventions (isSaving/isSubmitting/isFetching)
• Less manual work/boiler plate setup across components

Implementation

• IconButton (not real world, but shows simple implementation)

  const [width, setWidth] = React.useState(window.innerWidth)

• Card example (real world)
• All hooks should start with use ie: useSomething for React compiler warnings and linters

Where we could use them

Any component that is using state currently for anything

• Encounters/Providers/StandardPhrases/EncounterTransferPanel/Anything that paginates (isLoadingNewQuery, showZeroState)
• File uploading (blob, fileName, objectUrl)
• Modals/Panels (isOpen)
• Global DOM Events (resize, document click, etc.)
• Loading state (isSaving)
• Form component state change (ie: inputs that set value e.target.value)

Downsides

• Can only be used in function components (ie: not in classes React.Component)

Resources

• Hooks intro
• React roadmap
• Under the hood