How to create custom Hooks in React.Js?

Esraa Ismail — Sun, 11 Dec 2022 14:17:51 +0000

React hooks are a new feature published by react team in version 16.8, it's allow you to use the state and other react features.
In simple terms hooks are functions that connect react state and lifecycle features from the function components, don't forget react hooks only work in react functions.
Besides built-in Hooks such as( useState, useEffect, useCallback…), you can build your own hooks.

So what are custom hooks?🧐

Custom hooks are normal javaScript function that accepts arguments and return outputs but they contain stateful logic.
They are like other hooks so their name starts with 'use' and can be used to call other hooks, we use it in react function and we call it only in the top level of the component

Why and When to use React Custom Hooks?

We use it any time when we need to share a logic between different components.

Custom hooks give us some benefits:

Reusability: we can use the same hook again and again, without the need to write it twice.
Readability: separate logic from the component to a custom hook will make the component easier to read.
Clean-code: Fix logic in one place (custom hooks) becomes easier than changing it in more than one.

let's see an example make simple API call using Axios

components/AllPosts.js

We send GET request using axios without any headers or body to fetch posts with response as result or error.

components/AddPost.js

Here we send POST request with headers and body of the post using axios.

Look at the previous examples, you can see that both components above have a very similar logic. They all call API ,The only difference is that they render different UI , different URL when calling API and different request method.

We can reduce the repetition by creating a custom hook for example useAxios() for reuse as follows:

src/hooks/useAxios.js

Here we made a reusable hook can accept an argument that contain the request details like (URL, request method, headers and body)

So let's modify our components

components/AllPosts.js

components/AddPost.js

Conclusion:
we have learned the importance of using custom hooks like saving time, make your code clean reusable and readable, also we have shown real examples from project with an explanation of when we used certain hooks.

How JavaScript work behind the scene

Esraa Ismail — Tue, 21 Jun 2022 00:24:43 +0000

Did you ask yourself before how JavaScript code is executed?🤔

Let's go in-depth to understand how

We all know that JavaScript is a single-threaded and non-blocking scripting language ,what is that mean ?

Single-threaded: which means that only one thing can happen at a time
Non-blocking : imagine you’re running a function which takes 30 seconds during that task we’re waiting for 30 seconds before anything else can happen !! Of course, that doesn't happen

It means that it doesn't wait for the response of an asynchronous code

To better understand asynchronous JavaScript, let’s look at the code below:

console.log("Hello 1"); 

setTimeout(function() {
  console.log("Goodbye!");    

}, 3000);

console.log("Hello 2 ");

Think with me what is the final result ..

what happen in the above code ?

JavaScript run line by line but it is non blocking language so it will run ready functions and functions take time execute later
So with asynchronous JavaScript, the JavaScript doesn’t wait for responses when executing a function, so it executes 'Hello 1' at first then 'Hello 2' and after 3 seconds it execute 'Goodbye!'

The actual JavaScript execution is really simple, but it ties to four concepts you need to understand first.

Call stack
Web APIs
Callback Queue
Event loop

Call stack :
JavaScript has only one call stack, The call stack is part of
the JS engine, When we run code we invoke a function, it gets
added to the call stack. If this function is asynchronous like
(timeout(setTimeOut),Ajax request, ..) it moves to web Apis .
This means that only one thing can be executed at a time

Web Apis :
It is a place where asynchronous functions exist till it
have finished execution, after finishing It simple gets added
to the Callback queue

Callback Queue:
When the browser is done with the time (or any other API which
it provides for JS), it doesn't transfer the codes to be
executed back to JavaScript immediately. When the browser is
done, it stores the codes in a callback queue. It is a queue
containing some functions or codes which would be called back
at a later time.

Event loop:
has one simple job, it checks if the main stack is empty, and
when it is empty, it checks the Callback Queue. If there are
codes in the queue to be executed, they are transferred one by
one to the call stack. After the code is executed, it leaves
the stack and the next one in the queue comes up until the
queue is empty

above gif explain the idea
we can see that the first function is pushed to the call stack
and Hi is immediately executed in the console, then asynchronous
function (setTimeOut) transfer from call stack to web apis till
it finish execution then move to callback queue , when call stack
is empty event loop transfer asynchronous function to stack to
execute .