How do React Hooks work?

What is React Hooks?

Hooks are the feature that let us handle state inside React components without creating a component as a class. With the help of Hooks, we can create a state inside functional components but it won’t allow using lifecycle methods inside it, instead, it has an alternative method for that. There are two types of hooks called State hook and Effect hook.

The rules of hooks

• Only call Hooks at the top level. Never call Hooks inside loops, conditions, or nested functions.
• Only Call Hooks from React Functional components

State Hook

State hook is a substitute for state variables we normally use in class components.

Importing the hooks modules

import {useState,useEffect} from 'react'

Declaring a state variable

function Hook() {
 [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Here the useState hook is used which takes the initial value of the state variable that we are going to declare inside the parameter and returns a pair of variables, one is the current state value of the state variable(count) and a function(setCount) which let us update the state variable. We can call this function from any event handlers, this function is similar to the this.setState function we use in class components. Here the naming convention of the ‘setCount’ function is for better understanding to convey that function is for updating the ‘count’ variable otherwise you can use any name.

Displaying the state variable

<p>You clicked {count} times</p>

If you want to display the state variable we can use the variable directly unlike the way we use in class components which would be ‘this.state.count’.

Declaring multiple state variables

  const [age, setAge] = useState(42);
  const [name, setName] = useState('banana');
  const [todos, setTodos] = useState({ what: 'Learn  
Hooks',when:'Today' });

In a class component, we can initialize multiple state variables at once using a state object ‘this.state={key: value,…….}’.But here we have to initialize it for each and every state variable that we wanted to have. The variable we define can be initialized as a value or an array or even it can be an object too(Look at the last example).

Effect Hook

This hook acts as the lifecycle methods such as componentDidMount, componentDidUpdate, and componentWillUnmount in React class components.

useEffect(() => {
    alert(count)
});

Here each and every time the count variable is updated or the page is re-rendered there will an alert message pop out displaying the count value this is exactly what both componentDidMount, componentDidUpdate methods does.

useEffect(() => {
    alert(count)
    return ()=>{
        console.log('deleted')
    }
});

And here if we want to execute the functionality similar to componentWillUnmount then we have to return a callback from the useEffect hook. Then the functionality inside it will execute before a component is unmounted.

Other Hooks

There are a few other lesser-known hooks are also available as well but these two are the ones that are used commonly.

References

https://reactjs.org/docs/hooks-overview.html