React hooks

Class

confusing "this"
not obvious class methods binding
lifecycle methods

Function component

simple in/out functions
lack of state
lack of lifecycle methods

Poor reusability of logic

Previous solutions

Mixins
Higher Order Components
Render Props

Mixins

Very early API
https://reactjs.org/blog/2016/07/13/mixins-considered-harmful.html

var PureRenderMixin = require('react-addons-pure-render-mixin');

var Button = React.createClass({
  mixins: [PureRenderMixin],
  componentDidMount: () {
    ...
  },
  render: () {
    ...
  }

});

Higher order components

Inject logic via wrapping component
Container/Component pattern
Easily composable
https://gist.github.com/pokorson/166da91279b0692e7dc5e9b5d138d22f

Higher order components

Nesting hell...
Naming collisions
Evaluated at parse time
https://gist.github.com/pokorson/2a5f40a16aa78034730704ba8853ab7e

Render props

Evaluated at render time
Better control for naming

class DataProvider extends React.Component {
    render() {
        const someData = ...

        return this.props.render(someData)
    }
}

<DataProvider render={data => (
  <h1>Hello {data.target}</h1>
)}/>

Render props

Still nesting hell...
Poor composition of multiple render props

Hooks API

State hook

Using state inside function components

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Effect hook

Acting on component lifecycle

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // initialize jquery dropdown
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

More hooks

useReducer
useContext
custom hooks - define your own hooks

Limitations

Declare only on top of component - no loop or conditions
Use only inside components

Useful links

https://reactjs.org/docs/hooks-intro.html
https://usehooks.com/
https://reacthooks.io/hooks/useArray