React Hooks and Its Basic Introduction

Image for post
Image for post

In this article, I’m gonna discuss react hooks and its basic functionality. Let’s begin…..

1. What is React Hooks

React hooks are functions that let us hook into the React state and lifecycle features from function components. It allows us to easily manipulate the state of our functional component without needing to convert them into class components. By using hooks, we can totally avoid using lifecycle methods, such as componentDidMount, componentDidUpdate, componentWillUnmount.

2. Basic Built-in Hooks

Some basic built-in hooks are given below -

useState — It returns a stateful value and a function to update it.

useEffect — It lets us perform side effects in function components.

useContext- It accepts a context object and returns the current context value, as given by the nearest context provider for the given context.

3. Rules of Hooks

Hooks are JavaScript functions, but they impose two additional rules:

  1. Don’t call Hooks inside loops, conditions, or nested functions — Only call Hooks at the top level.
  2. Don’t call Hooks from regular JavaScript functions — Only call Hooks from React function components.

4. When would I use a Hook?

If you write a function component and realize you need to add some state to it, previously you had to convert it to a class. Now you can use a Hook inside the existing function component.

5. Declaring a State Variable

In a function component, we have no this like in a class component, so we can’t assign or read this.state. Instead, we call the useState Hook directly inside our component.

Example -

6. Reading State

In a function, we can use count directly. Let’s see a demo —

7. Updating State

In a function, we already have setCount and count as variables. So through setCount we can update the state. Let’s see the demo -

8. Using Multiple State Variables

We can use more than one state variable in our function components. Let’s see a demo -

In the above component, we have age, fruit, and todos as local variables, and we can update them individually like the following example code.

9. Effect Hook

The Effect Hook lets us perform side effects in function components. Data fetching, setting up a subscription, and manually changing the DOM in React components are all examples of side effects. Let’s see an example -

10. useMemo

React has a built-in hook called useMemo that allows us to memoize expensive functions so that you can avoid calling them on every render. You simply pass in a function and an array of inputs and useMemo will only recompute the memoized value when one of the inputs has changed.

Let’s see a demo -

It is used in Filtering Large Arrays, Recursive functions (like Fibonacci series, factorial, etc.), avoiding unnecessary child component rendering.

That’s all for today.

Written by

I’m a junior front end web developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store