What are Hooks on React and how you can benefit from them?

React Hooks is a feature proposal developed so you can access all the features used in classes from functional components.

The motivations for the Hooks feature proposal are the following ones:

• Reusability of Stateful components logic
• Reduce complexity from components
• Entry point for specific optimizations

The idea is to give power to functional components in the React ecosystem.

How can we use a Hook?

Let’s imagine that we’re trying to write a Counter component, the normal implementation would be the following one:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class Counter extends Component {
  state = {
    count: 0,
  };

  increment = () => this.setState({ count: this.state.count + 1 });

  decrement = () => this.setState({ count: this.state.count - 1 });

  render() {
    return (
      <div className="App">
        <button onClick={this.increment}>+</button>
        <p>{this.state.count}</p>
        <button onClick={this.decrement}>-</button>
      </div>
    );
  }
}

ReactDOM.render(<Counter />, document.getElementById('root'));

The Hook based implementation would be the following one:

import React, { memo, useState } from 'react';
import ReactDOM from 'react-dom';

const Counter = memo(() => {
  const [count, setCount] = useState();
  const increment = _ => setCount(count + 1);
  const decrement = _ => setCount(count - 1);

  return (
    <div className="App">
      <button onClick={increment}>+</button>
      <p>{count}</p>
      <button onClick={decrement}>-</button>
    </div>
  );
});

ReactDOM.render(<Counter />, document.getElementById('root'));

The benefits of using Hooks here a really clear:

• Reduce code implementation, we pass from having a class based to only have a functional based component. This also means a reduction of bytes from bundle size.
• Logic is now shareable, we have decoupled the logic not only for state creation, even for how the state updates.

Is there a Hook only to work with state?

There are two types of Hooks.

Basic

• State → useState
• Context → useContext
• Side-Effects → useEffect

Additional

• Refs → useRef
• Callbacks → useCallback
• Reducers → useReducer
• Memoized Values → useMemo
• Imperative Methods → useImperativeMethods
• Mutation Effects → useMutationEffect
• Layout Effects → useLayoutEffect

How can I test Hooks now?

You can do it by creating a Code Sandbox. Install react@16.7.0-alpha.0 and react-dom@16.7.0-alpha.0.

Or checkout and fork the Counter Demo here.

Interested to build a Todo App using Hooks?

Checkout this post:

• Making a beautiful Todo App using React Hooks + Material UI

 Interested to know more about Hooks?

You can read more about hooks from here.

Some useful resources from Hooks:

• Testing React Components that use Hooks by Kent C. Dodds
• React Hooks Usage by Kent C. Dodds