Understanding React hooks

#react #hooks #webdev #blog

Table of Content:

What are Hooks

State as a Hook

Effect as a Hook

If you want to learn about hooks from the basics then this blog will be helpful to you. So, let's understand what is hooks? and how we can use them in our Projects.

What are Hooks

Hooks are functions that let you use React state and other react features without writing a class. Hook does not work inside classes but lets you use React without classes.
We are going to look at some of the built-in React Hooks such as useState and useEffect.
With Hooks, we can extract stateful logic from a component so it can be tested independently and reused.

State as a Hook

We have an example counter here. After every click on the button the counter increments the value:

import React, { useState } from "react";

export default function App() {
  const [counter, setCounter] = useState(0);
  return (
    <div className="App">
      <h1>You clicked counter {counter} times</h1>
      <button onClick={() => setCounter(counter + 1)}>Click me</button>
    </div>
  );
}

The above code gives us the output as follows:

useState is a Hook. We call it inside a function to add some local state to it. React preserve this state between re-renders. useState return a pair of the current state and a function that let us update the state. We can call this function using an event handler or somewhere else.
useState takes only one argument as its initial state. In this example 0 is our initial state and using this our counter starts at zero. You can change as per your need. The initial state argument is used only at the initial render.
We can also use a state hook more than once in a single component.

Effect as a Hook

The useEffect hook, adds the ability to perform side effects from a function component. As we can manually change the DOM from React component because it can't be done during rendering. By default, React runs the useEffect hook after every render including the first render.
For Example, the below example sets the Document title after React updates the DOM:

import "./style.css";
import React, { useEffect, useState } from "react";

export default function App() {
  const [counter, setCounter] = useState(0);
  useEffect(() => {
    document.title = `Counter: ${counter} time`;
  });
  return (
    <div className="App">
      <h1>You clicked counter {counter} times</h1>
      <button onClick={() => setCounter(counter + 1)}>Click me</button>
    </div>
  );
}

The above code gives us the output as follows:

I hope you have understood what is Hooks and how to use them. We will learn how to create our custom hooks in the next blog which will be updated soon. If you have any suggestions regarding the blog, please let me know in the comments section.