a Hook into React Hooks

This is a quick intro to React Hooks.

This article is meant to set the ground for the next article in which I will show how to use those simple techniques to achieve AOP (Aspect-Oriented Programming), and will also compare it to the new comosition API commig from Vue.js

But first thing first, lets quickly review what are React Hooks.

a quick Intro to React Hooks

Hooks are a new addition in React 16.8 and a major shift in the coding style:

The Obvious Benefits:

1. This is kind of the new best practice
2. It allows using React Features: life cycle, state, from within a function component

Lets quickly review the basics

The Hello Hooks sample:

Armed with this knowledge, forms in are much nicer to code:

Hooks and Effects

The new way to handle lifecycle events such as componentDidMount() and componentDidUpdate() is done using the useEffect() hook:

And here is how we code a conditional effect:

Bringing in a real life sample of some buddies we want to get notified about:

In the above code, we can also see how cleaning up is done, and experience the nice functional flow of re-subscribing to the right buddy comming from props.

Lets discuss the < Previous | Next > scenario:

Loading the nextItem, before hooks may be achieved like that:

With hooks, the same is achieved nicer:

What is it about again?

Hooks are functions that let you “hook into” React state and lifecycle features from function components

In the next article I will show how to use those simple techniques to achieve AOP (Aspect-Oriented Programming), and will also compare it to the new comosition API commig from Vue.js