React Hooks


#1

Something new for React 16.7: Hooks

Quick and dirty intro example is adding state to a functional component using 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>
  );
}

Basically, as a function component you have a function (Example) that runs whenever its rendered, yet this useState() function as part of this feature manages to maintain persistence with a state initialized the first time its run and is updated as you use one of its return values - something that happens with every subsequent render.

Additionally, order of execution for these hooks is important as it is what is used by React to keep track of them. This means you have special requirements for how they’re used (explained in later parts of the link).

I find them … interesting, but a little disturbing at the same time. This is starting to get into the realm of “too much magic”.


#2

I’m still not a huge fan of hooks (mostly because it moves from language into API), but this is an interesting if not compelling visualization:

via: https://twitter.com/prchdk/status/1056960391543062528


#3

That is a lot of code savings! :stuck_out_tongue:


#4

A bunch of links with more information and opinions


#5

annnnddd…some more examples ->

https://daveceddia.com/archives/


#6

Also tracking for redux: