What is a custom hook in React JS?

Majid Babaeifar — Sat, 30 Jul 2022 19:25:00 +0000

Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class.
When we want to share logic between two JavaScript functions, we extract it to a third function.
Both components and Hooks are functions, so this works for them too! A custom Hook is a JavaScript function whose name starts with ”use” and that may call other Hooks. Unlike a React component, a custom Hook doesn’t need to have a specific signature. We can decide what it takes as arguments, and what, if anything, it should return. In other words, it’s just like a normal function. Its name should always start with use so that you can tell at a glance that the rules of Hooks apply to it. for example :

import { useState, useEffect } from 'react';

function useFriendStatus(friendID) {
  const [isOnline, setIsOnline] = useState(null);

  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }

    ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
    };
  });

  return isOnline;
}

As you can see, we can use other hooks in our custom hook.

The differences between arrow function and normal function

Majid Babaeifar — Wed, 27 Jul 2022 12:09:00 +0000

In arrow function you can omit the curly braces and the return statement when the function is a 1 liner.

const myFunc = (a, b) => a + b
console.log(myFunc(1, 2))

// log : 3

In arrow function when it has only 1 argument, parenthesis is optional

const myFunc = a => a*a

console.log(myFunc(3))
// log : 9

In arrow function the this key word is automatically bound to the parent's context

this refers to the object that is currently executing the function

DEV Community: Majid Babaeifar

What is a custom hook in React JS?

The differences between arrow function and normal function