DEV Community: Sidhartha Mallick

"Magic" using React Hooks. Yes, you read it right.

Sidhartha Mallick — Mon, 07 Feb 2022 17:07:24 +0000

First things first, What are hooks ?

Hooks are the new feature introduced in the React 16.8 version. It allows you to use state and other React features without writing a class. Hooks are the functions which "hook into" React state and lifecycle features from function components.

When would I use a Hook?

If you write a function component and realize you need to add some state to it, previously you had to convert it to a class. Now you can use a Hook inside the existing function component. We’re going to do that right now!

What all Hooks are there ?

useState
useEffect
useContext
useRef
useReducer
useMemo
useCallback
useLayoutEffect

Yes, the name of the hooks always start with use

Let's learn more about these hooks, later in this blog.
Here is a github repo and webpage demonstrating the usage of all the hooks.

Github Repository : github-link

Demo : demo-link

useState :

const [count, setCount] = useState(0);

It declares a “state variable”. Our variable is called count but we could call it anything else, like banana. This is a way to “preserve” some values between the function calls — useState is a new way to use the exact same capabilities that this.state provides in a class. Normally, variables “disappear” when the function exits but state variables are preserved by React.

import { useState } from 'react';
export default function FunctionUsingUseState(){
    const [count, setCount] = useState(0);
    return (
        <div>
            <button onClick={() => setCount(count + 1)}>
            Count : {count}
            </button>
        </div>
    );
}

useEffect

It does the work of componentDidMount as is in React.Component class. By using this Hook, you tell React that your component needs to do something after render. React will remember the function you passed (we'll refer to it as our “effect”), and call it later after performing the DOM updates.

import { useState, useEffect } from 'react';
export default function UseStateUseEffect(){
    const [count, setCount] = useState(0);
    useEffect(() => {
        console.log('Use Effect is called');
    }, [count]);
    return (
        <div>
            <button onClick={() => setCount(count + 1)}>
                Count : {count}
            </button>
        </div>
    );
}

useContext

This hook is used to create common data that can be accessed throughout the component hierarchy without passing the props down manually to each level.

import { useState, useContext, createContext } from 'react';

const MoodContext = createContext(moods);

export default function FunUseContext(){
    const [mood, setMood] = useState('😁');
    return (
        <MoodContext.Provider value={mood}>
            <div>
                <button onClick={() => setMood('🤬')}>Angry</button>
                <button onClick={() => setMood('😁')}>Happy</button>
                <button onClick={() => setMood('😔')}>Sad</button>
                <p>I am in <i>Parent</i> Function : {mood}</p>
            </div>
            <MoodEmoji/>
        </MoodContext.Provider>
    );
}

function MoodEmoji(){
    const mood = useContext(MoodContext);
    return (
        <div>
            <p>I am Inside <i>useContext</i> Function : {mood}</p>
        </div> 
    );
}

useRef

It's a way to create a reference to a value in the component, and use it in the component's lifecycle.
It is Mutable, but, it doesn't re-render UI. It is mainly used to grab DOM Elements.
More common usecase of useRef is to grab native HTML elements from JSX.

import { useRef } from 'react';
export default function FunctionUsingUseRef(){
    const myBtn = useRef(null);

    const clickIt = () => myBtn.current.click();
    const helloButtonClicked = () => console.log('hello button clicked');

    return (
        <div>
            <p>Check the console.</p>
            <button ref={myBtn} onClick={helloButtonClicked}>Hello Button</button>
            <button onClick={clickIt}>Click Me! When You Click Me, You Indirectly Click 'Hello Button', Isn't that interesting.</button>
        </div> 
    );
}

useReducer

Redux type of functionality, to useReducer to update state in Functional Components in React.

import { useReducer } from 'react';

function reducer(state, action) {
    switch(action.type) {
        case 'INCREMENT':
            return state + 1;
        case 'DECREMENT':
            return state - 1;
        default:
            return state;
    }
}

export default function FunctionUsingUseState(){
    const [count, dispatch] = useReducer(reducer, 0);
    return (
        <div>
            <h3>{count}</h3>
            <button onClick={() => dispatch({type: 'DECREMENT'})}>-</button>
            <button onClick={() => dispatch({type: 'INCREMENT'})}>+</button>
        </div>
    );
}

useMemo

This hook is a higher-order component that takes a function as an argument and returns a memoized version of that function.

import { useMemo, useState } from 'react';
export default function FunUseMemo(){
    const [count, setCount] = useState(60);

    // useMemo is a higher-order component that takes a function as an argument
    // and returns a memoized version of that function.

    const expensiveCount = useMemo(() => {
        return count ** 2;
    }, [count]);

    return (
        <div>
            <button onClick={() => setCount(count + 1)}>
            Count : {count}
            </button>
            <p>Expensive Count : {expensiveCount}</p>
        </div>
    );
}

useCallback

In order to Memoize a whole function, useCallback is used.
The showCount function is called from multiple childs in the same DOM Tree, they will help prevent un-necessary re-renders of the same object as they will be using the same function object.

Code for useCallback

useLayoutEffect

It is similar to useEffect with a small difference.
It runs after render but before it it is visually updated.
It blocks visual updates until the Callback exection is finished.

Reach Out to Me @mallicksidhartha7@gmail.com
Github
LinkedIn

React : Class vs Function Components

Sidhartha Mallick — Thu, 13 Jan 2022 10:44:12 +0000

In the last post, we learned about components. Here, We will learn about types of components.

So, there are 2 types of components as you would have guessed by now.

Class
Functional

You can do everything in using either of them. But, functional components are preferred, for obvious reasons.

A simple comparision, why functional component ?

We will write a simple counter, which increments the count value when clicked.

using Function Component, the code as follows -

const FunctionalComponent=()=>{
    const[count , setCount]=useState(0);
    return
        <div style={{margin:'10px'}}>
          <h2>{count}</h2>
          <button onClick={() => setCount(count + 1)}>+</button>
        </div>
    )
}

While using Class Component, ... i will leave it upto you to judge.

class ClassComponent extends React.Component{
   constructor(){
        super();
        this.state={
            count :0
        };
        this.increment=this.increment.bind(this);
   } 
   increment(){
       this.setState({count : this.state.count +1});
   }
   render(){
        return (
            <div style={{margin:'10px'}}>
               <h2> {this.state.count}</h2> 
               <button onClick={this.increase}>+</button>
            </div>
        )
    }
}

and React.Component class comes with a lot of predefined baggage, which are not necessary all the time.

Whereas, by using Functional Components you can customise stuffs as per your need with the help of React Hooks.

Hooks are my favourites in the whole React library. And one of my fav. hooks in useMemo.

The hooks come in handy when you are dealing with frequent changes in the data stream.

I found a great use of useMemo during pagination. It can memoize the component based on the page based on it's parameters. A network call might happen in the background, but it sure hell doesn't concern the user. Hence, improving the UX.

useEffect hook is used instead of componentDidMount in a class component.

NOTE : You cannot use hooks inside class components. Hooks are exclusive to function components only.
TIP : Learn to harness the power of custom hooks. They are on a whole different level.

Resources :

Read more about their differences at gfg.

Read more about hooks at @this is my blog

How does React Work ?

Sidhartha Mallick — Wed, 12 Jan 2022 07:55:02 +0000

React uses the concept of virtual dom to present contents to the user.

So, What is this Virtual DOM ?

You can think of it as the skeleton of the webapp. It helps react push updated in a faster and optimised manner without disturbing the existing components of the actual dom.

For every update, React first updates the virtual dom. Everything is in JavaScript, so, it's much more faster and efficient that way. It then compares the previous virtual dom with the updated version and only updates the components that are actually changes and doesn't disturb the others.

This makes it extremely efficient.

*Components : *

oh Okay, I forgot to tell you about React Components .
So, What are they ?

These are the building blocks of the React. Every react app is a collection of components arranged in a hierarchy. All kinds of branching and chaining takes place here. And everything is highly customisable.

React Components consist of business login with some UI rendering code.

function ReactComp(props) { 
    // some business logic goes here

    return (
        <div>component content goes here... ui codes.</div>
    )
}

Key Points about Components :

Every Component starts with a Capital Letter
<></> this represents an empty component.
You cannot chain two elements without a parent element inside (). i.e.

(
  <div>hello</div>
  <div>world</div>
)

is not allowed. It will throw you an error. You can at least enclose them with <></> this.

You can enclose other components in another component. Like this, <TestComponent <- you can pass props here -> />. For example, <TestComponent name={'sidhartha'} age={22} />

How Props Work ? , we will learn more about that in the next blog...

React out to me @mallicksidhartha7@gmail.com

What is React ?

Sidhartha Mallick — Wed, 12 Jan 2022 07:11:07 +0000

React is a free and open-source front-end JavaScript library for building user interfaces based on UI components.
...blah...blah...

But, What the fuck is React ?

It is used to create single page applications just by using a single index.html file with meta tags and a <div id="app"></div> which basically contains the whole application. No More bunch of html files for creating websites and manually linking them... blah blah... It's all made so easy with webpack.

Oh wait !! Webpack ? What role does it play here ?

So, Webpack is kind of the mastermind behind all of this. It helps in bundling the react codebase and compiles the whole codebase into javascript chunks, which are easy to serve when requested. It helps optimise bundle size for faster serving webapps.

and yes, Routing pages is possible in React apps. With the help of react-router, you can easily route components to where they belong.

So, is that it ? i.e.

SPA ( Single Page Application )
Faster Serving WebApps
Better Organization for Pages and Linking

Hell NO, We are just getting started folks.
Follow this whole series to learn more about react.

React out to me @mallicksidhartha7@gmail.com

MongoDb : stuffs you should to know - Part 1

Sidhartha Mallick — Fri, 07 Jan 2022 13:31:24 +0000

What is MongoDB ?

MongoDb is a NoSQL document database where data is stored as documents inside collections.
A document is a way to organise data as a set of key-value pairs.
A bunch of documents organised under certain rules or specs is called a collection.
In MongoDb, all data is stored in BSON (Binary JSON).

How does MongoDB Work ?

A hosted mongodb instance is a part of a cluster which contains multiple such servers/instances called as replica-set.

They follow the master-slave architecture as it's internal working.

Working of the master-slave:

In short, a master instance interacts with the outside world to serve any kind of data related requests and the syncs up with the slave instances. In case the master goes down, from the remaining slaves, one instance gets elected to be the master instance and the work continues. It's like, no instance ever went down.

Then, the master instance interacts with a mongo server, which actually talks to all the requests coming it's way. Kind of a proxy, more of a controller of all requests.

Why BSON ?

It is optimised for speed, space and flexibility. BSON’s binary structure encodes type and length information, which allows it to be parsed much more quickly.

BSON supports non-JSON-native data types, like dates and binary data. read more about it

Import/Export

For this, you need to know 4 different commands, two for each.

Export :

mongodump : Upon successful execution, it outputs the data in BSON format.

mongodump --uri="atlas cluster uri"
--collection="coll-name" 
--out="output-file"

mongoexport : It outputs the data in JSON format.

mongoexport --uri="atlas cluster uri" 
--collection="coll-name" 
--out="output_file.json"

Import :

mongorestore : It is used to load bson data dump into a mongodb database.

mongorestore --uri="atlas cluster uri" 
--drop="path to dump"

mongoimport: It is used to load json data export into a mongodb database.

mongorestore --uri="atlas cluster uri" 
--drop="path to json file"
--collection="coll-name"

Data Types in MongoDB

datatypes in mongodb - link

Apart from the standard datatypes, mongodb has some special datatypes which enables a lots of features in it.

Especially, ObjectId.

So, The question comes to mind, What is a ObjectId datatype in mongodb ?

Let's see what it is.
It returns a new ObjectId value. The 12-byte ObjectId value consists of:

4-byte timestamp value
5-byte random value generated once per process
3-byte incrementing counter

A special objectid is _id :
In every document, it's like the primary key equivalent for the documents or sub-documents, in the mongodb database.

Every document in a collection has to have a unique _id value. It has a special place in the whole mongodb database architecture.

It's been a lot of information in a single blog. Will continue this in the next part. Until then, Kudos to you, You have learn't the internal workings of mongodb.

Signing Off, ! Happy Coding !

Reach out to me @mallicksidhartha7@gmail.com

Node.js Scalable REST API Architecture

Sidhartha Mallick — Thu, 06 Jan 2022 05:55:03 +0000

server setup

Create a server/index.js file and add this code to it. This function creates a server object and preserves it using a javascript property called a closure. link

Import the server in the main index.js file of your rest-api and pass the config into it.

const server = require('./server')();
const config = require('./configs');
const db = require('./configs/db');

server.create(config, db);
server.start(); // this kickstarts your server.

you should use nodemon for development purposes. It monitors your code changes and restarts the server with the recent updates.

Follow the given directory structure. It consists of dirs like, routes, api-versions, controllers, services and configs.

This is made this way to make the node-app scalable i.e. when supposedly developing a newer version on top of the older version, it makes it easy to integrate it with the existing up and running server.

Then, there is the configs dir to store all the required configs of the node-app. to reflect changes to every variable, incase needed.

api version setup

The routes dir contains apis/v1.js, which contains all the existing routes for the version1 of the node-rest-api, the controllers of which are inside controllers/v1/*.js. They make the development process less messy and easier.

router setup

Let's talk about how to setup the routers in here. Ergo, it goes like this routes.init(server); in the server/index.js create function. But why ?

Let's look into the routes/index.js file, the answer lies in there. It is made that way to make the life of the developers easier. It's more informative.

It keeps track of the sequence of the routes, which would be a necessity when the project grows big.

middlewares

The middlewares reside in the server/index.js file, before the routes initiation. Why ? Because, they are called the middlewares, they are supposed to be there by design. There is no use to place them anywhere else, they won't serve their true purpose, i.e. all the requests are supposed to pass through them.

The custom middlewares will be placed in the other parts of the routes based on their requirement, for example, caching middlewares, auth middlewares, or any kind of pre-request processing middlewares and so on.

router.use('/dashboard', authMiddleware, dashboardController);

router.use('/v1', xyzMiddleware, v1ApiController);

Middlewares follow certain specific format. It goes like this...

function xyzMiddleware(req, res, next){
    // stuffs to do
    // add stuffs to request, or change req paramaters, 
    // do whatever you want with those objects, 
    // but once the task is done, call `next()`
}

controller setup

Why is there a controller here ? What is a controller ? What does it do ? Well, let's answer there question here ...

A controller is a piece of code where you start assigning/ defining tasks that is to be done if a request is made to that route, whether GET, PUT, POST or whatever. You will have to define tasks for everything in here, if you want it to act that way.

It is where the true purpose of the request is served. You split the major routes into smaller ones and start writing actions for all the routes, testing them ( most probably using postman or any custom script ) and documenting them.

services setup

What does services do them ? Well, when controller starts assigning/defining tasks, most of the times, there are many common tasks for a lot of routes, this is where services come-up.
We identify the tasks, for example, fetching the active user data from the db, is a very common task. So, we write down the codes for it into a function as a service and just use it when required. This makes maintenance of the server a hell of a lot easier.
Otherwise, every time we need to make some changes, we would have to go all the way to find all such functions and methods and actions to make that specific change and it will make the life of a developer a lot harder.
This whole process is called refactoring. There are courses for these.

That's all for setting up a scalable node architecture. If you have any doubts or issues. Reach out to me at : mallicksidhartha7@gmail.com.

!! Happy Coding !!

Deep Copy vs Shallow Copy in JavaScript

Sidhartha Mallick — Wed, 05 Jan 2022 04:29:02 +0000

Shallow Copy

A new object is created that has an exact copy of the values in the original object. If the original object points to another object, a separate copy of that object is not created, rather a reference to that object is passed.

const a = {
    name: 'S. Sahu',
    addr:  {
        city: 'Behrampur',
    }
}
const b = {...a}; // shallow copy using spread operator
b.addr.city = "Sambalpur"; // Shallow Copy

b.name = "A. Panda"; // Deep Copy

console.log(a.name, b.name); // separate references for name is created here
console.log(a.addr, b.addr); // a.addr and b.addr point to the same object reference

Output:

Sambalpur Sambalpur
S. Sahu A. Panda

Deep Copy

A deep copy copies all fields, and makes copies of dynamically allocated memory pointed to by the fields. A deep copy occurs when an object is copied along with the objects to which it refers.

const a = {
    name: 'S. Sahu',
    addr:  {
        city: 'Behrampur',
    }
}

const b = {
    name: a.name,
    addr: {
        city: a.city
    }
};

b.addr.city = "Sambalpur";
b.name = "A. Panda";

console.log(a.addr.city, b.addr.city);
console.log(a.name, b.name)

Output :

Behrampur Sambalpur
S. Sahu A. Panda

Create Reference

A reference of the original object is created. Any changes made in the new object is reflected in the original object.

const a = {
    name: 'S. Sahu',
    addr:  {
        city: 'Behrampur',
    }
}

const b = a;

b.addr.city = "Sambalpur";
b.name = "A. Panda";

console.log(a.addr.city, b.addr.city);
console.log(a.name, b.name)

Output :

Sambalpur Sambalpur
A. Panda A. Panda

Random Cropping/Scaling Images to Fit the Required Specs or Dimensions for Any kind of Uploads

Sidhartha Mallick — Tue, 04 Jan 2022 06:35:22 +0000

A simple Python Script with ffmpeg would do wonders.

import os

def generate_ffmpeg_command_scale(path, w, h):
    input_path = path.split('/')
    output_path = '/'.join(input_path[:-1]) + '/out-' + input_path[-1];
    ffmpeg_cmd = 'ffmpeg -i {} -vf scale={}:{} {}'.format(path, w, h, output_path);
    return ffmpeg_cmd

def generate_ffmpeg_command_crop(path, w, h):
    input_path = path.split('/')
    output_path = '/'.join(input_path[:-1]) + '/out-' + input_path[-1];
    ffmpeg_cmd = 'ffmpeg -i {} -vf crop={}:{}:0:0 {}'.format(path, w, h, output_path);
    return ffmpeg_cmd

WIDTH = int(input("width = "));
HEIGHT = int(input("height = "))
PATH = input("path = ")

scale_command = generate_ffmpeg_command_scale(PATH, WIDTH, HEIGHT)
crop_command = generate_ffmpeg_command_crop(PATH, WIDTH, HEIGHT)
print(scale_command);
print(crop_command);

os.system(scale_command);

Let’s go through the script, _what is does ? How it does ?
_
This script accepts 3 parameters, the expected dims (HxW) and the path to the file in the local system. You can get the path to the file by simply dragging the file into the terminal and copy the path that appears.

The generate_ffmpeg_command() function generates the command for processing the image and specifies the output location of the file to the dame directory but changes the filename as out-<filename> .

The function returns the command requires and the os module in python executes the shell command in your terminal and gets you the requires image.

The scale parameter of the ffmpeg command scales your input image to the required dimensions.

Try it on replit.com :

Advanced Modifications :

To crop the image uniformly from the middle, just replace the scale parameter by crop, that would be enough for it.
To crop the image from the top-left corner, update line no. 6 to : ffmpeg_cmd = ffmpeg -i {} -vf crop={}:{}:0:0 {}'.format(path, w, h, output_path);

mail me at: mallicksidhartha7@gmail.com , for any kind of customisations, be it Image Processing, Video Processing, Cropping, Compression or so using ffmpeg.

!! Happy Coding !! 😋