DEV Community: Akhil Dhiman

Asynchronous JavaScript: The Event Loop

Akhil Dhiman — Tue, 19 May 2020 13:03:09 +0000

If you're talking about Asynchronous JavaScript, it's really important to understand the event loop and how things work under the hood.

Let's take an example to understand a simple asynchronous operation in JavaScript.

setTimeout(() => {
    console.log("Hello")
}, 1000)

console.log("Me first")

//me first
//Hello

setTimeout is a browser API that executes a piece of code after a specified time interval like 1000ms, 2000ms, etc. You can read about it in detail here.

The order of execution will be me first and then Hello- because of the non-blocking nature of JavaScript.

We all know that JavaScript works on a single thread, also known as the main thread. In case of async scenarios like waiting for some seconds to complete a task, the main thread needs to be blocked-- but that's not really how JavaScript works. Let's dig into it!

When setTimeout is called, a timer fires up in the browser. In our case, the timer expires in 1000ms. This timer has a reference to our callback function. In order for the cb function to be executed, it needs to be pushed to the call stack. CallStack is a data structure that keeps track of functions and the order in which they are executed.

When our timer finishes in the background, the callback function is ready to get executed, but before that, it doesn't really get pushed to the call stack directly. Instead, It gets queued to the callback queue. Now, the control shifts to the event loop.

Event loop is a process that checks whether the call stack is empty or not. If it's empty, the event loop takes out our function from the callback queue- or deques it- and pushes it to the call stack. Now, the function gets executed and prints out "Hello". The event loop just sits between the call stack and the task/cb queue.

Coming back to our example again, JavaScript encounters the first line; Oh! It's a setTimeout, we'll have to wait for it to finish in the background. Meanwhile, jump to the next line which reads console.log("Me first"). So it just logs that out. After, it logs "Hello".

Similarly, if we take this example, the result will still be the same!!

function sayHello() {
  console.log("Hello")
}

function meFirst() {
  console.log("me first")
}

setTimeout(sayHello, 1000)
meFirst()


//me first
//hello

setTimeout is invoked; it goes to the Web API land where the timer runs.
Meanwhile, meFirst function is pushed to the stack, prints "me first", and gets popped off.
Timer completes, the cb sayHello gets queued to the callback queue/task queue.
Now, the call stack looks empty because meFirst has already been popped off.
So, event loop pushes the cb sayHello to the stack.
"hello" gets printed.

If you want to visualize, you can check out for yourself how the event loop is working- here.

Thank You for reading this article. Follow me on Twitter for more updates.

Working with Remotes and Branches in Git

Akhil Dhiman — Tue, 05 May 2020 18:44:52 +0000

Git has been an essential tool for software development that offers speed and flexibility to the developers. In this post, I'll be talking a little about working with branches in a version control system like git, and how it helps you manage and track your code easily.

Here is what we are going to do:

Create a repository in GitHub.
Clone the repo in the local system.
Create a branch.
Merge the branch into master, and delete it.

This will give you a basic idea of how to deal with things like merging that often confuses the hell out of beginners.

So let's get started!

git clone https://github.com/user/gitTest.git

I have cloned a repo named gitTest to the desktop that has a single file index.html.

Next up, if you type git remote -v, you'll see some details about the remote. But what's a remote?

remote is a repository located somewhere over the internet that's-- in our case, on GitHub and origin is just the name of that repository. Note that origin is the default standard, and you can name it anything-- if you happen to create a remote by yourself.

git clone command automatically sets up your local master branch to track the remote master branch (or whatever the default branch is called) on the server you cloned from.

Now that we've cloned the repo, it's time for us to create a branch. Let's call it feature1.

git checkout -b feature1
git add feature1.html
git commit -m "add feature1.html"
git push origin feature1

We just created another file titled feature1.html, added it to the staging area, and commit. After that, we pushed our feature1 branch to the central git repository, so that we could see the changes on GitHub. Now, as you look under the dropdown on GitHub, you'll see a feature1 branch besides master.

Now, our work is done on this branch, and we want to finally merge it to the master. You could either create a pull request for it to be merged or we can merge it locally. Pull requests are the standard for they are useful in code reviews. But let's merge it locally. For that to happen, we have to go to the branch where we want our local feature1 branch to be merged into, which is- master.

git checkout master
git merge feature1
git push origin master // to view the changes on GitHub

Cool! feature1 has been merged, but we can't see the changes on GitHub yet. In order to achieve that, we have to use git push origin master again. Now, you'll see that we have feature1.html alongside index.html in master.

After the work is done, we'll delete our branch- both locally and remotely.

git branch -d feature1
git push origin --delete feature1

Note that you can not delete a branch while you're on it. Make sure to check out.

Additionally, when multiple people are working in a team, it's important to stay up-to-date with the master. So, after a branch gets merged, it's advisable to use

git checkout master
git pull origin master

This will just update your local repo with the updated master branch.

Thank You for reading this article. Follow me on Twitter for more updates.

How The Web Works

Akhil Dhiman — Thu, 19 Mar 2020 13:51:11 +0000

We've come to a time where the internet is omnipresent and browsers play an important part when it comes to communication between the client and the server. Wait, hold on!

Client is usually the computer or a machine that a user has access to, and wants to access some resource from the server. The server is not an imaginary cloud of information, it's also someone's computer located elsewhere or your local machine if you've created and set the server yourself for your web app. For example, Piratebay has many servers located at different locations(that no one knows).

In this article, we'll go through the process of how you get to see what you see, i.e., information(web pages) in your browser and all that's happening behind the scenes within a fraction of time.

Let's say you're using Google Chrome and want to go to Google's home page. Well, you'd just type the URL in the address bar, hit enter, and get the page. As simple as that. Now, let's look into some more details about what the web has to offer.

When you search for an address like google.com, the browser doesn't really remember the websites by their URL. What browsers are really interested in are the IP addresses of the websites. So, in order to fulfill your request, there's something called DNS lookup. But first, we ought to know what DNS really is.

Domain Name Systems

DNS is the phone book of the internet, but with a list of URLs and their IP addresses. Just like we look for the person's name and then his associated phone number in the phone book, similarly, DNS servers have the URLs of websites and their IP. Interestingly, you could easily access the website just by typing in the IP address in your browser's address bar. In case you're really wondering, you should check this tool called IPChecker.

We can access google.com by its IP address- 172.217.9.238. We need not to remember the IP every time we're requesting for a webpage. That's where DNS comes in. All in all, DNS links and stores hostnames(www.google.com) to a specific IP address. These records are known as DNS records.

Every URL has a unique IP address associated to it. So, the aim of the browser is to look in the DNS records, the IP address of the server where the website lives on.

Before we dive further in, you should know how the client and the server communicate with each other. I like this analogy from the docs and it says- For now, let's imagine that the web is a road. On one end of the road is the client, which is like your house. On the other end of the road is the server, which is a shop you want to buy something from.

Let's imagine this with The Beatles emerging from their house crossing the Abbey Road and going towards the shop for buying some classic vinyls.

Client's machine is connected to the internet via its Internet Service Provider like Verizon, AT&T, etc. ISPs have their own DNS servers.

Every ISP has a database of DNS names and their corresponding IP addresses.

The Flow

Your Browser makes a request to google.com.
Your ISP will look for the IP address of the server that hosts google.com.
If It finds out successfully, the communication channel is opened with the server that matches the IP address, a.k.a TCP/IP.

TCP/IP is the fancy name of the networking protocols or a set of rules designed for how the data should travel across the web. HTTP requests are made over this protocol. Data is sent via packets or small chunks for they are convenient when a large number of users are accessing the same website. Sending data via a single big chunk would be okay for a single user but horrendous for multiple users.

Request usually contains the information like the client's info, desired address, browser name, request method, connection-headers, cookies(to identify the user) and the response will mostly be status codes, the actual data, etc.

After the connection is established, the browser sends a GET request asking for google.com and google's server sends the response to the browser. Browser downloads the HTML, CSS and the JS, the three things responsible for a web page to show. Finally, you can access Google's home page. Hooray!

Thank You for reading this article. Follow me on Twitter for more updates.

JavaScript Under The Hood: The Execution Context

Akhil Dhiman — Mon, 17 Feb 2020 07:50:35 +0000

Before writing this post, I'd like to thank Will Sentance and the folks at Codesmith for their Hard Parts course on Frontend Masters. It's a must-watch for developers learning what actually happens under the hood.

Before you dive deep into JavaScript, it's important to understand what's going on behind the scenes.

We all know that JavaScript is a single-threaded programming language. It means that the thread of execution executes one line of code at a time.

Execution Context is the environment created when our code runs. When we start the program, we are in the Global Execution Context and whenever a function is called or invoked, we enter the Local Execution Context. There are two parts in an Execution Context that we must know:

Thread of Execution- goes through line by line and executes the code.
Memory- the variables and functions declared will be stored in the computer's memory by JavaScript for later use.

Besides this, we also have to understand what function and global code is:

Global code – The default environment where your code is executed for the first time.
Function code – Whenever the flow of execution enters a function body.

Let's look at this example to understand what actually happens when JavaScript sees our code.

const num = 3
function multiplyBy2(inputNumber) {
    const result = inputNumber * 2
    return result
}

const output = multiplyBy2(num)
const newOutPut = multiplyBy2(10)

Alright, by default, we are in the Global Execution Context and it has a memory called Global Memory.

Global Memory

We declare a const num and assign it a value of 3.

We define a function by the identifier or label multiplyBy2 and store the entire function definition in it.

The thread of execution goes down. Now, we declare a const output . At the time, we don't know its final value, but what we know is that the output const will store the result of multiplyBy2 function.

So, we've now encountered a function invocation and whenever a function is invoked, we create a Local Execution Context. Let's jump into it.

Local Execution Context of multiplyBy2(num)

We store the parameter inputNumber in the local memory and assign it a value of 3. inputNumber is a placeholder for the argument num ( in fact, it's called a parameter) which is equal to 3 because it has already been declared in the global memory. * Next up, we decare the const result and store the result of inputNumber * 2 , which is 6. * We return the value of the result const. JavaScript looks for the value of result , finds it in the local memory, returns it, and thus we now have the value for the const output equals 6 in the global memory.

const output = 6

The function ends and the Local Execution Context is destroyed. The thread of execution is back to Global code from the function code. It's also popped out from the Call Stack.

Call Stack is a data structure that keeps track of our code. It tells us which function's execution context is running, so the thread of execution points to that function in the call stack. Whenever a function is invoked, we create a local execution context and push it to the call stack, and when it's finished, we pop it off. Global code is by default in the call stack as soon as we start running our code. There can only be one function running at a time. Callstack helps keep track of that.

Now, we're back in global. In the last line, we declare another const with the label of newOutPut.

Once again, we don't know its final value yet. By default, it is uninitialized.

Local Execution Context of multiplyBy2(10)

We push this function to the top of the call stack.
We'll do the same steps again and again.
We assign inputNumber with a value of 10 in the local memory, get the result and assign it to newOutPut in the global memory.

const newOutPut = 20

Finally, we pop the function of the call stack.

So, that was the whole thing behind the Execution Context and how JavaScript runs our code.

Thank You for reading this article. Follow me on Twitter for more updates.

Scheduling Cron Jobs in Node.js

Akhil Dhiman — Thu, 09 Jan 2020 04:28:54 +0000

Cron jobs in node.js come in handy whenever there's a need to run scripts on the server over and over again at certain intervals. It could be any task, such as sending email to the user at any particular time or day. In this article, we're going to test that with the help of nodemailer.

To begin with, we will create a node application with the following commands:

mkdir cron-jobs
npm init -y

Now, we need to install node-cron and nodemailer packages from npm. Create a file called index.js as the entry point of the application or simply, our server file.

npm install node-cron 
npm install nodemailer
touch index.js

//index.js
const express = require("express")
const cron = require("node-cron")
const nodemailer = require("nodemailer")
const app = express()

app.listen(8000)

Before setting up the cron job, let's first configure nodemailer.

let transporter = nodemailer.createTransport({
    service: "gmail",
    auth: {
        user: "email@gmail.com",
        pass: "password"
    }
})

let mailOptions = {
    from: "email@gmail.com",
    to: "receiveremail@gmail.com",
    subject: "Nodemailer",
    text: "Testing Nodemailer",
    html: "<h1>Testing Nodemailer</h1>"
}

transporter.sendMail(mailOptions, (err, info) => {
    if(err) {
        console.log("error occurred", err)
    } else {
        console.log("email sent", info)
    }
})

transporter is an object that holds the email service we are using, an auth object having sender's email and password.
mailOptions contains standard email info. We can also use templates such as ejs or hbs.
sendMail method takes in mailOptions and a callback.

It's important to note that we're using gmail as the service. In order to use it, we will have to turn on the less secure app feature.

Cron's schedule method takes in:

Time interval at which the cron job will run.
Callback function which runs after the message is sent.

The asterisks in cron.schedule refer to the time interval at which the code will get executed. We can set the time up as described in the format below:

┌──────────────── second (optional) 
| ┌────────────── minute 
| | ┌──────────── hour 
| | | ┌────────── day of month 
| | | | ┌──────── month 
| | | | | ┌────── day of week
| | | | | | 
| | | | | |
* * * * * *

//For a cron job to run every second
cron.schedule("* * * * * *", () => {
    //code to be executed
})

//This will run every 10 seconds
cron.schedule("*/10 * * * * *", () => {
    //code to be executed
})

//This will run at the start of every minute
cron.schedule("0 * * * * *", () => {
    //code to be executed
})

//This will run at the start of every hour
cron.schedule("0 * * * *", () => {
    //code to be executed
})

// This will run on 20th of every month at 02:00 hours
cron.schedule("* 02 20 * *", () => {
    //code to be executed
})

Setting up the cron job with nodemailer

Final code would look like this:


const express = require("express")
const cron = require("node-cron")
const nodemailer = require("nodemailer")
const app = express()

let transporter = nodemailer.createTransport({
    service: "gmail",
    auth: {
        user: "email@gmail.com",
        pass: "password"
    }
})

// Here, we're scheduling a cron job and it will send an email at the start of every minute.
// Info contains the mail content.
// In case of sending mail to multiple users, we can add multiple recipients.
cron.schedule("* * * * *", () => {
    console.log("sending email")
    let mailOptions = {
        from: "email@gmail.com",
        to: "receiveremail@gmail.com",
        subject: "Nodemailer",
        text: "Testing Nodemailer",
        html: "<h1>Testing Nodemailer</h1>"
}

transporter.sendMail(mailOptions, (err, info) => {
    if (err) {
        console.log("error occurred", err)
    } else {
        console.log("email sent", info)
    }
  })
})

app.listen(8000)

Finally, head over to your terminal and start the server.

node index.js

Thank You for reading this article. Follow me on Twitter for more updates.

Setting up a React project using Webpack and Babel

Akhil Dhiman — Mon, 23 Dec 2019 21:19:59 +0000

Webpack is currently one of the hottest tools out there. It is quite difficult to understand in the beginning but I'd say Webpack is a really beneficial tool that optimizes your Web application. Let's first understand the basics.

As our application grows, we split it into multiple files, known as modules. Webpack is a module bundler for all our assets. In simple words, webpack processes all the modules and generates a single file known as bundle and give it to the browser that it will understand.

In this article, we're going to set up our React application using Webpack and Babel. So let's get started.

mkdir react-webpack-setup
npm init -y

npm init-y will generate a package.json file in your root folder of react-webpack-setup with all the information.

{
  "name": "react-webpack-setup",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

It will also generate a Node_Modules folder which contains npm libraries such as react, react-dom (which we're going to use) that our project needs. You shouldn't push it to Github, instead create a .gitignore file and push inside it. Whosoever clones your repo will be able to download it themselves based on your package.json

Now, we're going to create an src folder where we'll have our index.js and index.css files.

touch src/index.js
touch src/index.css

We're also going to install react and react-dom from npm.

npm i react react-dom --save

index.js would look something like this. Here we have a simple App component.

import React from "react"
import ReactDOM from "react-dom"
import "./index.css"

const App = () => {
    return (
        <div className="App">
            Hello World
        </div>
    )
}


ReactDOM.render(<App />, document.getElementById("root"))

Interestingly, index.js is a module that contains some modern things like JSX and arrow functions. That's where Babel comes in. We'll discuss that later.

Next up, we're going to install some dependencies.

npm install --save-dev @babel/core @babel/preset-env @babel/preset-react
webpack webpack-cli webpack-dev-server babel-loader css-loader
style-loader html-webpack-plugin

Notice these are all dev dependencies. So, there's something you should know about dependencies. Normal dependencies like react and react-dom are the ones that our application needs in order to run whereas dev-dependencies are the ones that our application needs in order to build.

Webpack takes all our modules (we only have a single index.js module here), and create a single bundled file that we can later reference in our index.html file.

Now, in order to configure webpack, we need to create a webpack.config.js file in our root folder.

touch webpack.config.js

const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")
const MiniCssExtractPlugin = require("mini-css-extract-plugin");


module.exports = {
    entry: "./src/index.js",
    mode: "development",
    devtool: 'inline-source-map',
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "bundle.js"
    },

    module: {
        rules: [
            {test: /\.(js|jsx)$/, use: "babel-loader"},
            {test: /\.(css)$/, use: ["style-loader", "css-loader"]}
        ]
    },

    plugins: [
        new HtmlWebpackPlugin({
          template: "./src/index.html"
        }),
        new MiniCssExtractPlugin({
            filename: "bundle.css"
        })
    ]
}

We're telling webpack the entry point of our application i.e., index.js. Mode can be set to development or production.
Source-maps are cool in case of debugging. Source map keeps the transformed code and the original code in sync so that when debugging, the developer has the option to look into the original code instead of the complex bundled code.
Finally, we're telling webpack to emit the bundle in the dist folder.

Next, there's a module with a set of rules defined. It simply says whenever a js/jsx module is encountered, hand it over to the babel-loader. Babel-loader simply converts/transpiles the ES6 code to the code that the browser can understand.

The css-loader interprets @import and url() like import/require() and will resolve them. Style loader takes the css and insert into the page.

HtmlWebpackPlugin generates an index.html automatically which includes a reference to the bundle.js file. We can also create an index.html file. Webpack uses index.html as a template. It would look something like this.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>React Webpack Setup</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>

We're mounting our React app here .We're not using script tag here, because HtmlWebpackPlugin will create a dist folder with index.html and add a script tag automatically referencing bundle.js. Basically, we're creating a template for the generated HTML file, not the actual file.
HtmlWebpackPlugin will copy that template, and add your changes on top of it in the index.html that it spits out.

MiniCssExtractPlugin extracts CSS from every module and returns a single bundled CSS file called bundle.css.

Now, create a .babelrc file.

{
 "presets": [
        "@babel/preset-env", "@babel/preset-react"
    ]
}

We know that Babel transpiles code that the browser can understand. It uses various plugins like @babel/plugin-transform-arrow-functions' which transpiles ES6 arrow functions. Babel has moved one step ahead by creating presets. Presets contain various in-built plugins so that we don't have to use separate plugins for every other transformation. How cool!

@babel/preset-env transpiles ES6 syntax to ES5 or whatever the browser can understand whereas @babel/preset-react handles the conversion of JSX modules into the simpler form.

Now, we've set up everything, it's time to start the server, and to do that, we're going to add a script in our package.json file.

    "start": "webpack"

After you type npm start, you'll see Hello World on the screen. Also, you'll get a brand new dist folder with index.html and bundle.js file.

Alternatively, if you use webpack-dev-server, you won't see the dist folder. Stackoverflow says- ""webpack-dev-server serves from memory. If you want to see the files on disk during development with webpack-dev-server, you'll need to run a standard webpack build concurrently"".

Thank You for reading this article. Follow me on Twitter for more updates.

Beginner's Guide to React.js

Akhil Dhiman — Mon, 23 Dec 2019 05:23:54 +0000

In this article, we'll discuss some of the basic topics in React:

Virtual DOM
JSX
Components
Props
State

React is a JavaScript library used for building user interfaces. In other words, you could say it's responsible for the view layer of our web application.

Declarative

React follows the declarative style of programming. It simply means, "what we want", unlike the imperative style that follows the "how do we do this ?" approach. Let me explain a bit further. Assume, your objective is to go to the hospital. Now, there are two ways of going about this.

Declarative: You just want to reach the hospital.

Imperative: You look for the route, board a taxi, and finally reach the destination.

Component-Based

This is one of the best features in React. At this time, just remember that components in React are just basically JavaScript functions, and there are two ways to define them. We'll cover more of the components as we move further.

Virtual DOM

You might know about DOM, right? Well, the virtual DOM is quite similar to the actual DOM. You might recall in JS, whenever anything changed, the DOM would update the nodes in the DOM tree and subsequently, our page would change.

The virtual DOM remains in-sync with the actual DOM. What React does is that whenever we update (change the state) our application, it compares the previous state to the updated state (using the diff algorithm), in turn, creates an updated Virtual DOM, and finally applies the changes to the actual DOM. Well, the question is, "Why can't React update the actual DOM directly ?" If we change the state every now and then, we would have to re-render our elements every time, and that makes for a really expensive task. Virtual DOM only updates the latest changes that have been made, and thus makes it more efficient.

You could read more about this in the official docs.

image courtesy of cronJ.com

JSX

JSX looks similar to HTML, but it's not. It's the syntax notation used to "create" React elements and thus the UI.

function App() {
  return(
    <h1 className="header">Hello World</h1> // JSX
  )
}

Under the hood, if you try and open babel, React sees the above code like this:

React.createElement("h1", {className: "header"}, "Hello World");

You could style React components in a number of ways. There's a good article on styling here.

Components

A component is a JavaScript function or a class that returns a React element and describes how the UI should look like. Let's understand this with an example.

Functional Component

function App() {
    return(
        <h1>Hello World<h1>
    )
}

Output: Hello World

You cannot use methods like setState() in functional components, that's why they're called stateless components because functional components return the UI from the input provided by us. On the other hand, if you look at a class component, you could see it has a constructor, a state, and after we could even change the state. So, it's somewhat of a stateful component.

Class-Based Component

class App extends React.Component {
    render() {
        <h1>Hello World<h1>
    }
}

Output: Hello World

render() method is required when it comes to class-based components.

Props

Props are used for passing data from one component to another component. You could say that props are like data-attributes. Let's see why!

function Name(props) {
    return(
        <h1>Hello, {props.name}</h1>
    )
}

function App() {
    return(
        <Name name="Rick"/>
    )
}

ReactDOM.render(<App />, document.getElementById("root"))


Output: Hello, Rick

So, we have two components here, i.e., Name and App component. React calls the Name component with {name: "Rick"} as the props which we've defined in the App component. Remember, props are in the object form. In simple words, Name will receive the "name" key of the object props, and thus renders the element onto the screen.

The Documentation says- "All React components must act like pure functions with respect to their props." Props are read-only. Props are immutable. Props are always passed from outside the component. The function returns what we want it to return. The solution was to define something that would come in handy while handling dynamic data. Yes, you're thinking right, it's called State.

State

The state is one of the most important concepts in React. Almost everything depends on it. With every state change, our view changes.
This is a simple example of a counter. When the button is being clicked, the count value should increment by one.


class App extends React.Component {
  constructor() {
    super()
    this.state = {
      count: 0
    }
    this.handleClick = this.handleClick.bind(this)
  }

  handleClick() {
    this.setState((prevState) => {
      return {
        count: prevState.count + 1
      }
    })

  }

  render() {
    return(
      <div>
        <h1>{this.state.count}</h1>
        <button onClick={this.handleClick}>Increment</button>
      </div>
    )
  }
}

What we want to do here is to update the counter, i.e., update the previous state by one. We cannot go here and say:

this.state.count + 1

Instead, in order to set the state, React uses setState() method. It's important to note that setState is asynchronous. In order to avoid that, callback comes in handy. In the above code snippet, while setting our state, we've used a callback receiving prevState as a parameter. So, we return the previous state and increment it by one, every time the button is clicked.

If you want to become an awesome React developer, check out this article from Toptal. It provides a detailed insight into topics like higher-order components, functional programming in React, state management, plus many more. So, make sure to check it out!

Thank You for reading this article. Follow me on Twitter for more updates.

Lifting State Up

Akhil Dhiman — Sun, 22 Dec 2019 17:18:24 +0000

You might've heard about Lifting Your State hundreds of times before but have really been unable to comprehend what does it actually mean, neither do I.

So, I looked up the official docs and the docs say- Often, several components need to reflect the same changing data. We recommend lifting the shared state up to their closest common ancestor.

Let's understand this with a simple example.

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class Counter extends React.Component {
  state = {
    counter: 0
  };

  decrement = () => {
    this.setState({ counter: this.state.counter - 1 });
  };

  increment = () => {
    this.setState({ counter: this.state.counter + 1 });
  };

  render() {
    return (
      <>
        <button type="button" onClick={this.decrement}>
          -
        </button>
        {this.state.counter}
        <button type="button" onClick={this.increment}>
          +
        </button>
      </>
    );
  }
}

class App extends React.Component {
  render() {
    return (
      <div className="App">
        <Counter />
        <p>You have clicked 0 times!</p>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

First off, we have a Counter component. This component has the state initialized with a value of counter set to zero. Also, we have increment and decrement methods. The output would something look like this.

Check Here

Now, we want "You clicked 0 times" to increment on clicking the button. In order to do that, could we add

clicks: 0

field in Counter like this and pass this data in the state to the App component? I don't see any other solution.

class Counter extends React.Component {
  state = {
    counter: 0,
    clicks: 0
  };

  ////
  ////

  class App extends React.Component {
  render() {
    return (
      <div className="App">
        <Counter />
        <p>You have clicked 0 times!</p> // how do I update this ?
      </div>
    );
  }
}

Well, I don't think that's quite possible.

So, the solution would be lift the state up. Instead of keeping the state in Counter, we move the state to our App component. See here.

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class Counter extends React.Component {
  render() {
    const { increment, counter, decrement } = this.props;

    return (
      <>
        <button type="button" onClick={decrement}>
          -
        </button>
        {counter}
        <button type="button" onClick={increment}>
          +
        </button>
      </>
    );
  }
}

class App extends React.Component {
  state = {
    clicks: 0,
    counter: 0
  };

  decrement = () => {
    this.setState({
      counter: this.state.counter - 1,
      clicks: this.state.clicks + 1
    });
  };

  increment = () => {
    this.setState({
      counter: this.state.counter + 1,
      clicks: this.state.clicks + 1
    });
  };

  render() {
    const { clicks, counter } = this.state;

    return (
      <div className="App">
        <Counter
          increment={this.increment}
          decrement={this.decrement}
          counter={counter}
        />
        <p>You have clicked {clicks} times!</p>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Check Here

Now, the funny part is, you might've done this unknowingly before or you'd consider this approach to be the general way of doing it. I totally agree with you, but yeah, that's the whole lifting state up fuzz is. Even the docs definition would make some sense now.

Try the CodeSandBox here.

Thank You for reading this article. Follow me on Twitter for more updates.

State Management with Redux

Akhil Dhiman — Sun, 22 Dec 2019 06:31:20 +0000

This article is specifically aimed towards people who have some experience with React or people learning React.

According to the official Redux documentation, Redux is a predictable state container for JavaScript apps. It's important to see the motivation behind redux intially and why we needed a separate "tool" for managing the state of our application. As our apps become more complex, it's quite hard to keep track of what's going on. The state cannot change by itself, it can only change as a consequence of a specific action, and that's what makes Redux a predictable container. In short, Redux will know what every action will do and how the state should change.

Redux is based upon Facebook's Flux architecture that follows the concept of Unidirectional data flow, however, there are still some differences in between those two. You can read about it here.

You might've heard of the term state a numerous times before while working in React. Well, State holds the data of your application and the UI depends on it. You might even call it a combination of both UI and data. It's managed by the store in Redux.

Before going any further, let's first discuss about some important terms in Redux.

Store

It contains the entire state of our application. The only way to change the state, is, via an action. We write pure reducer functions that return the new state of our application based on the type of action. We use createStore method imported from "redux" library to create our redux store. It takes in our reducer function, and middleware, when we have to make calls to API endpoints.

It's important to note that there should be a single store for our entire application, unlike flux's architecture, which deals with a thing for having multiple stores. Creating multiple stores in redux would be considered an anti-pattern.

const store = createStore(reducer)
const store = createStore(reducer, applyMiddleware) // applyMiddleware or any middleware is used in case of asynchronous calls

Store also provides us some predefined methods:

getState()- returns the current state tree of your application.

dispatch()- dispatches an action.

subscribe()- listener; called everytime whenver the state changes.

Action

Actions are payloads of information that send data from your application to the store. They are the only source of information to the store. An action should have a type property with it. Let's say we have a todo app, and we have to add a todo in it, an action might look like this:

const ADD_TODO = {
  type: "ADD TODO",
  text: "Learn Redux",
}

Reducer

Reducer is a pure function that takes in the previous state, an action, and returns the next state. A reducer would generally look like this.

function reducer(state, action) {
  switch (action.type) {
    case "ADD TODO":
      return {...state, todo: action.payload}
    deafult:
     return state
  }
}

Action Creators

As the name suggests, action creator is a function that "creates" an action or returns an action object.

function addTodo() {
  return {
    type: "ADD TODO",
    text: "Learn Redux",
  }
}

The Redux Flow

The most important principle in Redux is to never mutate the state object. Instead, return a new object, easily achievable by ES6's spread operator, like this:

{...state}

So far, we've come to know that an action is responsible for a state change. Now, let's look at how data flows throughout this process.

Interestingly, an action object can be dispatched from anywhere in our application, even from components. So, after an action has been dispatched, it goes off to the reducer. Store calls the reducer function and pass two arguments into it, i.e., the current state and the dispatched action. Reducer checks what type of action has arrived and matches conditionally, and based on that, returns the new resulting state. So, basically reducer's only job is to return a predictable state based on a predictable input, therefore- a pure function. Store saves the new state, and you can easily use store.getState() to access the current state of the application.

React-Redux

It is the official React binding for Redux. React-Redux provides our React Components access to the Redux store and thus allows them to dispatch actions to the store to update data. Let's look at some important aspects of React-Redux.

connect

connect() is a higher order function which connects a React component to the Redux store.

connect(mapStateToProps)(mapDispatchToProps)(Component)

It takes in mapStateToProps and mapDispatchToProps as two parameters, and the "connected" Component. Thus, our Component has access to the state via mapStateToProps and the functions it can use to dispatch actions to the store, via mapDispatchToProps. One cool thing is that, if we don't provide mapDispatchToProps to the connect() function, our Component receives dispatch in its props by default.

Provider

Provider let the components have access to the store that have been wrapped in the connect() function. Generally, we provide store at the top level, in index.js itself. We provide the store to the App.js, and thus, all the nested connected components receive the entire store via props.

Redux-Thunk

Thunk is the middleware used to handle asynchronous actions in Redux such as making API calls to the backend. It returns a function and let that function dispatch an action object to the store. So, thunk is basically a function that returns an another function, and it's merely a 14 line code. How cool is that!!!

Let's understand all about Redux that we've talked so far by creating a simple application that just shows the user's github username.

First off, let's create our store.

store.js

import { createStore, applyMiddleware } from "redux"
import { userReducer } from "./userReducer"
import thunk from "redux-thunk"

const store = createStore(userReducer, applyMiddleware(thunk))

export default store

store takes in reducer, which, in our case, is called userReducer and applyMiddleware(thunk). Here, we're just giving our store a reducer and a thunk middleware, for handling async actions.

index.js

import React from "react"
import ReactDOM from "react-dom"
import App from "./App"
import { Provider } from "react-redux"
import store from "./store"

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
)

userReducer.js

const initialState = {
  user: null,
}

const userReducer = (state = initialState, action) => {
  switch (action.type) {
    case "FETCH_USER_DETAILS":
      return {
        ...state,
        user: action.data,
      }
    default:
      return state
  }
}

export { userReducer }

userReducer takes in state, action and returns the new state object based on the action type. Initially, state containes an empty user. After some time, we expect the state to change with the information coming from the API.

ListUser.js

import React, {Component} from 'react'
import {connect} from 'react-redux'
import {listUser} from './actions'

class ListUser extends Component {
  handleClick = () => {
    this.props.dispatch(listUser('getify'))
  }

  render() {
    return (
      <div>
        <h1>{this.props.user}</h1>
        <button onClick={this.handleClick}>Submit</button>
      </div>
    )
  }
}

const mpaStateToProps = state => {
  return state
}

export default connect(mpaStateToProps)(ListUser)

This is our ListUser Component. It has a button, when clicked, shows the username. We're also connecting ListUser to the store. This means that it is receiving state and dispatch in its props. That's why we're able to make a call to the listUser action with username as a parameter.

    this.props.dispatch(listUser('getify'))

actions.js

const listUser = username => {
  return dispatch => {
    fetch(`https://api.github.com/users/${username}`)
      .then(res => res.json())
      .then(data => {
        dispatch({ type: "FETCH_USER_DETAILS", data: data.login })
      })
      .catch(err => console.log(err))
  }
}

export { listUser }

So, generally, action creators are functions that return a plain JavaScript object, but, in this case, our listUser action creator becomes a "thunk" that returns a function instead of an object. This function provides the dispatch method for dispatching an action. Here, the data is being fetched from the github API, and then the action is being dispatched with type and the incoming data. It then goes to the reducer and updates the store. Thunk comes in handy in case of async tasks whenver there's a delay of information.

To summarize, when the button is being clicked, we call listUser action creator, which is basically a thunk, returns a function, fetches the info, dispatches an action, action goes to the userReducer, userReducer returns the new state, store gets updated, the ListUser Component receives the updated state via props. Thus, when we call this.props.user, we're able to get the username. Phew, that's the whole redux flow, as simple as that!!

Here's the codesandbox, if you wanna try it out.

Thanks for reading this article. Follow me on Twitter for more updates.

Breaking down JSX

Akhil Dhiman — Sun, 22 Dec 2019 06:27:34 +0000

JSX might seem like some fancy term but it's nothing more than syntactic sugar for the React.createElement() API.

React.createElement takes three parameters, i.e., type, props and children.

React.createElement(type, props, children)

<button color="red">Click!</button>

So, this is our JSX- a button with a color property. The HTML element/Component is our type here, color is our prop, and the text "Click" is children of our component.

The compiled code would look like this.

React.createElement("button", { color: "red" }, "Click!")

What actually happens under the hood ?

Babel, the transpiler is mainly responsible for allowing us to use JSX because we know that in order for the browser to understand, the code has to be converted into ES5, and that's what Babel is doing. Any ES6 thing like arrow function, class, let etc. will be handled by Babel.

const App = (props) => {
    return (
        <div>
            `Hello, my name is {props.name}`
        </div>
    )
}

ReactDOM.render(<App name="Sam" />, document.getElementById("root")) // suppose we have index.html and there's an element with an id of root in which we are rendering our application

Babel compiles the above code in the "form" that only browser can understand.

var App = function App(props) {
    return React.createElement("div", {name: "Sam"}, "hello")
}

ReactDOM.render(React.createElement(App,
 {name: "Sam"}
 ), document.getElementById("root"))

Thank You for reading this article!!!

Follow me on Twitter for more updates.