L&L on React 16.7.0 hooks

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

Reusing logic (wrapper hell) think HOCs & render prop functions

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() { ... }
}

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)

rynbyjn/hooks.md