Getting started with React Hooks

Before I go on with this post and it’s demo, I want to make one thing clear. React Hooks, is still in alpha. You shouldn’t use it in production apps, nor you should replace all of your components to hooks mode.

Now since Hooks is still in alpha, I cannot say I am a React Hooks profesional. What I can say, is that I read the documentations, played with it a little and I like to share with you what I’ve learned.

It’s OK, if you don’t like to get started with Hooks just now. You can still keep writing React apps, just as you did before.
There are no breaking changes and there are no plans to remove classes from React.

What are Hooks?

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

What kind of Hooks can I use?

There is a list of built-in Hooks you can use and you can build your own Hooks.

Let’s start with, a simple Todo App demo

Let’s create a simple Todo app using React Hooks, I’m going to use useState and useRef Hooks. You can find the code for this example on github.

First will be a good idea, to understand those two Hooks.

useState

It enable us to use our function component as astateful component without rewriting it to a class.
I cannot even count the times I’ve had to change my function component into a class component just because I had to add it some state.

It looks something like that,const [age, setAge] = useState(42);

The useState function, takes the initial state value and returns an array.
This array has two values in it.
The current state and an update function. Using array destructuring syntax, we can give these values, more meaningful names age and setAge.

Know that unlike setState, the current state value, doesn’t have to be an object. It can be an object or whatever you like, also, unlike setState, when using a complex state object, the useState Hook won’t merge your state changes with older state. You can use as many useState Hooks as you like in one component.

You can see the full component here.

Here you can see I’m using two useState. One for the ‘tasks’ and one for the ‘error’. When the AddForm component inner form is submitted, the handleFormSubmit function, is being dispatched. In it, I call the two different ‘set’ functions, setTasks and setError.

useRef

The second Hook I’m using, is the useRef Hook. It returns a mutable ref object which is persist for the full lifetime of the component. A common use case, is to access a child DOM element (just as I’ve done).

But it is also handy for keeping any mutable value just like you’d use an instance field in a class component.

An example using useReducer

Let’s implement the same todo app using the useReducer Hook. This Hook is an alternative to the useState Hook. It is very similar to the Redux reducer function. useReducer is usually preferable to useState when you have complex state logic that involves multiple sub-values. It also lets you optimize performance for components that trigger deep updates because you can pass dispatch down instead of callbacks.

I kept the reducer very similar to Redux reducer with ‘type’ and extra ‘payload’ value, but it can look as you like.
For example:

const reducer = (state, action) => {
  if(action === 'what ever you like') {
    return {...state, someProp: 'the action was whatever you like, and I like this'}

Now for the component:

The App component, did not changed very much, here are the main changes.
Every place I used tasks / error are now prefixed with state. Plus (obviously), I use the useReducer Hook instead of useState . useReducer takes the default state (you can pass a third parameter, the default action, you’d like to call on initialization) and it returns current state plus a dispatch function.

Now I know what you are thinking 💡

We don’t need Redux any more! Well I don’t think we are quite there yet. Yes useReducer is nice, and combined with the context API (you even have a useContext Hook) you might get the same results as Redux does. But Redux has more to offer than that. First of all it has a community behind it. Good People, good developers, that maintain it and it has good tools around it such as the Redux devtools. Maybe in time Hooks will replace Redux, but for now, I think it is here to stay.

In conclusion

It is nice that we can create a stateful component as a function, it is nice we have a bunch of Hooks built-in to React and is event nicer we can create our own Hooks (more on that in the near future). I sure wait to play with hooks a little more and get a grip of their full potential.

That’s it.
Like always, I hope you find this post helpful.