The best explanation possible to understand useRef in react

🤔 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

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. 😎😎😎

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. 😉

Let the fun begin. 🥳🥳🥳

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 😎😎😎

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.

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…

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. 😎😎😎

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

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

3. Type your username and password and you are ready to start

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…