Get the best possible explanation on react memo 😃

Image for post
Image for post

What is useMemo?

Basically, whenever any update happens in the parent component, all the child components also re-render, which heavily affects the performance of the application. Hence we use react memo(memoization) to cache the data or component.

For example, please go through the code below or run it


The best explanation possible to understand useRef in react

Image for post
Image for post

🤔 What is useRef?

It is just like useState, used to store the data. But unlike useState which triggers an update(re-renders) whenever the state change, useRef doesn't trigger an update.

  1. A data store just like useState
  2. Doesn’t cause re-renders unlike useState
  3. Easily exposes DOM elements (access them directly)
  4. Has single property called current
  5. Used to store the previous state
  6. Used to pass the data through the re-renders

useState 🆚 useRef

Trying to count the number of time the app renders on changing the value in the input box

❌ Counting renders using useState

import React, { useEffect, useState } from "react";import…


Deploy your dockerized react application in AWS using terraform

Image for post
Image for post

Before starting let me tell you that this is a part of my series “Making your React app hosting ready”. In the series, I explained how to convert your react app to a progressive web app, implement server-side rendering and dockerize the application and make it ready for hosting it in AWS using Terraform. Do check it out 😉

BTW you need to create an AWS account with your credit or debit card credentials in order to proceed. …


Make your app more awesome. 😎😎😎

Image for post
Image for post

Why docker?

Docker is an open-source containerization platform. Docker enables developers to package applications into containers — standardized executable components that combine application source code with all the operating system (OS) libraries and dependencies required to run the code in any environment.

To make your react app ready for hosting, we must dockerize it.

To proceed, you must have some basic knowledge of docker and docker-compose

Don't worry if you do not know much about docker; follow me for my next article for docker basics to advance. 😉

Steps to dockerize your React app:

Our react app need two images one is a node for compiling and…


Host your React PWA, SSR, dockerized web app in AWS using terraform

Make your react app more awesome 😎😎😎

Image for post
Image for post

After spending hours developing and writing a hell lot of code 🥱, if we don't make it hosting friendly, there will be many performance issues when the end product reaches your clients or users. 😦

React app generally made using CRA template is not hostable. One must make sure the below points:

  1. Making your react app a progressive web app so that it's mobile-friendly and look like a native app, which most of us want to see
  2. Should be Service side…


Make your react app more awesome 😎😎😎

This is part 2 of ssr in React where I will be explaining loading data on the server and sending it to the client along with rendering on the server.

Check out my previous article where I explained ssr in React in the simplest way possible using webpack.

Image for post
Image for post

Loading data on the server-side rather than on the client-side for page loads

Let's take an example of the covid stats website

All the data, charts, tables need to be loaded on page load from API. In react we do that using useEffect.

This increases the load time if the data gets rendered on the client side. In…


Image for post
Image for post

A. Split the string

problem link here

Approach

The first problem in any code chef challenge always tests your basic logical skills, nothing much to code.

In the given problem they are asking us to just find if we can split a string into two strings such that the second string is a substring of the first string.

Ex : abcab = abca + b || abc+ ab

Since they aren’t asking us to maximize or to minimize the strings we can just check if the last letter is in the first n-1 letter and print “YES” or else “NO”. That’s it !!

Code

#include <bits/stdc++.h>…


Make your React app more awesome. 😎😎😎

Image for post
Image for post

Why is this needed?

JavaScript's frameworks, like react, brings a first-class user experience and also very developer-friendly. Beginners often build a complete website using starter kits like create-react-app and don't realize the major issue until they go live.

If you have built a big website with many components and go to view page source, you don't see any of them in it 🤔🤔 Why??


Do it right for the first time itself!!

A medium-api-npm package to read articles from medium and display it in your website and also post articles from your blog website to medium, which most bloggers for dream for

Image for post
Image for post

Create your npm account

  1. Visit here and create your npm account
  2. Once done creating go to your command prompt and type
 npm adduser

What are we going to build ?

The script we are going to write always depends on what we actually are going to build.

For starters lets build a small yet significant npm package. People always want to…


“Don’t spend hours just setting up your mern app ”— Anonymous

This is the best npm package for creating a mern app like create-react-app so far

Image for post
Image for post

Why is it best ?

It sets up the whole react routing, redux, server with routes and mongoose models and many more. It follows the best folder structure. Must-try for react and mern lovers 🖤🖤🖤

What does it include ?

  1. React router is set up
  2. Redux is set up persisting the state in localStorage “state”
  3. server is set up with mongo as database
  4. models, routes folder is set up
  5. server running in local host 5000 react in 3000
  6. Git is initialized
  7. React starp is…

Kvs Sankar

Web developer | Competitive Programmer — Visit github.com/kvssankar

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store