DEV Community: Md. Imran Hossain

Asynchronous Javascript and Some advanced use cases

Md. Imran Hossain — Wed, 25 Oct 2023 18:19:13 +0000

Although Javascript is a single-threaded programming language and it executes programs synchronously, It also handles asynchronous tasks using Web API, Task queue and event loop. Whenever an asynchronous code block comes to the call stack following things happen:

It gets deferred to Web API
Web API tries to resolve the code, and whenever it gets resolved, goes to the Callback Queue
Event Loop always watches the call stack
The moment the Call Stack gets empty, Event Loop pushes the resolved task to the Call Stack
Call Stack executes the code

During this process, after the asynchronous tasks get resolved from Web API, the Callback Queue gets populated with the following tasks:

Macro Tasks (Task Queue)
Micro Tasks (Job Queue)

The Task Queue is responsible for these tasks: setTimeout, setInterval, setImmediate, I/O tasks, etc.
The Job Queue handles these tasks: Promises, processes.nextTick, etc.

As Event Loop takes the resolved tasks from the Callback Queue and the Callback Queue has two task Queues, So the obvious question is how Event Loop decides which queue to dequeue from.

This answer depends on the following rules:

For each loop of the Event loop, one Macro Task is completed out of the Macro Task Queue.
Once that task is complete, the event loop visits the Micro Task Queue. The entire Micro Task Queue is completed before the Event Loop looks into the next thing.
At any point in time, if both the queues got entries, Job Queue(Micro Task Queue) gets higher precedence than Task Queue (Macro Task Queue).

These are all the magic that happens behind Asynchronous code execution. Now let's move into some examples to validate the above discussion.
Example 1:

console.log("first");

fetch("https://jsonplaceholder.typicode.com/todos/1")
    .then((response) => response.json())
    .then((json) => console.log("json placeholder result", json));

setTimeout(() => {
    console.log("after 1000 millisecond");
}, 500);

setTimeout(() => {
    console.log("after 0 millisecond");
}, 0);

const promise = new Promise((resolve, reject) => {
    resolve("I am promise and I am resolved");
});
promise.then((response) => console.log(response));

console.log("second");

So what do you think is the output of the result?
the output should be like this:

first
second
I am promise and I am resolved
after 0 millisecond
json placeholder result {
    "userId": 1,
    "id": 1,
    "title": "delectus aut autem",
    "completed": false
}
after 1000 millisecond

Explanation:

The first line comes to the call stack, it is synchronous so executes immediately and logs "first";
The asynchronous operations (fetch, setTimeout(0 & 1000 milliseconds), and Promise) are deferred to the Web API.
The last line is also synchronous and so it is executed by the Call stack and logs "second". Now the call stack is empty.
Although fetch is called before setTimeout, it takes some time to be resolved as it communicates with external API. so it's still pending in the Web API.
Meanwhile the setTimeout with 0 milliseconds and promise gets resolved immediately. The promise gets pushed to the Micro Task Queue and setTimeout with 0 milliseconds gets pushed to the Macro Task Queue. The Micro Task Queue gets more priority than the Macro Task Queue for both entries. So Event Loop will take the promise first and the setTimeout second. so the log order should be "I am promise and I am resolved" "after 0 millisecond"
At this point Web API resolves(hopefully i.e. depends on the external server "jsonplaceholder") the fetch and goes to Micro Task Queue. Event Loop takes the resolved result and push to Call Stack. Call stack then prints the result.
Lastly, the setTimeout with 1000 milliseconds gets resolved and moves to Macro Task. Event Loop then push it to the call stack and logs "after 1000 millisecond"

Example 2

const p1 = new Promise((resolve, reject)=>{
    setTimeout(()=>{
        resolve("p1")
    },4000)
}) 
const p2=new Promise((resolve, reject)=>{
    setTimeout(()=>{
        resolve("p2")
    },8000)
}) 
const p3= new Promise((resolve, reject)=>{
    setTimeout(()=>{
        resolve("p3")
    },0)
}) 

async function main(){
    console.log(await p1)   
    console.log(await p2) 
    console.log(await p3) 
}
main()

What will be the output and how much time will take for p1, p2 and p3 to be executed?

The answer should be:

p1 - 4 second
p2 - 8 second
p3 - 8 second

Explanation:
when the code starts to get executed:

p1, p2 and p3 will all be deferred to Web API before executing the main() function.
As the new Promise is an instance of the Promise class, the constructor method will already be executed before executing main() function which results as setTimeout with 4000 milliseconds, 8000 milliseconds, and 0 milliseconds all will be in the Web API and will be in the pending state.
Now, the main() function is called which is implemented using async await.
Now, the compiler will try to execute p1 and wait until p1 is resolved from Web API and it will take minimum 4 second
Secondly, the compiler will try to execute p2 and wait until p2 is resolved from Web API. As it was previously in the Web API in pending state it will take 8 seconds from the very beginning.
Thirdly, p3 is already resolved as it has 0 millisecond timeout. But it had to wait until the p2 is finished. p2 took 8 second so it will also take 8 second.

Example 3

const p1 =()=> new Promise((resolve, reject)=>{
    setTimeout(()=>{
        resolve("p1")
    },4000)
}) 
const p2=()=>new Promise((resolve, reject)=>{
    setTimeout(()=>{
        resolve("p2")
    },8000)
}) 
const p3=()=> new Promise((resolve, reject)=>{
    setTimeout(()=>{
        resolve("p3")
    },0)
}) 

async function main(){
    console.log(await p1())   
    console.log(await p2()) 
    console.log(await p3()) 
}
main()

This problem is identical to example 2. But slightly different as p1,p2 and p3 are functions. So what will be the result now?

The answer should be:

p1 - 4 second
p2 - 12 second
p3 - 12 second

Now why the answer is different?
Explanation

The promises are not executed before main() function gets called.
p1,p2, and p3 are just function reference not promise.
When p1() is called inside the main function it waits for 4 seconds to be executed, then p2() gets called.
till now, we have already passed 4 seconds, p2() takes another 8 seconds. So, total 8+4=12 seconds will be taken.
p3() resolves immediately, so the total time taken for p3 is 12+0=12 seconds.

(will be continued...)

useEffect = comoponentDidMount + ComponentDidUpdate + componentWillUnmount

Md. Imran Hossain — Thu, 13 Jan 2022 06:38:45 +0000

React offers two types of components as you already know which are:

Class component
Functional component

Those who are familiar with class components, know it uses life cycle methods to keep track of the states and work with side effects. React is solely responsible for UI rendering and reacting to user actions by rendering JSX code, managing states and props, managing events, and evaluating state/props change. Side effect means anything that is not react’s responsibility like(fetching data from an API, updating the DOM, setting any subscriptions or timers)

Three lifecycle methods: componentDidMount, componentDidUpdate and componentWillUnmount are extremely useful from loading the components for the first time in the DOM to unmount the components(navigating to other pages, conditional rendering of certain components of a page, etc). Here is a short description of those three life cycle methods.

componentDidMount: This method triggers when a component loads for the first time. We may need to connect with an external API, perform certain DOM operations ( a side effect), perform asynchronous tasks i.e. setting intervals, etc.
ComponentDidUpdate: As we have certain states in our component, often we need to update them. We update states by emitting events, input changes in the form, etc. So in these cases, we must update our states, that’s where componentDidMount lifecycle comes to play.
componentWillUnmount: This method is necessary to prevent memory leaks and performance optimization. We mostly need this to perform certain operations like clearing timer and subscription which will not be needed when the page will unmount.

These life cycle methods are very useful and necessary, and we couldn’t think not to use them. But these methods have some disadvantages as well. Some of them:

Duplicate code
Sharing same logic
Complex states
Using the tiresome lifecycle methods repeatedly(some may disagree)

I will discuss the disadvantages by demonstrating a class component base application and later, I will use the useEffecthook to avoid using those lifecycle methods.

import React, { Component } from "react";
import "./App.css";
export default class App extends Component {
    state = {
        time: new Date(),
        count: 0,
        show: true,
    };

    componentDidMount() {
        document.title = `you have count ${this.state.count} times`;
        this.interval = setInterval(this.tick, 1000);
    }
    componentDidUpdate() {
        document.title = `you have count ${this.state.count} times`;
    }
    componentWillUnmount() {
        clearInterval(this.interval);
    }
    tick = () => {
        this.setState({ time: new Date() });
    };
    handleCount = () => {
        this.setState(({ count }) => ({
            count: count + 1,
        }));
    };
    handleShow = () => {
        this.setState(({ show }) => ({
            show: !show,
        }));
    };
    render() {
        const { time, show } = this.state;
        return (
            <div className="container">
                <div className="post">
                    {show && (
                        <div>
                            <p>Current time {time.toLocaleTimeString()} </p>
                            <button onClick={this.handleCount}>
                                Count start
                            </button>
                        </div>
                    )}
                </div>
                <div className="controlPost">
                    <button onClick={this.handleShow}>
                        {show ? "Hide post" : "Show post"}
                    </button>
                </div>
            </div>
        );
    }
}

Output:

This is a simple application that shows the clicks user performed by clicking the "count start" button in the web page title and has a clock that shows the current time. Additionally, a button "Hide post" that shows or hides "the clock "and "count start" button.

Pretty simple application right? Here are the things we need to understand,

The clock will start ticking when the page is loaded
At each click in the "count start" button, it will increase the count in the web page title.
When clicking the "hide post" button it will hide the "clock" and "count start" button and display the "show post" button and clicking again, the "clock" and "count start" button will be visible again
Finally, When we hide post, the clock shall be unmounted as it leads to memory leaks and performance issues.

So we clearly see, we have three states 1. count 2. time 3.show . In the above code snippet, I have loaded the clock by setting a time interval in the componetDidMount method and initialized the document title, as both of them are side effects((I have mentioned earlier about the side effects ) and needed to render at the first time page loading. I have used a click event(handleCount) to increase the value of count at each click using setState.
Now the state is changed but that will still not be rendered to the UI unless the componentDidUpdatelifecycle method is used. Using this method we updated the document title.
Clicking the hide post button will unmount the "clock" and "count start" button, but still, the clock will be running in the background unless we use the componentWillUnmountmethod to clear the interval. Using this method we have cleared the interval

If we have a closer look at the above code snippet we may notice that we didn’t follow the DRY principle and repeated code in the life cycle methods, we also had to share same logic between the life cycle methods. Also, the states aren’t handled properly, we see a mixture of complex states and using the states in the same lifecycle method(i.e. In componentDidMount setting interval and setting the document title) which are not desirable.

Before the introduction of useEffect, we had to handle the side effects and different component life cycle methods using those life cycle methods. But now most of the problems that we encountered using class component is taken care of by using useEffect hook and functional components.
So let’s see how we can use the useEffect hook and git rid of those life cycle methods.
At first let’s see, what actually a useEffect hook is!

useEffect(() => {
        effect
        return () => {
            cleanup
        }
    }, [dependency])

useEffect hook is actually a function which takes two parameters. 1. A callback function 2. An array of dependency(optional).The rules are:

The callback function is the side effect that we need to perform which loads at the first rendering of the component. It is much like the componentDidMount life cycle method. If the second parameter is not given this callback function will render every time if any state or props change.
The second parameter is the dependency(state) which tells react to render the callback function only when the dependency changes. So when the dependency changes or updates, it will re-render. This is much like componentDidMount lifecycle method. It can be empty, if it is empty the callback function will render only once when the component mounts for the first time.
The callback function can also have a return value(cleanup). The return value only fires when the component will be unmount. So it will serve the componentWillUnmount cycle methods purpose. So in these way, we achieve the three cycle methods only using a single hook and that is useEffect hook. Now let’s do the application again but this time using functional component and useEffect hook.

import { useEffect, useState } from "react";
import "./App.css";
const App = () => {
    const [count, setCount] = useState(0);
    const [time, setTime] = useState(new Date());
    const [show, setShow] = useState(true);
    const tick = () => {
        setTime(new Date());
    };
    useEffect(() => {
        document.title = `you have clicked ${count} times`;
    }, [count]);
    useEffect(() => {
        const interval = setInterval(tick, 1000);
        return () => clearInterval(interval);
    }, []);
    const handleCount = () => {
        setCount((count) => count + 1);
    };
    const handleShow = () => {
        setShow((show) => !show);
    };

    return (
        <div className="container">
            <div className="post">
                {show && (
                    <div>
                        <p>Current time {time.toLocaleTimeString()} </p>
                        <button onClick={handleCount}>Count start</button>
                    </div>
                )}
            </div>
            <div className="controlPost">
                <button onClick={handleShow}>
                    {show ? "Hide post" : "Show post"}
                </button>
            </div>
        </div>
    );
};
export default App;

This will give the same output as the previous one. Now you may notice, unlike class components we have used useEffect hook two times(we can use life cycle methods only once in a component). Also, we defined states, using three different useState hooks and used separate useEffect hooks for separate states. This is the recommended way to handle states by isolating states.
We used count dependency in the first useEffect hook because whenever the state of count changes the function will re-render. And in the second useEffectHook, we returned a cleanup function to clear the timer when it will unmount.

Now let’s discuss how we accomplished the three life cycle methods using only one hook.

When component first mount, useEffect hook sets the document title and starts the clock which serves the componentDidMount purpose.
When the count is updated, It will again re-render the component using the count dependency. Again it serves the componentDidUpdate method's purpose
In the second useEffect hook, the callback function returns a clean-up function that clears the interval of the clock at component unmount. So this time useEffect hook works like the componentWillUnmount method.

The summary is useEffect hook gives us the advantage of using a single function to perform three different lifecycle methods which help us perform side effects in functional components and solves all the problems of lifecycle methods in class components.

binding "this"

Md. Imran Hossain — Sun, 09 Jan 2022 10:57:37 +0000

this keyword references an object. Using this keyword we may access the properties and methods of a class/object. Previously, I discussed the use-cases of this in this article. The summery is:

If a function is not part of any object, it will simply reference the global window object.
If a function is a part of an object, we call it as method. Inside a method thisreferences the object.

The main problem arises when we use a function(i.e. a callback function) inside that method of an object, this references the global window object and we may want to access(bind) the object and redefine the this inside the callback function.
Let’s see the problem first:

const books = {
  author: "john doe",
  books: ["history", "english", "math"],
  findBooks() {
    this.books.forEach(function (item) {
      console.log(`${this.author} like ${item}`);
    });
  },
};
books.findBooks();

Books is a simple object which has author and books properties and a method "findbooks".
"findBooks" simply logs the author and books information. Inside the "findBooks" function we have used a "foreach" method that has a callback function. Now the output should print:

‘john doe like history’,
‘jhon doe like english’
‘john doe like math’

Let’s see the output:

So we see this.author does not print the author name. So what’s happened actually? You see, this line of code console.log(${this.author} like ${item}) is inside the callback function and the callback function is a regular function, has different execution context and references the window object(recalling the summery 1 above). In short, callback function is not a part of the object it is inside.

So how do we access the object using this?
This is the concept behind binding data or binding object.
There are three different scenarios by which may access/bind the object inside the callback function.

1. Using Arrow function:
Unlike regular function, Arrow function uses the surrounding scope as the scope of this, So whatever the surrounding scope is becomes the scope of an arrow function.

const books = {
  author: "john doe",
  books: ["history", "english", "math"],
  findBooks() {
    this.books.forEach((item) => {
      return console.log(`${this.author} like ${item}`);
    });
  },
};
books.findBooks();

Output:

Now, the callback function doesn’t have it’s own scope rather it uses the findbooks methods scope.

2. Explicit bind method:
So I was thinking, If we stick to the regular function(as callback), there must be a way to bind the object.
This question has an answer too. We may use bind method to get access the object.

const books = {
  author: "john doe",
  books: ["history", "english", "math"],
  findBooks() {
    this.books.forEach(
      function (item) {
        return console.log(`${this.author} like ${item}`);
      }.bind(this)
    );
  },
};
books.findBooks();

Output:

this inside the bind method creates a little confusion. But fear not! see, we have access to this (books) object inside foreach. So, bind method also have access too. Now the regular callback function is binded with this object.

3. Assigning ‘this’ to a variable:

const books = {
  author: "john doe",
  books: ["history", "english", "math"],
  findBooks() {
    let self = this;
    this.books.forEach(function (item) {
      return console.log(`${self.author} like ${item}`);
    });
  },
};
books.findBooks();

Output:

We have assigned this to a variable(self) and use it inside the callback function. It is basically the closure concept that will not be covered in this article. But what it does, we get access to the variable declared in the parent function inside the child function . In this way, the self variable gets the reference of this, and later we used it inside the callback function.

This keyword in Javascript

Md. Imran Hossain — Thu, 06 Jan 2022 13:05:52 +0000

This means the object that is executing the current function.
There are two cases mainly using the thiskeyword.

If a function is not part of any object, it will simply reference the global window object.
If a function is a part of an object, we call it as method. Inside a method thisreference the object.

Let’s see the thisuse cases:

Thisby default references the window object. So, inside a normal function (not method in an object) thisreferences the global window object.

function greeting() {
    console.log(this)
}
greeting()

Now, let’s see what thisreferences inside an object.

Unlike the first case, here thisreferences the object itself it is in. So using thisthe properties and methods of an object can be accessed.
Now if we consider a constructor function, let’s see what the this method references.

function Greeting(fname) {
   this.fname = fname
   console.log(this)
}
const greetingObj = new Greeting('john')

Again, we see this referencing Greeting object (We call the constructor function using new keyword which creates an empty object, so this keyword eventually references the empty object)
Now, Let’s see what will happen if we use this keyword inside a function of a method.

const books = {
    author: 'john doe',
    books: ['history', 'english', 'math'],
    findBooks() {
        this.books.forEach(function (item) { console.log(this.author, item) })
    }
}
books.findBooks()

output:

The output should print the author name instead of undefined. So what’s wrong here! The callback function inside foreachis not a part of findbooks method, rather it’s a regular function which references the global window object, that’s why this.author yields to undefined.
To access the author property of book object, we use the second argument of forEach method. The second argument provides the object value that is required for this.

const books = {
    author: 'john doe',
    books: ['history', 'english', 'math'],
    findBooks() {
        this.books.forEach(function (item) { console.log(this.author, item) }, this)
    }
}
books.findBooks()

this as the second argument is the reference of books object which is accessed from inside of the callback function. But all the Javascript methods don't provide this(object) as argument.
In this case, we use some techniques like, 1. data binding 2. arrow function 3. Assigning this to another variable(closure concept). All the details is discussed in this article

CRUD operation with Expressjs and MongoDB

Md. Imran Hossain — Thu, 23 Dec 2021 17:50:20 +0000

We will create a CRUD(create, read, update and delete) application in this article with expressand MongoDB. You need to have basic understandings of MongoDB, express.js, javascript, and node package manager (npm) to install some packages. At the end of this tutorial, we will be able to create CRUD API’s.

I will use Postman to send the HTTP requests to the API created by this application. Before dive in, make sure your computer has node installed

Installations of necessary packages:
At first, we need to go to our command terminal and run following commands:

mkdir crud-operation
cd crud operation
npm init -y

These will create a folder name crud-operation and install necessary node packages
Now, install nodemonusing this command

npm install -g nodemon

nodemonis a tool that helps develop node.js-based applications by automatically restarting the node application when file changes in the directory are detected. This way we won’t have to start the server manually after a change in the index.js(we will talk about it later)

We will need some more packages to install

npm install dotenv cors mongodb express

dotenv is used to access the environment variables and cors is required to share cross origin resources.
Create index.js file in the root directory of the application.
Add the following two lines in the scripts object of package.json file.

 "start": "node index.js",
 "start-dev": "nodemon index.js",

So the basic configuration is completed. Now we will populate our index.js file to create our first-ever API.

const express = require('express')
const app = express()
const port = 5000

//middleware goes here section

app.get('/', (req, res) => {
    res.send('Hello World!')
})

app.listen(port, () => {
    console.log(`Example app listening at http://localhost:${port}`)
})

Run npm run start-dev command in the terminal. I am using postman to load the HTTP request. So place this link http://localhost:5000/ in the get request. Congratulation! It will display the http response.

hello world!

The Postman API response will be like so.

Now, Let’s decode the above code. We essentially get an express instance and assign it to app. The server needs a port to load to API response, we used port 5000. Then we created a get request in the root URL ( ‘/’ means http://localhost:5000/). The get request in reply gives us a response which is ‘hello world’. To access the server port 5000, we used the listen method which takes the port as the first argument and a callback function as second argument.

Create a MongoDB account unless you have one. Add a user in the database access section. Put the user name and password in the .env file. Set ip address to 0.0.0.0/0 in the network access section. Add the following in the index.js file.

const { MongoClient } = require('mongodb');
require('dotenv').config()
const uri = `mongodb+srv://${process.env.DB_USER}:${process.env.DB_PASS}@cluster0.krune.mongodb.net/myFirstDatabase?retryWrites=true&w=majority`;
const client = new MongoClient(uri, { useNewUrlParser: true, useUnifiedTopology: true });

async function run() {
    try {
        await client.connect();
        const database = client.db("CRUD");
        const blogsCollection = database.collection("blogs");

         //CRUD API’s goes here   
    } finally {
        // await client.close();
    }
}
run().catch(console.dir);

We have imported the MongoDB client. MongoDB gives us a connection uri to connect with MongoDB and using the username and password previously stored in the .env file, the uri string is updated. A database and a collection of the database are also created in the run function.

So far we have covered the basic building blocks to start an express app.
Now, we will create CRUD API’s.

Insert Data(create):
Add app.use(express.json()) in the "middleware goes here" section, and add following codes in the "CRUD API goes here" section.

app.post('/blogs', async (req, res) => {
    const blog = req.body
    const result = await blogsCollection.insertOne(blog);
    res.json(result)
})

There are lots of HTTP request methods i.e. GET, POST, PUT, PATCH, DELETE. To create data, we use post method. The first argument is the request API and the callback function is used to perform the create operation. The callback function also take two arguments 1. req(the API request) 2. res(response of the API from server)
The post data(i.e. Form data) from the request is assigned to the blog variable. The request body by default is a JSON object, to convert the JSON object into plain object, we need to use a middleware app.use(express.json()).
insertOne method is used to add the parsed request data to insert the blogCollection. In the end, the response of the api is sent through res.json(result).

If the data is inserted, the response will be 200 like so,

Find data : (Read)
Get all blogs:

app.get('/blogs', async (req, res) => {
    const query = {};
          const cursor = blogsCollection.find(query);
          const result = await cursor.toArray();
           res.json(result)
        })

Now we use the get method and the URL is the same as the post method. As we want to get all the data, the query is empty, and the find method is used to fetch all the data. The fetched data is converted into an array and sent as a response.
The postman response will be like so,

Find a single blog:
First we need to add const ObjectID = require('mongodb').ObjectID at the top.

app.get('/blogs/:id', async (req, res) => {
     const blogId = req.params.id;
     const query = { _id: ObjectID(blogId) };
     const result = await blogsCollection.findOne(query);
     res.json(result)
   })

To find a single blog we have passed the id parameter to the API and the parameter is accessed by req.params.id. Now we have to match the blogId to the id of blogs of the server. The result is sent as a response. The ObjectId is required to match the id to blogId.
The postman response will be like so,

Update:(put method)

app.put('/blogs/:id', async (req, res) => {
      const blogId = req.params.id;
      const blog = req.body;
      const filter = { _id: ObjectID(blogId) };
      const updateBlog = {
            $set: {
                title: blog.title,
                body: blog.body
               },
            };
      const result = await blogsCollection.updateOne(filter, updateBlog);
      res.json(result)
})

At first, we make a query to find the id we want to update using the api params and fetched the data that needs to be updated. The update fields are set and updateOne method is used to update the data.
Postman response will be like so,

Delete:

app.delete('/blogs/:id', async(req,res)=>{
      const blogId = req.params.id;
      const query = { _id: ObjectID(blogId) };
      const result = await blogsCollection.deleteOne(query);
      res.json(result)
 })

‘Delete’ method is used to delete a document from the database. Using the parameter, query is made and then deleteOne method is used to delete that. Finally, the response result is sent as JSON.
The postman response will be like so,

So that’s pretty much it. This way we can perform CRUD operation with node and MongoDB.
See codes at Github

Context API: Why and How

Md. Imran Hossain — Wed, 22 Dec 2021 17:23:48 +0000

Motivation:

One of the key features of React is one-way data binding which enables us to send props data from only parents to children. This is very useful as it’s easy to understand from where the data is passed into that component. But imagine a situation, where we are required to send data to more than 5 layers down!

The code starts to get messy from now on. Besides, it requires a lot of code repetition, unnecessary data passing to children which don’t need the data for themselves but to pass to their children, and difficult to maintain. This scenario is termed ‘prop drilling’.

<div user={user}>  —(1)
  <div  user={user}> —(2) 
    <div  user={user}>  —(3)  
      <div  user={user}>  —(4)
        <div  user={user}>  —(5)
          <div  user={user}>  —(6)
         <div  user={user}> —(7)
           <h2> {user.name} </h2>
             <div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

From the above abstraction, we see the prop is drilled to 7 layers down to get the user props data which is very difficult to keep track of. There is a better approach to avoid this situation which is using context API. Context API is used to create centralized data, much like global variables which can be accessed from anywhere. One may think of Redux(acts like a store that stores data and the store can be accessed from anywhere), but that is used in large and complex applications that require a lot of states to maintain. But that’s another story, we will stick to context API for now.

How to use:

First, we will create a folder in the src folder named contexts (not required. just a convention)
Now, we will create a provider, our case it’s AuthProvider. I will use functional component for this tutorial. So, let’s create AuthProvider component like so.

 import React from 'react';
  const AuthProvider = () => {
    return (
        <div>         
        </div>
    );
  };
  export default AuthProvider;

Now create a context (AuthContext) above the AuthProvider component and rename ‘div’ inside the component to AuthContext.Provider like so.

import AuthProvider from './Context/AuthProvider';
import User from './Component/User';
function App() {
  return (
    <div>
      <AuthProvider>
        <h2>Context API intro</h2>
        <User></User>
      </AuthProvider>
    </div>

  );
}
export default App;

React provides createContext API, which Creates a Context object. When React renders a component that subscribes to this Context object it will read the current context value from the closest matching Provider above it in the tree.
Notice, the created AuthContext is used is AuthProvider and provided a user as value. Also, children is taken as props and AuthContext is exported as the context will be consumed later.

So far we have created a context and provided a value to the AuthProvider. Now we will create a custom hook inside a hooks folder named useAuth, where we will consume the context like so

import { useContext } from "react";
import { AuthContext } from "../Context/AuthProvider";
const useAuth = () => useContext(AuthContext)
export default useAuth;

useContext hook is used to consume the context we created earlier.

Use AuthProvider component to the top of App.js so that every children gets access to the context api provided value. Meanwhile, create another component inside component folder named User.js like so

import AuthProvider from './Context/AuthProvider';
  import User from './Component/User';
  function App() {
    return (
      <div>
        <AuthProvider>
          <h2>Context API intro</h2>
          <User></User>
        </AuthProvider>
      </div>
    );
  }
  export default App;

Now we will use the context api provided value using the custom hook useAuth and display the user info.

import React from 'react';
 import useAuth from './../hooks/useAuth';
 const User = () => {
    const user = useAuth()
    console.log(user);
    return (
        <div>
            user name: {user.name}
        </div>
    );
 };
 export default User;

Finally, we have access to the value that was provided in the AuthProvider.

All the corresponding codes will be available here.

Diving into array methods and loops

Md. Imran Hossain — Tue, 21 Dec 2021 08:24:25 +0000

Introduction:

Array is a collection of items. An array has two basic properties.

Index
value

Let’s consider a number array with 10 elements.

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

Array elements are kept inside a square bracket and Its index starts with 0. So, the numbers array index starts from 0 to 9 and the values are 1 to 10. Array is one of the most important topics in Javascript and you should have a basic understanding of its methods and iteration procedure.

We will discuss in brief all the methods related to array and later we will talk about the array iteration.

Array methods:

Array length: To compute the array length this method is used.
The length of the above array:

numbers.length // 10

This will return 10

Finding index of an element:

numbers.indexOf(5) //4

If the number will be not found, it will return -1

Array to string:
Sometimes we need to convert array elements to simple string.

numbers.toString() //1,2,3,4,5,6,7,8,9,10

Array join method:
Join method also converts an array to string, in addition it will add separator.

numbers.join(' * ') //1 * 2 * 3 * 4 * 5 * 6 * 7 * 8 * 9 * 10

Add an array element at the last:
We can add elements at the end of the array by using push method.

numbers.push(11) 
console.log(numbers)    //  [1,2,3,4,5,6,7,8,9,10,11]

Remove an item from array at the last:
Array elements can be removed using pop method from the last of an array.

numbers.pop()  // 11 
console.log(numbers) // [1, 2, 3, 4, 5, 6, 7,8,9,10]

Add an element at the start of an array:
Unshift method is used to add an element to the start of an array.

numbers.unshift(0)
console.log(numbers) // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9,10]

Remove an element from the start of an array:
Use Shift method to remove an element from the beginning of an array.

numbers.shift() //0
console.log(numbers) //[1, 2, 3, 4, 5, 6, 7, 8, 9,10]

Merging Two arrays:
Two array can be merged using concat method.

const numbers2 = [11,12,13,14.15]
const mergedArray = numbers.concat(numbers2) //[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]

Slice Method:
To make a copy of an array element, we use slice method. Slice method is very useful because of its immutability nature. Immutability property means the original array will be unchanged after slicing elements from an array. Slice method returns a new array containing the extracted elements.
Syntax:
array.slice(start, end)

If start is undefined, slice starts from index 0
If start is greater than the length of an array, an empty array is returned
Slice extracts up to but not including end
If end is omitted, slice extracts through the end of the sequence (arr.length).
If end is greater than the length of the sequence, slice extracts through to the end of the sequence (arr.length).

const fruits = ['apple', 'banana', 'mango', 'orange', 'pine apple'.'guava']
let slicedFruits = fruits.slice(1,4) // ['banana', 'mango', 'orange' ] 
slicedFruits = fruits.slice(2) //['mango', 'orange', 'pine apple', 'guava']
slicedFruits = fruits.slice(2, 10) //['mango', 'orange', 'pine apple', 'guava']
slicedFruits = fruits.slice() // ['apple', 'banana', 'mango', 'orange', 'pine apple'.'guava']

console.log(fruits) // ['apple', 'banana', 'mango', 'orange', 'pine apple'.'guava']

Notice, after slicing elements from the fruits array, still the fruits array hasn’t been changed

Splice method:
The splice method changes the content of an array by removing elements from the array and returning a new array with the removed elements. The main difference between slice and splice is: slice makes a copy of array elements and doesn’t modify the original array whereas splice removes elements from the array and modifies the original array (mutability) in the process.

Syntax:
array.splice(start, deleteCount)

Start is the index at which to start changing the array deleteCount is an integer indicating the number of elements in the array to remove from start.
If deleteCount is omitted, all the elements from start to the end of the array will be deleted

const fruits = ['apple', 'banana', 'mango', 'orange', 'pine apple', 'guava'] 
let splicedFruits = fruits.splice(1, 2) // ['banana', 'mango']
console.log(fruits) // ['apple', 'orange', 'pine apple','guava']
splicedFruits = fruits.splice(1) // ['orange', 'pine apple', 'guava']
console.log(fruits) // ['apple']

Notice, the original fruit array is changing after every split method.

Array Iteration/ Loops:

Array iteration is one of the most important things to iterate every element and access its properties. This can be done in a lot of ways including the tradition for loop to higher-order functions like map, forEach, find, etc. We will cover them in detail.

For loop:
For loop is the basic loop to loop through an array.

const fruits = ['apple', 'banana', 'mango', 'orange', 'pine apple', 'guava'] 
for(let i=0; i<fruits .length; i++){
        console.log(fruits [i])
}

output: apple banana mango orange pine guava

While loop:

let i=0; 
while(i<fruits .length) {
console.log(fruits [i]);
 i++;
}

output : apple banana mango orange pine guava

Do while loop:

let i=0;
do(console.log(fruits [i]))
while(i<fruits .length)
i++;

output : apple banana mango orange pine guava

For of loop:

for(let fruit of fruits){
   console.log(fruit)
}

output: apple banana mango orange pine guava

So using these loops we can easily iterate the array elements. But what if we want to return an array after iterating the array elements or execute a certain function for each of the elements! This is really useful when we want to modify the array elements, filter array elements based on a certain condition, or find only an element based on certain criteria. These functionalities can be done using some array methods which are known as higher-order function( a function/ method which takes a function as an argument or return a function) i.e. forEach(), map(), filter(), reduce()

ForEach:
forEach method takes a function( a callback function that takes index and current element as argument) as its argument and executes a provided function once for each array element. Its return value is undefined.

fruits.foreach((item, index)=>{console.log(item)})

output: apple banana mango orange pine guava

Map:
Similar to forEach method but it returns an array and takes a function as its argument.

const mappedFruits =  fruits.map((item, index)=>{ return index + ' '+ item})
console.log(mappedFruits)

Output: ['0 apple', '1 banana', '2 mango', '3 orange', '4 pine apple', '5 guava']

Filter:
The filter method is used to filter elements based on certain conditions. It also returns an array.

const filteredFruits = fruits.filter(item => item.includes('an'))
console.log(filteredFruits)

Output: ['banana', 'mango', 'orange']

What this code eventually does is, find the items that include the two character ‘an’ , filter them and returns them as an array

Find:
Find method is self-explanatory. It finds the element from an array based on certain conditions and behaves like the filter method except for returning only the first element that matches the condition.

const findFruit = fruits.find(item=> item.includes('an'))
console.log(findFruit)

Output: ‘banana’
Reduce:
The reduce() method executes a user-supplied “reducer” callback function on each element of the array, in order, passing in the return value from the calculation on the preceding element. The final result of running the reducer across all elements of the array is a single value.
Sounds overwhelming? Well, let's take an example:

const numbers = [10, 20, 40, 23, 42]

Let’s calculate the sum of the array elements using reduce() method.

const sum = numbers.reduce((previousValue, currentValue)=> previousValue+ currentValue, 0);
console.log(sum)

Output: 135

Reduce method takes two arguments: 1. Reducer call-back function 2. Initial value. In our case, the initial sum value is given 0. The reducer callback function takes 4 arguments: previous value, current value, current index, and the array to traverse. The third and fourth are optional.

In our case, we took two arguments. The current value is the current array item and the previous value is the previous iteration value which is set to 0 if the initial value is set to 0 or not defined and after the first iteration the return value is assigned to the previous value and the iteration is going on.

Understanding CSS Flexbox

Md. Imran Hossain — Sun, 19 Dec 2021 16:47:13 +0000

Flexbox, The first thing that comes to our mind designing a layout. Layout designing was never been this easy before flexbox is introduced.
From designing a simple navbar to a very complex UI, Flexbox is a must because of its simple structure and easy-to-maintain nature.
Before diving into the brief concept, make sure you know the basic building blocks of HTML5 and also CSS.

Basic Building Blocks:

A Flexbox has two major parts. First is the flex container and second one is flex items. Flex container is the wrapper of flex items and Flex items are the layout elements.

<section>
 <article>
  <p>lorem ipsum dolor ip somet</p>
 </article>
 <article>
  <p>lorem ipsum dolor ip somet</p>
 </article>
 <article>
  <p>lorem ipsum dolor ip somet</p>
 </article>
</section>

Here the section is the flex container and all the articles are flex items. To style this layout we need to use the flex property in the flex container.

display: flex;
flex-direction: row;

The possible output of this code is the articles will be displayed in a row.
By default, flex-direction is set as row. There is also another property of flex-direction is the column. The main concept behind this is the two major axes of displaying layout. They are 1. Main axis 2. Cross axis.
Main axis: The main axis is the axis running in the direction the flex items are laid out in (for example, as rows across the page, or columns down the page.) The start and end of this axis are called the main start and main end.
Cross axis: The cross axis is the axis running perpendicular to the direction the flex items are laid out in. The start and end of this axis are called the cross start and cross end.

Wrapping:

If the number of articles will be increased to 10 or so then only a row will not capable to display the flex items properly. And that's where the wrapping comes as a savior. It organizes the flex items in such a way that every item will take the minimum width of available width and when no space is available to rest of the flex items will be wrapped to a new line. Wrapping prevents the document from overflowing.
flex-wrap: wrap
The shorthand of flex-direction and flex-wrap:
flex-flow: column wrap

Horizontal and vertical alignment:

So far, We can position our layout elements into rows or columns and if the layout elements overflow, we use wrap to prevent it.
The biggest advantage of flexbox is, it calculates the available space and divides them equally irrespective of the width of the webpage screen. This available space can be aligned both along the horizontal and vertical axis.
If we want to center horizontally and divide the whole space with equal spacing, we want to use the justify-content property.

section{
 display: flex;
 justify-content: center;
 flex-flow: row wrap;
}

In addition to this, we may need to align them vertically center. In order to do this, we just need to add the property align-items: center with the above code.
Notice, here we used flex-direction as a row, it would be nice if you try it for direction as a column.
Other justify-content properties: space-around, space-between, flex-start and flex-end
align-items properties: _center, flex-start, flex-end, stretch, baseline

Controlling Flex items:

Till now, we only have worked with flex containers, there are also some properties for flex items that give us more power over flex items.

Flex
Flex property has three values specifying-
A unitless value representing how much space an item will take, which is called flex-grow property
Another unitless value representing how much an item will shrink in order to prevent overflow, which is called flex-shrink
The last value is the minimum width an item will take, commonly known as flex-basis
There is a shorthand comprising the three values. Flex shrink is used for advanced cases, so we will omit that for now.

article {
  flex: 1 200px;
}

article:nth-of-type(3) {
  flex: 2 200px;
}

These code blocks suggest the entire width will be a total of 4(1+1+2) fractions and the first two elements will get a minimum of 200px width and if more width is available then they will take 1/4th of the remaining space each. Only the third element will get half of the total space.

Align self
In addition to the align-items property that is used in the flex container, align-selfoverrides the align-items property.
align-self is specified in the flex items.

align-self: flex-end;

Ordering flex items
By default, each flex item has the order of 0 and the order will be according to their declared position. This order can be changed using the order property of flex items.

article:first-child{
 order:1
}

This eventually moves the first element of the flex items to the last. The order value can be negative. In that case, a negative value will take the initial position.

So these are the things you need to know to get started with Flexbox. To get the more clear and more brief idea, I suggest MDN's CSS layout documentation.