Overcome your React Hooks FOMO in 1 minute

Hooks are a new feature proposal introduced by Dan Abramov at React Conf last week. I will walk you very quickly through the very basics that you need to know so you don’t miss out, until you have the time for a deeper dive into this exciting new feature.

First of all: hooks are a feature proposal and they are available in React v16.7.0-alpha if you want to play with them. Since they are not officially part of React yet, you have some more time to learn all about them.

Hooks are completely optional, they do not introduce breaking changes.

Hooks are useful for

• Reusing stateful logic between components
• Simplify and improve readability for complex Components
• allow you to use function Components so you don’t have to deal with classes and the infamousthis

There are a bunch of different hooks, but in this quick introduction I will only mention the two main ones: state hook and effect hook

State Hook

The useState function returns an array of two elements: the first one is the value for a state property, in this example is equivalent to const {count} = this.state The second element is a function that lets you set that property to the state, just like using setState

Effect Hook

The useEffect function, lets you write a handler for state changes, as you would do with componentDidMount and componentDidUpdate

Optionally, you can make your useEffect function to return another function that will perform the cleanup, e.g. Remove event listeners, etc.

Creating your own custom hooks

Combining useState and useEffect you can write your own custom hooks. That’s actually the most exciting part about it in my opinion, you’ll be able to create your own functions that leverage the standard hooks and write stateful logic in a more elegant and readable way.

To learn more about hooks, check out the official docs: https://reactjs.org/docs/hooks-intro.html