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
Made with Slides.com