Forem: Rakshit

When to use React.useCallback Hook

Rakshit — Mon, 01 Aug 2022 07:51:00 +0000

When I first read about the useCallback hook I thought I had a great weapon with me to optimise my React app's performance and started using it on every damn function without understanding the limitations or may be I should call it the right concept behind it.

Before diving deep into this topic, let us first understand on a high level what exactly is the useCallback hook.

So, basically useCallback hook takes a function and a dependency array. It returns the memoized function. A new memoized value of this function is created whenever the value or references of the elements in the dependency array change.

What if you do not wrap a function using `useCallback`?

When you don't wrap a function with useCallback, whenever the component is re-rendered a new instance of the function is created(The function is given a new memory location).

Also, make a note of the below snippet.

function add() {
  return (a, b) => a + b;
}
const add1 = add();
const add2 = add();

add1(1, 2); // 3
add2(1, 2); // 3

add1 === add2; // false

In the above snippet you can see that though add1 and add2 are created from the same function declaration and give the same output they are not the same because the references of these two functions are different.

When to use `useCallback`?

Let us consider an example.

function Child({ handler }) {

  return (
    <div onClick={handler}>
        Click Me
    </div>
  );
}

export default React.memo(Child)

Below is the Parent component

export default function ParentComponent() {
  const [state, setState] = useState(false);
  const [dep] = useState(false);

  const handler = useCallback(
    () => {
      console.log("You clicked handler")
    },
    [dep]
  );
  const statehanddler = () => {
    setState(!state);
  };
  return (
    <>
      <button onClick={statehanddler}>State Change</button>
      <Child handler={handler} />
    </>
  );

In the above example we have wrapped the Child component with React.memo which means it will re-render the child component only if the props to it change.

handler is passed as a prop to the Child component.

Let us assume we did not use useCallback in the above example.

In this case whenever we click the State Change button the value of state is changed and the parent component is re-rendered. Since, at every re-render there will be a new instance of every function created we would have a new instance of the handler function.

Now, what would happen to the child component? Will it re-render?

In the add example I have shown you how does function equality works. By referring to it we can say that the child component will re-render because the handler prop now has a new reference. This means that even when we wrap the component with React.memo we are a re-rendering the child component.

Assuming we are using useCallback

useCallback hook here will memoize the function passed to it as an argument and it will only create a new instance of the memoized function if the value or reference to an element in the dependency array changes.

So, clicking on the State Change button will change the value of the state variable state but the value inside the dependency array(dep) remains same. Hence, there is no new instance of handler created and the child component will not re-render.

When not to use `useCallback`?

useCallback has its own downsides. There are times when using useCallback makes no sense.

Let us take an example

export default function Parent() {

  const clickHandler = useCallback(() => {
      console.log('Click event')
  }, [])

  return <Child onClick={clickHandler} />
}

const Child = ({ clickHandler }) => {
  return <button onClick={clickHandler}>Child Component</button>
}

In the above example using useCallback makes no sense since we are creating clickHandler function on every re-render. Also, optimization might cost us more here because of the useCallback check we have to do on every re-render(Recreation of inline functions is generally cheap).

Conclusion

useCallback memoizes functions instead of values, to prevent recreation upon every render. It helps us avoid unnecessary re-rendering and improves performance.

We also should be careful while using useCallback because it can cost us a lot if we do not scan our components well before using it.

I hope this helps. If you have any questions and suggestions reach me out on Github and LinkedIn.

Follow me on Twitter

Have a nice day :)

Trello Clone with Drag and Drop functionality (No external library used)

Rakshit — Fri, 22 Jul 2022 19:56:00 +0000

Hey guys, I have made a trello clone using React and typescript. There is drag and drop functionality too which does not use any external library.

Here is the Github link: Code

Here is the link to the app: Trello Clone

I would love to write a detailed article on this in the future depending on the reach.

I hope this helps. If you have any questions and suggestions reach me out on Github and LinkedIn.

Follow me on Twitter

Have a nice day :)

Functions as First-Class Citizens in Javascript

Rakshit — Sat, 16 Jul 2022 12:39:12 +0000

Before diving into the topic let me give you some context about functions in Javascript.

Functions in Javascript are beautiful. They are the heart of Javascript and probably everything in Javascript runs on the chariot called FUNCTIONS.

Let us first understand what is are Function Statements and Function Expressions.

Function Statements

Function Statements are when you create a function and you give it a name. It simply means declaring a function with the function keyword and giving it a name.

function add() {
    // logic goes here
}

The above code snippet is nothing but a Function Statement. It is also important to remember that Function Statements are also Function Declarations.

So, whenever someone asks you what is a Function Statement or a Function Declaration it is the same.

Function Expressions

When functions are assigned to a variable they become Function Expressions.

var a = function() {
    // logic goes here
}

The above code snippet is an example of a Function Expression.

The function we used here in the above example is an anonymous function.

It is important to notice that anonymous functions look like function statements but they are not.

function () {
    // logic goes here
}

The above code snipped when complied would throw a SyntaxError.

So, what exactly are anonymous functions?

Anonymous functions are generally used as values. In the above example we have used an anonymous function as a value to assign it to variable a.

We also use anonymous functions as a callback function (inside setTimeout).

There are also another kind of function expressions which are named function expressions. Instead of using anonymous functions we give the function a name.

var a = function add() {
    // logic goes here
}

The above code snippet is an example of named function expression.

Now, finally coming to the topic. Functions in Javascript supports all operational properties inherent to other entities. They can be assigned to a variable, passed as an argument to another function (setTimeout), they can also be returned from another function. Basically functions can do whatever every other entity on Javascript does. Hence, the name First-Class Citizens.

I hope this article helps. If you have any questions reach me out on Github and LinkedIn.

Follow me on Twitter

Also, please do check out Boot.dev. Boot.dev is a computer science program. You learn the same kinds of things that you would learn in a 4-year degree from college.

Have a nice day :)

What is Scope in JavaScript?

Rakshit — Sat, 09 Jul 2022 14:01:03 +0000

Scope in Javascript refers to the accessibility/visibility of a variable or any other resource in Javascript.

Without wasting time let us dive into some examples to understand scope.

Global Scope

There is only one global scope in Javascript document. The area outside of all the functions is considered t be global scope. The variables declared in global scope can we accessed and altered in any other scope.

//global scope
var fruit = 'apple'

function printApple() {
    console.log(fruit)
}

printApple()

In the above example the variable fruit is declared in global scope and it can accessed any where inside the document. The answer does not change even if I use let instead of var.

Local Scope

The variables declared inside a function are said to be local to the function they are declared in. Every function has its own scope.

function a() {
    // local scope a
    function b() {
        // local scope b
    }
}

function c() {
    // local scope c
}

Now, let us dive a bit into the local scope. Local scope is divided into two sections namely, block scope and function scope.

Function Scope

Whenever you declare a variable inside a function the variable is visible or accessible inside the function. The variables declared with the keyword var are associated with functional scope.

function a() {
    var fruit = 'apple'
    console.log(fruit)
}

a()                // apple
console.log(fruit) // error: fruit is not defined

Block Scope

In Javascript, the area within if, for, switch and while is considered to be a block. In simple terms whenever we use {} (curly braces) a block is created and the variables declared inside it are considered to be block scoped to that particular block.

The variables declared with the var keyword do not show the properties of block scope. The variables declared with let and const show the block scope properties.


function a() {
    if (true) {
        var x = 'hello'
        let y = 'hey'
        const z = 'bey'
    }

    console.log(x)
    console.log(y)
    console.log(z)
}

a()
// console.log(x) will print hello
// console.log(y) will throw error
// console.log(z) will throw error

Apart from all the scopes discussed above there is one more scope which needs a mention which is the Lexical Scope.

Lexical Scope

In simple terms it means that the variables declared in the parent can be accessed by the children. The children functions are lexically bound to the execution context of their parents.

function a() {
    var x = 'hello'
    let y = 'hey'
    const z = 'bey'

    function b() {
        console.log(x)
        console.log(y)
        console.log(z)
    }

    return b
}

b = a()
b()
// console.log(x) will print hello
// console.log(y) will print hey
// console.log(z) will throw print

I hope this article sums up what exactly is scope in Javascript. Also, I would like to mention we need to know how exactly let, const and var work in-order to take a much deeper dive into Scope.

Reach me out on Github and LinkedIn.

Follow me on Twitter

Have a nice day :)

How to iterate over an object in Javascript?

Rakshit — Sat, 02 Jul 2022 21:49:56 +0000

It was during the initial days when I was learning Javascript, I always used to be struck at a point when Objects are involved which is iterating over them. It also used to be so confused whenever I encountered a problem where I had to create a hashmap using an empty Object.

This article will give you a clear picture about how you can and how you cannot iterate over Objects in Javascript.

You cannot iterate over Javascript objects using the regular methods like map(), forEach() or for..of loop.

Let there be an object:

const object = {
    name: 'Rakshit',
    age: 23,
    gender: 'Male'
}

Using map()

object.map(obj => {})

You will get an error saying TypeError: object.map is not a function

Using forEach()

object.forEach(obj => {})

You will again arrive at an error saying TypeError: object.forEach is not a function

Using for..of

for (const obj of objects) {}

This will give you TypeError: object not iterable

So, how exactly can you iterate an object in Javascript?

Here are some of the ways you can do that:

One of the most simplest way is to use for..in loop

for(const obj in object) {}

But, personally I love to iterate over an object using the Object.entries() method. This method generates an array of all the enumerable properties of the object passed into it as an argument.

Since, it returns an array you can use any of the methods you use to iterate over an array.

Using map()

Object.entries(object).map(obj => console.log(obj))

Using forEach()

Object.entries(object).forEach(obj => console.log(obj))

Using for..of

for (const obj of Object.entries(object)) {
  console.log(obj)
}

That's it! Eureka! With this article I am sure you will never forget how to iterate over Objects in Javascript.

I hope the article helps.

Reach me out on Github and LinkedIn.

Follow me on Twitter

Have a nice day :)

Why you should be careful using setInterval?

Rakshit — Thu, 30 Jun 2022 20:47:01 +0000

If your are here, I am sure that you came across the 2 beautiful Web API's setInterval and setTimeout and want to make an even more deeper dive into understanding them and how they work.

Let us jump into the topic of the post...

I assume that you understand the basic functionalities of setInterval and setTimeout.

Now, before understanding why setInterval is this mischievous guy, we must first remind ourselves that Javascript is a single threaded language i.e. it can perform no more than one task at a time.

Let us take an example to explain the problem with setInterval.

function serverCall() {
    setTimeout(function() {
        console.log('x', new Date().toLocaleTimeString())
    }, 3000)
}

function callServerCall() {
    setInterval(function run() {
        console.log('y', new Date().toLocaleTimeString())
        serverCall()
    }, 1000)
}

callServerCall()


// Output will be
// y 02:00:54
// y 02:00:55
// y 02:00:56
// y 02:00:57
// x 02:00:57
// y 02:00:58
// x 02:00:58
// y 02:00:59
// x 02:00:59
// y 02:01:00
// x 02:01:00
// y 02:01:01
// ..
// ...

You can clearly see that setInterval keeps on running after every 1 second even without caring if the previously called serverCall function was executed or not.

This will prove to be a huge overhead on us because there will be a lot of requests to the server which are queued.

Points to be noted

When we call asynchronous operations inside setInterval it will prove to be very costly for us.
Even if your async operation takes lesser time than the delay set to the setInterval, the gap between two async calls wouldn't exactly be the delay set. It would be much lesser than that because the time taken to execute the async operation will also be calculated in the delay.

I hope the article helps.

Reach me out on Github and LinkedIn.

Follow me on Twitter

Have a nice day :)

MERN stack TODO application

Rakshit — Fri, 15 May 2020 14:30:56 +0000

Hello reader, I am sure you might be one of those people who are trying to figure out, How do we connect the React client with the backend?! I assure you by the end of this post you will be able to grasp the basic stuff you need to know in-order to build your own FullStack react web application.

In this post, I wouldn't be focusing much on the design aspect. Much emphasis will be given to the concept.

I am assuming that you are quite familiar with the structure of a react client repo. Firstly, you must have the react boilerplate code which can be created using the create-react-app package by npm.

create-react-app client
cd client/

Inside the client repo, create another folder called server.

mkdir server
cd server/

Initiate the package.json using the below code segment.

npm init -y

With the package.json file available in the server directory, we are ready to add some dependencies which will be useful in setting up the backend.

npm install express body-parser cors mongoose

Let us have an idea about what each of the above package does:

Express: Express is a light weighted web framework of Node.js. This acts as our main server and has many compatible middleware to perform almost any kind of function in web development.
body-parser: It is a middleware used to parse the posted data from the client side.
cors: Cross-origin resource sharing (CORS) is a mechanism that allows restricted resources on a web page to be requested from another domain outside the domain from which the first resource was served. And cors is the Node.js package which performs the above function for us.
mongoose: mongoose is an object modelling tool for MongoDB. It helps us access MongoDB in an object oriented way.

Then, we must also install a package called nodemon.

npm install -g nodemon

Nodemon is a utility that will monitor for any changes in your source and automatically restart your server. Nodemon is used to run our Node.js server.

After this, we need to install MongoDB. In MacOS, we van install and run Mongo by the following commands.

brew install mongodb
mkdir -p /db/data
mongod

After the mongo shell opens:

use todos

The above command will create a database named todos.

If you face any problem with the Mongo installation, you can refer to the official website. It is quite clear there about the installation process of mongodb.

With this we have installed all the packages we need for the server side.

Configuring the server and connecting the database

Let us first create a file called server.js inside the server folder.

touch server.js

Also create a directory called db inside the server and create a file called index.js inside it. This file will handle the connection of the database to the server.

mkdir db
cd db/
touch index.js

The index.js file inside the db directory is given below.

With the above code, we are creating an express server and we are binding the cors and body-parser middleware to the app object.

We make use of the mongoose library inside the index.js file of the db directory to connect the database. We are loading the database in the into the server.js file to complete the connection of MongoDB with the express server.

Also, note that the server listens to the port 3000.

To run the server:

nodemon server.js

Creating a mongoose schema

Create a models folder inside the server. Inside the models directory, create a file named todo-model.js.

Mongoose allows us to create a model in an object oriented way.

With the above code, we are ready to access the Mongo database using the Todo Schema.

Endpoint implementation

Create two folders inside the server directory, namely, routes and controllers. Inside the routes folder create a file named todo-router.js and inside the controller folder create a file named todo-ctrl.js.

We must first create a router instance inside the todo-router.js. The created router instance will be used to handle the implementations such as adding a Todo item or deleting a Todo item, etc.

const express = require('express')
const router = express.Router()

The above lines will create a router instance.

todo-ctrl.js will have the implementations of the actions like adding a Todo item or deleting a Todo item.

The todo-ctrl.js file has the code for main implementation of adding a todo item and returning all the todo items.

Inside the todo-router.js, we define the method of handling the request using the statement

router.post('/', todoCtrl.createItem)

Here, todoCtrl is the imported version of the todo-ctrl.js inside the todo-router.js and the createItem is the function which is declared and defined inside the todo-ctrl.js which handles the addition of todo item into the database.

We can also see the another route which is used to get all the todo items which we need to display on the browser.

We also must load the routes into the server.js file.

We can test the API's using Postman. Check the images below

With this, we finish the backend implementation of the Todo application.

Client side

We have already created the client side boilerplate code. We then create a components folder inside the src folder. We create a file named Todo.js inside the components folder.

We use axios package of npm for fetching the data from the endpoints.

npm install axios

The clickHandler method is used to post the data to the database. The componentDidMount method is a lifecycle method which gets triggered whenever a component inside the window is altered. So, when the todo item is posted, the endpoint to get all the todos will be hit by the componentDidMount method.

NOTE: It is advisable to use the map function in-order to loop around the todo items. For understanding purpose I have used the for loop.

Make sure that you import the Todo.js inside the App.js and run:

npm start

Open your browser and go to http://localhost:3001

As you add the items, the items will be updated.

I also want you to try deleting the todo items from the list. You can also try creating using a good design template.

The repo for the article can be found here

Reach me out on Github and LinkedIn

Enjoy :)

Forem: Rakshit

When to use React.useCallback Hook

What if you do not wrap a function using useCallback?

When to use useCallback?

When not to use useCallback?

Conclusion

Trello Clone with Drag and Drop functionality (No external library used)

Functions as First-Class Citizens in Javascript

Function Statements

Function Expressions

What is Scope in JavaScript?

Global Scope

Local Scope

Function Scope

Block Scope

Lexical Scope

How to iterate over an object in Javascript?

Why you should be careful using setInterval?

Points to be noted

MERN stack TODO application

Configuring the server and connecting the database

Creating a mongoose schema

Endpoint implementation

Client side

What if you do not wrap a function using `useCallback`?

When to use `useCallback`?

When not to use `useCallback`?