React Hooks – Introduction

This is first in the series of tutorials on React Hooks. Before you continue, it is expected that you know the following:

• basics of React.js
• functional and class components
• props and state

These would make it easier for you to get the best out of this course.

1. What are React Hooks?
2. Key Point to Note on React Hooks
3. Glimpse into React Hooks

1. What are React Hooks?

Hooks are new feature addition in React version 16.8 that enables you to use React features without having to write a class

Why do we need Hooks?

The following are motivations for react hooks

• Hooks enables you reuse stateful logic without having to change your component hierarchy – without hooks, sharing reusable behavior would require restructuring your component. This normally leads to ‘component wrapping’ resulting in hard-to-read codes. Hooks solves all of this
• Hooks helps you split a component into smaller functions based on what pieces are related – this eliminates a situation where lifecycle method contains codes that are unrelated. Same with several related logic being scattered over different lifecycle methods
• Hooks let you used many of React features without using classes – working with classed add complexity to development. This is due to a number of reasons. For instance, you need to understand how this keyword works in JavaScript which is different from how it works in React. Also you have to remember to bind your event handlers. All this leads to larger codes and confusion. Moreover, you sometimes need to juggle props and states to get things done. Hooks solves all these.

2. Key Points About React Hooks

• As previously mentioned, Hook works only with React version 16.8 or higher.
• Classes would not be removed from React
• Hooks are backward-compatible with classes. So you don’t have to worry if existing code might break. You can use Hooks side-by-side with classes
• According to the React team, classes would continues to be supported for the ‘foreseeable future’.

3. Glimpse into React Hooks

Although we’ll actually start looking at examples of Hooks from the next lesson, I feel I’ll just show you what it looks like. Maybe you can compare the code with you knowledge of classes and appreciate how it actually works.

The code below demonstrates a React Hook called useState()

import React, { useState, PureComponent } from 'react'

function HooksPreview() {

    //returns a stateful value and
    //a function to update it
    const [count, setCount] = useState(1)

    return (
        <div>
            <p>Button was clicked {count} times</p>
            <button onClick={()=>setCount(count + 1)}>
                Click Here
            </button>
        </div>
    )
}

export default HooksPreview

The code just works perfectly fine. You can see that this is a functional component. Yet have successfully implemented state.

Let’s now dive deeper by moving to the next part.