In this article I'll try to explain in a simple way what are the React Hooks and why it's good to use them when developing your React/React Native apps.

Since React 16.8.0, there is a new way of calling async code in a really elegant way as well as reuse logic between components much more easily.

Content

1. Introduction
2. The useState() Hook: Practical Guide

Okay, but what is the problem?

If you're not new to React, you will most probably know that there are two type of components - stateful and stateless. Where the stateful components are build with the classes and the stateless are just simple functions.

If you want to have a state in your component, you have to use the class-based way.
The problem arises when these class-based components grow bigger and messier as well as when you have a big hierarchy of components that need to share and manipulate the state.

Then you have to use patterns like render props and HOC (Higher Order Components) or use third-party stateful management libraries like Redux which most of the time introduce too much of abstraction when used in smaller projects as well as making the components more difficult to reuse.

React Hooks introduce a new way of using the functional components as it puts them on steroids with adding state and lifecycle methods to them. Functional components are great because using them your codebase is shrinking a lot and easier to change and test.

But what is a Hook actually?

Hooks are functions that let you "hook into" React state and lifecycle features from functional components. There are several build-in hooks like useState(), useEffect() and so on as well as option to create your own hooks!

Lets take a look at the build-in hooks!

There are some basic and some advanced hooks available for usage.

Basic Hooks

• useState() is the hook with which you can manage the component's state
• useEffect() is the hook with which you can manage the lifecycle events where you can do things like data fetching
• useContext() is used in conjunction with React Context API. It will trigger render with the latest context value each time the context provider updates

Advanced Hooks

• useReducer() is used when you have a complex state logic shared across multiple components and it's an alternative to Redux state management library
• useRef() is used to access elements via references
• useCallback() is used to return a memorized version of the callback that only changes if one of the dependencies has changed and not at each re-render
• useMemo() is used to memoize a value from a passed "create" function. It only recompute the memoized value when one of the passed dependencies has changed. This optimization helps to avoid expensive calculations on every render.

The useState() hook example

I will give you a basic example of the useState() hook compared to the class-based state management in order to see the different approaches and why the functional components with hooks is much better than the class-based components:

Class Example:

import React, { Component } from 'react';
import { Button, Text } from 'react-native';

class UseStateExample extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    }
  }

  render() {
    return (
      <>
        <Text>Count: {this.state.count}</Text>
        <Button onPress={() => setState({ count: this.state.count + 1 })} />
      </>
    )
  }
}

Functional Example:

import React, { useState } from 'react'
import { Button, Text } from 'react-native';

const UseStateExample = () => {
  const [count, setCount] = useState(0);

  return (
    <>
      <Text>Count: {count}</Text>
      <Button onPress={() => setCount(count + 1)} />
    </>
  )
}

Rules of Hooks

There are some rules that you need to follow if you want to use hooks:

• Don't call hooks inside loops, conditions or nested functions
• Only call hooks from React functional components
• Only call hooks from another custom hooks
• Hooks should be put at the top level of your functional component

What is next?

In the following articles I will try to explain in a simple way each of the build-in hooks so stay tuned! 👨‍💻