Rock-Jock with React Hooks Part — 1: Getting started

Unsplash: Brook Anderson

While developing a React Native app, we have to use stuff like class component, local state, lifecycle methods, functional components, etc. To render the view, we are using the local state inside the class component and with that, we are rendering the views after doing setState of state.

Before React version 16.8, we were not able to use the state inside of functional or stateless components but now with Hooks, we can add the state and with it, we can make stateless components act as stateful components.

The way of using hooks is different as compared to a class. We can say the same thing but in a better way.

While using the hooks we do not need to update the class component for the existing project which we have already created, we can also use the hooks inside the ongoing project. So no need to worry about the camber of code.

In this article, I am going to introduce hooks with a simple increment decrement count application. So here we go..

What is Hooks?

Hooks are functions that allow us to use React state and lifecycle features from functional components. It’s not working with the classes. We can use the hooks inside the functional components.

Before hooks, we were using local state inside the class components to render. But now with the hooks, we can use the state inside the functional components and can use that to render the view as well.

Sounds like wow...

React provides a few built-in basic and additional hooks. We can also create our own Hooks to re-use the stateful behavior between different components.

How to use hooks?

Let’s start with two basic hooks, useState and useEffect with an example, so we can use that for a functional component.

• useState

With this, we can initialize the state. We can pass the initial value for the state as well inside the useState.

const [count, setCount] = useState(0); // 0 is intial value.

Here, count is the state name and returns its value while rendering it.

We can update the state value with setCount like below.

setCount(1) // Now count value is 1

• useEffect

It is similar to componentDidMount and componentDidUpdate. It will call after the render and when the state will update.

We can declare the two parameters in the useEffect, first is an effect and second is dependencies.

useEffect(effect, deps);

Let’s check the ways in which we can use useEffect.

1. Call only one time after rendering the view:

If we need to call only one time after rendering the screen then we can just pass the blank array like below.

 useEffect(() => {
     setInitialValue(10);
 }, []);

When the render is finished useEffect will trigger.

2. Call with dependencies:

If we need to trigger the useEffect after any state will update then we can initialize the state into the dependencies. We can define multiple dependencies as comma-separated values.

 useEffect(() => {
     setInitialValue(10);
 }, [count, …]);

When state count will change after triggering setCount, useEffect will trigger.

3. Call without dependencies:

If we need to call useEffect after every state change, then we can avoid passing the dependencies in useEffect.

 useEffect(() => {
     setInitialValue(10);
 });

When any state from the current functional component in which state is initialized with useState, will update, then useEffect will trigger.

These are the three basic ways to use hooks.

We can also manage the componentWillUnmount from the useEffect, we need to return in the useEffect like below.

 useEffect(() => {
     ... // Subscribe
     return () => {
        // Unsubscribe
     }
 }, []);

We can do things like subscribe and unsubscribe in useEffect.

Standard Rules of Hooks:

• Only call Hooks at the top level:

Avoid calling hooks inside loops, conditions, or nested functions. By following this rule, you ensure that Hooks are called in the same order each time a component renders. That’s what allows React to correctly preserve the state of Hooks between multiple useState and useEffect calls.

• Only call Hooks from React function components:

Don’t call Hooks from regular JavaScript functions. There is just one other valid place to call Hooks — your own custom Hooks.

They provide a linter plugin to enforce these rules automatically. They understand these rules might seem to limit or confusing at first, but they are essential to making Hooks work well.

Here is full code with hooks usage.

We will continue posting about hooks in this series covering various features. Till then enjoy coding with hooks and have fun with it. 😊

If you have any questions then feel free to ask in the comments.