React Hooks

It seems many developers including myself prefer to use react functional components. Well ever since the introduction of hooks, using features in react functional components became a lot easier.

In this article, we will be discussing react hooks, what it does and the various types of hooks we have.

HOOKS IN REACT

Hooks are functions that allow you to use features in react functional components. they were introduced at the React 2018 Conference to help solve some issues in react. This issue includes:

• Large components

• Wrapper hell

• Confusing classes

Hooks are so powerful when used in functional components because with hooks you can build up an entire application using functional components. Above, we listed some of the issues the use of hooks has solved, so let's take a look at them one after the other.

LARGE COMPONENTS

When building an application, especially a complex one, as the build-up grows so does the complexity of the application. Class components usually contain side effects and stateful logic which causes the component to become messy and confusing as it grows in complexity. This is usually because side effects are expected to be organized by the lifecycle methods rather than functionality. Though it is possible to split the components and make them simpler and smaller, this often introduces a higher level of abstraction.

Using hooks allow us to organize side effects by functionality, and it's possible to split components into pieces based on functionality.

WRAPPER HELL

When you build complex applications with class components it can easily run into wrapper hell. If you examine the application in the React Dev Tools, you will notice deeply nested components. This makes it very complicated and tough when working with components or debugging them. While these problems could be solved with higher-order components and render props, they require you to modify your code a bit. This could lead to confusion in a complex or large application.

With hooks, you don’t have to modify your components before reusing the logic.

CONFUSING CLASSES

Classes in react.js are generally a more difficult concept than functions. React class-based components are verbose and a bit difficult for beginners to easily grasp compared functions. for beginners in Javascript, they could find functions easier to get started with because of its lightweight syntax as compared to classes. Though the syntax could be confusing because, sometimes, it is possible to forget binding an event handler which could break the code.

Functional components and hooks in react solve this, allowing developers to focus on the project rather than code syntax.

We have about 10 react hooks which are broken down into :

Basic react hooks

• useState()
• useEffect()
• useContext()

Additional react hooks

• useReducer()
• useMemo()
• useCallback()
• useRef()
• useLayoutEffect()
• useImperativeHandle()
• useDebugValue()

For this article, we would be looking at 2 basic and most used react hooks which are the useState(), useEffect().

useState() hook

The useState() is used in react functional components and what it does basically is to allow one to have state variables in functional components in which those states can be updated. Here you pass an initial state to a function and it returns a variable with the current state value and then you have another function to update this value.

Let's look at how this works practically

React useState() has its format as shown below:

import React, { useState } from 'react';
function Example() {
  // Initialize a new state variable called  date"
  const [value, setValue] = useState(0);

To use the useState hook we have to first import it from react as shown above. We initialize our state by calling useState in our function component. The useState accepts an initial state and then returns two values which are :

• The current state

• The function that updates the current state

From the code example above the first valuevalue is the initialize state while the second valuesetValue is the function that updates our initial state.

Finally, we initialize the state to the value of 0.

Going further let's read our state using the below example:

import React, { useState } from 'react';

function Sample() {
     const [value, setValue] = useState(0);

     return (
       <div>
         <p>You clicked {value} times</p>
      </div>
    );
   } 
return default  Sample;

From the above code snippet, we have read and also rendered our state there we should have " You clicked 0 times" displayed on our webpage. The next step is to update our current state and to do this we use our state updater function as shown in the example below:

import React, { useState } from 'react';

function Sample() {
     const [value, setValue] = useState(0);

     return (
       <div>
         <p>You clicked {value} times</p>
         <button onClick={() => setValue(value + 1)}>
         Click me
        </button>
      </div>
    );
   }
 return default Sample;

As shown in the code snippet above to update the current state that is incrementing the value by one, we use an event handler and then assign to it a function that sets and increments our current value by one. This is a very basic scenario explaining how the use state hook works in react functional components.

Next, we would take a look at the useEffect hook.

useEffect Hook

Today to consider yourself as someone who has mastered react one of the key concepts one needs to understand is the useEffect hook.

The useEffect hook can only be used in a react functional component. It works similarly to the componentDidMount, componentDidUpdate, and componentWillUpdate that is if you are familiar with the react class lifecycle method used in class components.

I know that by now, especially for beginners you might be wondering exactly what the useEffect hook is used for.

useEffect Hook here is used in functional components to handle side effects. So this hook is added when React renders components. These side effects could include:

• Data fetching and consuming data from a server API
• Manually changing the DOM
• Setting up a subscription etc.

useEffect(() => { 
    // side effect
})

The code snippet above shows the basic format of the useEffect hook.

Note that we can also provide a list of dependencies inside the useEffect hook. If you want your effect to run less often, you can have a second argument that includes an array of values.

useEffect(() => { 
    // side effect
}, [ /* array of dependencies */ ] )

The code snippet above shows the basic format of the useEffect hook when an array of dependencies are provided.

When does the useEffect hook run?

You might think that effects run after the first render and after each update. But by default, effects run after every completed render, but you can choose to fire them only when certain values have changed.

Conclusion

Reacts hooks are used widely in the react community because it makes it easier for developers to manage the state, especially in complex applications. Also, it is also very easy to understand especially for beginers who are new to the framework.