A Brief Discussion About React Hooks

Hooks are mainly used in react functional components which must be imported from react. Hooks make state management and life cycle easy. These are called inside react functional components and these must be unconditional. We can also build our custom hooks in react.

Hooks: useState(), useEffect(), useContext(), useRef(), useReducer(), useCallback(), useMemo().

useState(): Adds and track state which is any data or property.

At first, we have to import it thus:

import { useState } from "react";

Then, we initialise the state by calling useState(). For ex: if we want to keep track of loading, we can write,

const [loading, setLoading] = useState("");

Here, loading is the current state, setLoading is a function to set/ update the value of the state.

useEffect(): Allows performing side effects like: fetching data, updating dom, timers etc. in the component. It has 2 arguments. First argument is function, second is dependency. Second argument is optional. useEffect() runs on every render. But we can control its rendering according to dependency. Most of the time, the second parameter is an empty array. Extra dependencies can be added inside the array.

Syntax of it: It can be divided in 3 conditions:

useEffect(() => {
  //Runs only on the first render
}, []);

useEffect(() => {
  //Runs on every render
});

useEffect(() => {
  //Runs on the first render
  //And any time any dependency value changes
}, [prop, state]);

useContext(): Using react context, we can manage state globally. It can be used to share states between nested components easily. Without it, we have to follow the concept of prop drilling to pass props between nested components. But it adds more complexity for little large or medium projects.

How to add this in component:
1) Importing it from react and initialising it.

import { useState, createContext } from "react";
const UserContext = createContext();

2) Wrapping child components in context provider.

<UserContext.Provider value={}>
      …….
</UserContext.Provider>

3) Using the hook.

useRef(): Allows to persist values between renders. Using it, we can access dom elements directly and store a mutable value. We can use it to know how many times our application renders. It returns only one item which is an object called current.

useReducer(): It is similar to useState(). Custom state logic is applied by it. It accepts 2 arguments: reducer, initial state.

useCallback(): Returns a memorised callback function. It only runs when the dependencies update.It prevents the re-rendering of a component.

useMemo(): It is the same as useCallback(), but it returns a memorised value.