DEV Community: AbhishekkGautam

Custom Hook - ReactJS

AbhishekkGautam — Fri, 13 May 2022 15:03:50 +0000

Hello 👋, Hope you're doing well.
Before diving into the custom hook, let's revise some points about Hooks in React.

Hooks

useState
useEffect
useContext
useRef
useMemo

and many more...

All of the above mentioned are in-built hooks in React. Most of us have used these hooks many times while working with functional components.

What are Hooks?

Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class.

In simple words, Hooks are in-built functions which help React developers in managing state & lifecycle methods in a more clean & efficient way.

Rules of Hooks

Don’t call hooks inside loops, conditions, or nested functions.
Only call hooks from React functions.

You can read more about hooks from official docs - Hooks

All these in-built hooks are cool but what about creating our own custom hooks,
Is it possible?😯

YES!🔥

Let's create our own custom hook.
And we'll take the help of our legendary example - Counter App.

Create a CounterOne.js file & write logic for increment, decrement & reset using in-built hook - useState.

import React, {useState} from 'react'

const CounterOne = () => {

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

  const increment = () => {
    setCount(count => count + 1)
  }

  const decrement = () => {
    setCount(count => count - 1)
  }

  const reset = () => {
    setCount(0)
  }

  return(
    <div>
      <h1>Count: {count}</h1>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
      <button onClick={reset}>Reset</button>
    </div>
  )
}

export default CounterOne

Import CounterOne.js in App.js

import CounterOne from "./CounterOne";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <CounterOne />
    </div>
  );
}

Now we can increment, decrement & reset the counter.

What if we want one more counter - easy no?
We'll copy the code of CounterOne.js in CounterTwo.js & Import it in App.js.

import React, {useState} from 'react'

const CounterTwo = () => {

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

  const increment = () => {
    setCount(count => count + 1)
  }

  const decrement = () => {
    setCount(count => count - 1)
  }

  const reset = () => {
    setCount(0)
  }

  return(
    <div>
      <h1>Count: {count}</h1>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
      <button onClick={reset}>Reset</button>
    </div>
  )
}

export default CounterTwo

Here we go. we have now two counters on the view.

But doing copy/paste of whole logic isn't a good practice. We should avoid repeating ourselves.

Now we'll take advantage of creating a custom hook & extract our logic in a separate file.

Create a useCounter.js file.

we must prefix the custom hook's name with use.

Now we'll extract the logic part with in-built hook - useState. and yes, we can use in-built hooks in our custom hook.

import { useState } from "react";

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

  const increment = () => {
    setCount((count) => count + 1);
  };

  const decrement = () => {
    setCount((count) => count - 1);
  };

  const reset = () => {
    setCount(0);
  };

  return [count, increment, decrement, reset];
};

export default useCounter;

At last, we return all the necessary variables & functions - count, increment, decrement, reset in an array.

That's it, we just made our own custom hook. 🎉

Now we can use useCounter hook in our functional components.

We just need to import this hook & use it using array destructuring.

const [count, increment, decrement, reset] = useCounter();

CounterOne.js

import React from "react";
import useCounter from "./useCounter";

const CounterOne = () => {
  const [count, increment, decrement, reset] = useCounter();

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
      <button onClick={reset}>Reset</button>
    </div>
  );
};

export default CounterOne;

CounterTwo.js

import React from "react";
import useCounter from "./useCounter";

const CounterTwo = () => {
  const [count, increment, decrement, reset] = useCounter();
  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
      <button onClick={reset}>Reset</button>
    </div>
  );
};

export default CounterTwo;

Here's the code sandbox link - useCounter

Conclusion

Hope after reading this blog, now you know -

how to create a custom hook.
how to use it in a functional component.

If you find this blog as helpful, don't forget to share it.

Thank you 🙂
Connect with me on - Twitter Instagram

Flatten the Object - JavaScript

AbhishekkGautam — Wed, 11 May 2022 01:00:14 +0000

Hello, Hope you're doing well & solving interesting problems using your programming skills.🔥

In this blog, we will try to solve one such interesting problem related to flattening the object which is asked in javascript interviews.

I have breakdown the whole tutorial into 4 sections -

Input
Output
Approach (logic)
Assemble (put everything together)

Let's start!🚀

Input

This is our unflatten object containing data of an user.

const user = {
  name: 'John',
  address: {
    personal: {
      street: 'Victor Plains',
      city: 'Wisokyburgh',
    },
    office: {
      city: 'South Elvis',
      area: {
        landmark: 'Hoeger Mall',
      },
    },
  },
};

Output

We need to flat the object like this -

{
  user_name: "John",
  user_address_personal_street: "Victor Plains",
  user_address_personal_city: "Wisokyburgh",
  user_address_office_city: "South Elvis",
  user_address_office_area_landmark: "Hoeger Mall"
}

Approach

If you closely look at our input object, you'll see a pattern of nested objects.

const OBJECT = {
  name: 'John',
  OBJECT: {
    OBJECT: {
      street: 'Victor Plains',
      city: 'Wisokyburgh',
    },
    OBJECT: {
      city: 'South Elvis',
      OBJECT: {
        landmark: 'Hoeger Mall',
      },
    },
  },
};

So we need to iterate over the nested objects & flat them one by one.
But if we want to flat each object at a time, we need to breakdown the nested objects into a single object recursively.

Recursively? 🤔

Yes, We will use recursion to solve this problem.

What is Recursion?

Recursion is a phenomenon used to solve complex problems by breaking them down into simpler ones.

Recursive Function

When we apply this phenomenon in a function, that function will call itself again and again until we reach at the breaking condition.

*Let's define our recursive function - *

const recursiveFunc = (obj, parentKey, flattenObj) => { 
  // we will write our logic here.
};

obj: our input object
parentKey: To keep a track of parent object because we need to append parent keys while iterating over the input obj - user_address_office_area_landmark: "Hoeger Mall"
flattenObj: an empty object to store flatten obj on each iteration.

While looping through unflatten object, we will only flat those key whose type is object.

So, we need a function which takes key as item & return true if the key is an object.

const isAnObject = (item) => {
    return (
      item !== null &&
      typeof item === 'object' &&
      Object.prototype.toString.call(item) === '[object Object]'
    );
  };

Now we need to loop through the input object ( unflatten ) & store the flatten key-value pair inside flattenObj

for (let key in obj) { // 1
    let finalKey = `${parentKey}_${key}`; // 2
    if (isAnObject(obj[key])) { // 3
      recursiveFunc(obj[key], finalKey, flattenObj); // 4
    } else {
      flattenObj[finalKey] = obj[key]; // 5
    }
  }

Let's understand it line by line.

// 1 - let key in obj this line will give key of the key-value pair on each iteration. name, address, personal & so on.

// 2 - we are adding the parent key before current key to make it look like this at the end - user_address_personal_street: "Victor Plains". When we iterate over address obj, the user will be the parent. so we add the user before address - user_address & store it in finalKey.

// 3 - we are checking if the current key is an object or not using isAnObject function which we've already defined.

// 4 - If the key is an object, we will call recursiveFunc again with the updated value of obj, parentKey & flattenObj.

// 5 - If the key is not object, we will store the finalKey (user_address_personal_street) as key & key("Victor Plains") as value inside flattenObj.

Let's pass our initial data & console the output.

let flattenObj = {};
recursiveFunc(user, 'user', flattenObj);
console.log(flattenObj);

So when we invoke the recursiveFunc, it'll run the loop & iterate over user object.
Initial value -

obj: user
parentKey: 'user'
flattenObj: {}

First Iteration

Now key is name

finalKey = 'user_name'
name is not an object Result

flattenObj = { user_name: "John" }

Second Iteration

Now key is address

finalKey = 'user_address'
address is an object

Result
call recursiveFunc again with new values -

obj: address
parentKey: "user_address"
flattenObj: { user_name: "John" }

Third Iteration

Now key is personal

finalKey = 'user_address_personal'
personal is an object

Result
call recursiveFunc again with new values -

obj: personal
parentKey: "user_address_personal"
flattenObj: { user_name: "John" }

Fourth Iteration

Now key is street

finalKey = 'user_address_personal_street'
street is not an object

Result

flattenObj = { 
  user_name: "John",
  user_address_personal_street: "Victor Plains"
}

...and iterations will go on until it reach the last key.
The final output will be - 🎉

flattenObj = {
  user_name: "John",
  user_address_personal_street: "Victor Plains",
  user_address_personal_city: "Wisokyburgh",
  user_address_office_city: "South Elvis",
  user_address_office_area_landmark: "Hoeger Mall"
}

Assemble

Here's the whole code for flattening an object.

const user = {
  name: 'John',
  address: {
    personal: {
      street: 'Victor Plains',
      city: 'Wisokyburgh',
    },
    office: {
      city: 'South Elvis',
      area: {
        landmark: 'Hoeger Mall',
      },
    },
  },
};

const recursiveFunc = (obj, parentKey, flattenObj) => { 
  const isAnObject = (item) => { 
    return (
      item !== null &&
      typeof item === 'object' &&
      Object.prototype.toString.call(item) === '[object Object]'
    );
  };

  for (let key in obj) { 
    let finalKey = `${parentKey}_${key}`; 
    if (isAnObject(obj[key])) {
      recursiveFunc(obj[key], finalKey, flattenObj); 
    } else {
      flattenObj[finalKey] = obj[key]; 
    }
  }
};

let flattenObj = {};
recursiveFunc(user, 'user', flattenObj);
console.log(flattenObj);

Conclusion

Hope after reading this blog, you've understood -

How to approach a problem.
How to flatten an object using recursion.

If you find this blog as helpful, don't forget to share it.
And incase you know any other ways to flatten an object in javaScript, please share it in the comments.

Thank you 🙂
Connect with me on - Twitter Instagram

VS Code Extensions For Front-end Developers

AbhishekkGautam — Thu, 19 Aug 2021 00:45:08 +0000

Hello Dev, today we'll look into the world of extensions.

As a developer, we all know that VS code is great, super cool IDE to write code. To make it super amazing and productivity friendly, we must install some extensions. And in this blog, I am going to help you in making your VS Code super cool.

I'm ready to share my list of extensions. So let's begin -

VS Code Theme

This is my VS Code theme - teacher theme dark created by Hitesh Choudhary.

Live Server

Live Server helps in launching local development server with live reload for both static and dynamic web pages.

Auto Import

We import different files, modules using the import statement. But finding the path is a headache. Auto Import helps in the completion of the import statement automatically.

Bracket Pair Colorizer

While working with loops and functions, finding pair curly braces is another headache. This time Bracket Pair Colorizer comes to the rescue by colorizing matching brackets.

Color Highlight

Color Highlight highlights the colors written in hex value or RGB to give you an overview of the color.

Prettier

Prettier formats the whole code with proper indentation and wrapping.

Todo Highlight

Sometimes we forget to review the TODOs we've added while coding before we publish the code to production. Now, we can highlight our TODOs using Todo Highlight.

Auto Rename Tag

Auto Rename Tag automatically rename paired HTML/XML tag. You just need to edit one tag and other will changed automatically. We just saved 2s of our time.

vscode-faker

We are front-end developers. We need fake data to test our front-end skills. Our friend, vscode-faker provides us with fake data from different categories. Data is here, where are you?

Code Time

Hey, Today I write code for 5 hrs.

How do I come to know about my coding hours? My ultimate time tracker, Code Time provides programming metrics. It also sends mail every week with all the data.

Thunder Client

Thunder Client is a lightweight Rest API Client Extension that works like Postman where you test your server requests.

Conclusion

I hope above mentioned extensions help you with frontend programming and productivity. If you find this blog as helpful, don't forget to share it.

Thank you 🙂

Connect with me on - Twitter Instagram

Functions in JavaScript

AbhishekkGautam — Wed, 18 Aug 2021 21:40:12 +0000

A function is a mini-program that performs a task. In general, a program consists of multiple small functions. These functions are just small pieces of a big program that have input, processing, and output.

Sometimes we want a particular program or task to execute repeatedly with different inputs each time. Here comes the role of a function that executes the processing logic with different input and output.

Now you have a basic understanding about function, let's discuss how to create a function.

Function Declaration

"Declare a function" is just a rephrase of "Create a function"

You need three things to create a simple function:

function keyword
name of the function
statement or logic

Let's create a function -

function add(){
    //statement
    console.log(2+3);
};

Above we start with the function keyword, then name of the function add and statements of this function are defined between the curly braces.

Function Call

Once we've declared the function, we will call it to see the output.

add();

This is all you need to do to invoke a function - name of the function followed by parentheses.

"Call a function" sometimes also rephrase as "Invoke a function"

Once invoked, we'll see the output in the console.

Parameters & Arguments

In the above function, we directly put the input value 2 and 3 in the statement. But what if we want to pass the input values while calling the function.

Let's take an example.

First, we'll provide dynamic variables to the function which are called parameters. These variables are just a placeholder that holds the input values pass-through function call.

function add(firstNum, secondNum){
   // statement
   console.log(firstNum + secondNum);
};

Above we declared two parameters firstNum & secondNum inside the parentheses. We'll use these parameters as variables inside the function definition.

Now we'll pass the input values to the function for processing.

add(2,3);

Above we pass the input values 2 & 3 while invoking the function. Here 2 & 3 are arguments. These values will be passed to the parameters which are then used to process the output in the statement.

Once the function is invoked, we'll see the output in the console.

Default Parameters

Sometimes we might forget to declare the function arguments. In that case, our program might give an error and we'll not get the expected output.

To avoid this situation, Default parameters are included in the ES6, so if a value is not provided for the argument, the default value will be used.

function add (firstNum = 1, secondNum = 6){
      // statement
      console.log(firstNum + secondNum);
};

// Invoke the function
add();

If we do not pass arguments to the add function, then it'll process the output using the default values.

// Output
1 + 6 = 7

Return Statement

In the introduction section, we discussed that generally a function contains processing logic. Upto this point, our function contains both processing logic and output.

function add (firstNum, secondNum){
    // statement
    console.log(firstNum + secondNum);
};

Processing part - firstNum + secondNum
Ouput part - console.log()

Now we'll use the function to return a value and then we'll output the value outside the function. Let's add a return statement.

function add (firstNum, secondNum){
    // statement
    return firstNum + secondNum;
};

A return statement specifies the value returned by the function. Let's invoke this function.

add(2,3);

Now we want to see the expected output.

console.log(add(2,3));

Just wrap the function call in a console.log().

Function Expressions

We can also use function expression to create a function. We just need to create the function as a variable.

const language = function(){
    console.log("JavaScript");
};

language();

The output is the same. JavaScript is logged in the console.

Hoisting

Function declarations are hoisted. Till now, we are invoking the function after the declaration but we can also invoke a function before we declare a function.

// Invoking the function
message();

// Function Declaration
function message(){
    console.log("Good Morning");
};

But we cannot do the same thing in function expressions.

// Invoking the function
message();

// Function Declaration
const message = function(){
    console.log("Good Morning");
};

This program will cause an error.

TypeError: message is not a function

Arrow Functions

Arrow function is an ES6 feature that allows us to create a function without using the function keyword. We also often don't need to use a return statement.

Let's take an example -

// Normal function declaration
function greeting(name){
    return `Good morning, ${name}`;
};

Now we simplify the above function using an arrow function.

// Arrow function
const greeting = name => `Good morning, ${name}`;

We now have the entire function declaration in one line. We remove the function and return keyword. And also if there is one argument, we can remove the parentheses around the arguments.

When a function takes more than one argument, arguments should be surrounded by parentheses.

function greeting(message, name){
    return `${message}, ${name}`;
};

// Arrow function
const greeting = (message, name) => `${message}, ${name}`;

We have one line function because it returns only one statement. If there are multiple lines of statements then we'll use curly braces.

const add = (a, b) => {
    let sum = a + b;
    return sum;
}

console.log(add(1,2));

Conclusion

I hope after reading this blog you will understand the basics of function in JavaScript. If you find this blog as helpful, don't forget to share it.

Thank you 🙂

Connect with me on - Twitter Instagram