Explanation about react hooks

Hooks are an important thing in react functional component. For accessing state and other react features hooks are used. Today I am discussing react common hooks.

In react, 16.8 version hooks are introduced. Hooks are functions that “hook into” react state and lifecycle features from react functional components. If you need to add a state in your react application previously you have to add this by converting it into class. But after the introduction of react hooks, you can add state by using hooks into functional components. So class components are no longer needed.

Hooks are similar to javascript functions. You have to maintain 3 rules to use react hooks. These are-
hooks call only at the top level of a component.
hook call only inside the react functional components
hooks can not be conditional

useState hook: react useState hook used to track the application state. State means any data or property that can be changed.
If we want to use useState hook.First we have to import it from react.

Import {useState} from ‘react’;

After that we have to initialize it.

const FavoriteColor = () => {
    const [color, setColor] = useState(“”);
}
export default FavoriteColor;

useState takes the initial state and returns two values. One is the current state that is here color and another is a function to make changes in the state that is setColor.

useEffect hook: react useEffect hook is used to handle side effects such as data fetching from API, updating DOM etc.

Import {useEffect} from ‘react’;
const FavoriteColor = () => {
    useEffect( ()=> {
    //fetch API
}, [ ])
}
export default FavoriteColor;

useEffect takes two arguments one is a function we fetch data into this function another is a dependency which is optional. It is used for re-rendering. If there is an update that depends on something then we have to give it to the dependency.Then if there is any change in dependency the page will re-render.

useContext hook: useContext hook give us the power to manage application state globally. If there are so many nested components in our application.If we need to pass data to the last components in the application, because of uni-directional data flow we have to pass the data through every component before it goes to the required component that called props drilling. UseContext hook brought the solution to this. We can store the data in context and wrap all components by this context. After that, any component that needs to access or update this data can easily be done it by useContext hook.

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

  return (
    <UserContext.Provider value={user}>
      <Component5 />    
    </UserContext.Provider>
  );
}
function Component5() {
  const user = useContext(UserContext);
  return (
    <>
      <h1>Component 5</h1>
      <h2>{`Hello ${user} again!`}</h2>
    </>
  );
}