Topic: React Hook and Custom React Hook

When I was learning to React, some parts seemed to me difficult. Today, I have decided to write some of my learnings and ideas about react hook and custom react hook.

- What is hook, basically?

In real life, hook means a one kind of ring that holds something. In react, hook works basically based on this following concept such as if we use React hook, there will be a state that stores data and provides data in any component during setting the states in a component or multiple component using the same state. As we can use the same state in many components, so it is thought that it holds data like a ring and can be linked in any component. But there have some rules and guidelines to use react hooks.

  1. Hook must be declared at the top of the return functions and inside the React function.
  2. Don’t declare hooks in loop, conditions and nested functions.
  3. Hook can be written in functional component only.

Example:

// imported hooks to use from react
import React, { useEffect, useState } from "react";

//react function
const MyOrder = () => {

// setting react hook
const [order, setMyOrder] = useState(‘’ ”) / useState(null);

    retrun(
       // code contents in JSX format.
    );
}
export default MyOrder;
  1. From, above example, we can say that, this is a React functional component. Now I am going to give explanation.
  2. Firstly, we create a ‘MyOrder.js’ file as a component that handles order related task. The component name must be started with an uppercase letter.
  3. Secondly, export the created component for further use in other component. If it isn’t exported, it can’t be imported in another component.
  4. Thirdly, we need to define our hook. Hook always start ‘use’ key word. In the above example, there is used useState hook. Now, come to the main point that how to set our state and how to store data in state? In state, data is stored in array format. So, at first we take two elements inside an array [order, setOrder]. Here, setOrder sets our data into an order element. When, setOrder element is first called, it renders the React component and store the data in a memory cell in order element. When it is rendered again, it will create another memory call to store the data. But when it is rendering again and again, it returns the previous stored data serially except creating a new cell. So, we should set hook serially to reduce creating bugs.

- What is useEffect hook, basically?

useEffect is also a hook and one kind of function. It is a call back function. Because Each time it passes a call back function after rendering a component. It can pass an array with call back function. This call back function will be called with the first render of the component and after that it will be called with the changing of the array. But if there is no array element, then it will be called once for the first time of rendering of the component. One thing is to be noted that, the array element is called dependency of useEffect.
Example:

useEffect(() => {
    fetch(`http://localhost:8000/premium-autos/select-now/${id}`)
      .then((res) => res.json())
      .then((data) => {
        console.log(data);
        setOrder(data);
      });
  }, [id]);

Here, after the render of the component, the useEffect hook is called and fetch the URL and send a response. Basically, this hook is used to fetch data from API. When, we need to set some dependency that data will be fetched with a specific id or email, then we can set a dependency in array. Here, [id] is the dependency.

- Benefits of Hooks

  1. We can write many function in hooks, and use in other components easily.
  2. It makes our component easy for reusability, readability and testing.

- What is custom hook, basically?

Custom hook is nothing but a function. When we need to write a specific logic for any project and need to use same logic in other components, then custom hook plays an important role. Just we need to create a JS file named ‘useAuth.js’ as an example, here we can write any name also but writing ‘use’ at first it looks quite good. It’s just a convention of naming a custom hook. In custom hook, there will be written necessary function. Here, I have given an example ‘useAuth.js’ Because authentication is needed in every component
Example:

import React, { useEffect, useState } from "react";

//react function and it will be our custom hook
const useAuth = ( ) => {

// setting react hook
const [userName, setUserName] = useState(‘’ ”) / useState(null);

const handleInputField = ( ) => {
    // code contents
}

const handleForm = ( ) => {
    // code contents
}

// returning function so that these function can be accessed in other components when custom hook will be called
    retrun(
          handleInputField,
          handleForm
    );
}
export default useAuth;

22

Categories:

React

Tags:

React