Hooks In React

Introduction

1. Hooks are functions that let you “hook into” React state and lifecycle features from function components. Hooks don’t work inside classes — they let you use React without classes.

2. So in simple terms, they are functions but have some inbuilt powers in them

How to identify hooks?

1. Any function which starts with use ---- is said to be an hook

Inbuilt hooks in React useState()

1. useState():

   • Why to use this hook: the problem with using normal variables in react is as we render the page all the variables get initialized back to their original state

   • It declares a “state variable”. Our variable is called count but we could call it anything else, like banana. This is a way to “preserve” some values between the function calls — useState is a new way to use the exact same capabilities that this.state provides in a class. Normally, variables “disappear” when the function exits but state variables are preserved by React.

2. Syntactically writing a useState()

    import React, { useState } from 'react';
   
    function Example() {
      // Declare a new state variable, which we'll call "count"
      const [count, setCount] = useState(0);
   

Explanation of the code snippet

1. The useState is inbuilt but we have to make a named import to use it

   hence we do:

    import {named_import } from 'react'
   

2. setcount is a setter method to set the value of count we can only do this by using the set count

3. useState(0) --- the parameter passed to initialize the count variable to default as 0

4. Another important thing to note is it should be used in those functional components in which the state needs to be saved

Can we use normal variables?

1. The answer is yes we can but while making its use we have to make sure it is not a value that we are using somewhere else re-rendering

2. Because those values will not be retained when we do so

UseEffect API

1. The whole crux behind using useeffect is the reconciliation algorithm of react

2. What the reconciliation algorithm does is it will re-render only those components whose state has changed

3. We can make api calls using the browser api fetch()

4. The problem with fetch is that suppose we have written it inside a functional component. Now as soon as we make api calls and we change something, react will re-render that entire component and fetch will be called again ,this will now reduce the perfomance of react

5. Hence we use useeffect

6. The useEffect Hook allows you to perform side effects in your components.

7. Some examples of side effects are: fetching data, directly updating the DOM, and timers.

   useEffect accepts two arguments. The second argument is optional.

    useEffect(<function>, <dependency>)
    //dependency is an array
   

8. When the dependency array is empty then the callback/function passed in useEffect is called only when after the components are rendered that too only once

9. When we have some thing passed in the array then every time the the variable passed in the array changes , the the callback function passed in the useEffect will be called