Awesome React Hooks, part 1, useState

So, if you follow the react community right now, we are on fire !

Please welcome an incredible thing for functional components: hooks

What is a hook ?

Till now, we, react developpers, made the distinction between stateless components (functions) and stateful ones (classes).

With hooks, we got a set of primitive that will help us to interact with local state, side effects, ... for functional components.

This post is the first in a series that will cover the available react-hooks.

useState hook

Let's start with a very useful and easy one:

useState

Hooks are available from the 16.7.0-alpha.0 tag onward on npm, so you can run:

npm install --save react@16.7.0-alpha.0 react-dom@16.7.0-alpha.0

or use a online editor to test 'em:

(playground)[https://stackblitz.com/edit/react-avqzi1]

With this trivial example, we can demonstrate the main features of the useState hook:

import { 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>
  );
}

When we call useState(initialValue: any), this will return an array of 2 elements:

first the actual current value of the data
second is a function that let you change the data.

At first the count is equal to 0, and each time we call setCount(count + 1), a rerender will occur !

If you ever used withState from recompose, this is basically the same things except:

this is much simpler to reason about
you don't complexify your tree with another layer of indirection,

One thing to note is that the generated state is isolated. With Hooks we are able to reuse state logic and not state data.

So if you call again useState (or use generated useState from a custom hook [more of this later] ), you will refer to another data cell !

Concrete Application: Validation

The most interesting part is that I can generate a hook from another function that could be reused in differents components.

As useState is mapped to the 'rerendering' lifecycle of the component, we can reason about it very easily.


function setWithValidation(businessRule, setValidated, setData) {
        // simple IOC
        // create a new function that is able to set validated state and change the data value
        return newValue => {
            setValidated(businessRule(newValue))    
            setData(newValue)
        }
}

function withValidation(businessRule) {
    return initialData => {
        // create an data cell for the main data we need
        const [data, setData] = React.useState(initialData)
        // create a data cell for the validation state
        const [validated, setValidated] = React.useState(businessRule(initialData))
        // return in a nice object, the data, a modified set function and the validated state
        return {data, set: setWithValidation(businessRule, setValidated, setData), validated}
    }
}

Now I have a flexible data cell that can validated !
The usage is trivial:


function isEven(value){ return value % 2 === 0}

const useEvenData = withValidation(isEven)

function Example() {
  // Declare a new state variable, which we'll call "count"
  const {data, validated, set} = useEvenData(0);

  return (
    <div>
      <p>You clicked {data} times</p>
        {validated ? <p>The number is even</p> : <p>The number is odd :-(</p> }
      <button onClick={() => set(data + 1)}>
        increment
      </button>

      <button onClick={() => set(data -1)}>
        decrement
      </button>
    </div>
  );
}