DEV Community: Rakesh Purohit

Is React 18 overhyped?

Rakesh Purohit — Sat, 27 Nov 2021 09:22:24 +0000

Is React 18 overhyped?

As a front-end developer, you must have come across articles titled as follows :

What’s new in React 18?
Should you learn React 18?
React18: Features and updates
The Complete Guide to React 18
React 18 will change front-end development.
Okay, 5th one was made-up…!!

All I’m trying to say, blog authors have done their best to draw awareness towards the upcoming release of React 18. My question is, “Does it worth it?”

To answer that, we will see “What’s new in React 18?” according to the official plan.

**Automatic batching for fewer renders**
New API: startTransition
**New Suspense SSR Architecture**

1. Automatic batching

Till React 17, the only event listeners have the feature of arranging multiple setState.

A piece of code is worth a thousand words.

From React 18 it will support inside of timeouts, promises, native event handlers or any other event will batch the same way as updates inside of React events.

What if I don’t want this feature?

2. startTransition

Suppose,

You’ve got an input element that causes an onChange event
The value gets updated.
On value change, you fire a query for data
Render the result on the screen.

It looks shallow but if we see rendering cycle and performance it may cause issues on slow environments depending on the computations going on such as animations and transitions and more interactive UI transactions.

In this case, some of us might have used throttling or debouncing or setTimeout but that doesn't stop the query from performing heavy UI renders.

This is the React 18 way!

Anything written inside startTransition will be chronicled as “non-urgent” by React. So if the user keeps changing the input value it will pick only the latest value and fire the query to get data! ( blushing while writing this line)

Quote this.

Transitions lets you keep most interactions snappy even if they lead to significant UI changes. They also let you avoid wasting time rendering content that’s no longer relevant.

**startTransition **doesn’t schedule the execution for later like setTimeout, rather it invokes immediately and synchronously.

Moreover, setTimeout doesn’t allow user interruption while startTransition allows the interruptions with the latest value only.

Loading….

This is how you can optimize the user experience. Users will get a spinner only while data is being prepared. No need to write brittle asynchronous code.

3. Suspense SSR Architecture

Don’t misunderstand it with the server component which is a completely different thing.

Server-Side-Rendering provides optimized hydration which leads to better SEO and indexing as well as user engagement, FMP and FCP.

SSR renders all HTML first and serves to the user so users can get the content, then loads JS file for interactive UI like button clicks, transitions, animation etc.

There are two new things:

Streaming HTML
Hydration.

Currently, it's “all or thing” there is no opt-in. In React 18 you can specifically choose which to stream first/last and which component to hydrate first/last. Totally up to you. Great, right?

Bonus

=> useId :

To give a unique id, we rely on packages like UUID (not to mention why). React has its API for that, which is globally unique. See code below.

My opinion:

Automatic batching => Pass
startTransition => Pass
SSR => Pass

Yet, I believe that React 18 doesn’t merit the current hype. Not everyone running projects on React 17 are going to run ncu -u and update the react and react-dom packages.

Let me know your feedback !!

Github Actions for React-Native App

Rakesh Purohit — Fri, 26 Nov 2021 04:30:38 +0000

My Workflow

Building cross platform application with react native consumes time for android and iOS, both. Github actions allows to reduce it by writing or using existing workflows even for web. I have implemented for my react-native app to build android app. (find link below).

Submission Category: Phone Friendly

Yaml File or Link to Code

TheRakeshPurohit / VaccinfoApp

React Native App for Android and iOS to get Vaccine Availability Details by Pincode and notification

VaccinfoApp

React Native App for android and iOS to get Vaccine Appointment Availability Details by pincode and notification

Intall APK

Download APK

It will work for india only

Restrictions

Takes current date by default.

Pre-Requisites

buildToolsVersion = "29.0.3"
minSdkVersion = 21
compileSdkVersion = 29
targetSdkVersion = 29
ndkVersion = "20.1.5948944"

Tested on

Android 8 and 9

API for validating Pin Code

https://api.postalpincode.in/pincode/111111

API for getting slots

https://cdn-api.co-vin.in/api/v2/appointment/sessions/public/calendarByPin?pincode=111111&date=02-05-2021

Libraries used

Fetch for API Call
React (17.0.1) & React Native (0.64.0)

https://docs.google.com/forms/d/e/1FAIpQLSd4mfZj9j-2vZiCnaIlAQOZhHoB1nBT9KSXlSC-5e5tl1-SHg/viewform?vc=0&c=0&w=1&flr=0&usp=mail_form_link

View on GitHub

How to publish my own NPM package ?

Rakesh Purohit — Fri, 09 Jul 2021 08:28:32 +0000

What is NPM?

As javascript developers, all of us use npm CLI and NPM in our everyday non-public or expert life. NPM is a large bundle dealing with a provider that offers an extensive variety of javascript applications that simplifies our venture and improvement process.

NPM stands for Node Package Manager. Node is a javascript runtime surroundings jogging at the V8 engine.

We all have used sizeable numbers of npm applications for projects, packages or perhaps for utilities. There are large open-supply individuals withinside the globe supplying loose applications on NPM.

Using any NPM bundle is remarkably simple. All we want is

npm i ~bundle-name~

NPM additionally manages the variations of all posted records of the bundle hosted at the platform.

Two sorts of applications may be hosted at the NPM Registry:

Public
Private

Public Packages are loose to submit, regulate and use. Anyone with an account on npmjs.com can submit an npm bundle. Similarly, every person with the machine set up Node can use the NPM applications.

Private Packages applications may be posted, changed and utilized by paid customers of NPM only. It is constrained to precise members.

How to publish your first NPM Package?

Make sure Node is installed on your system.
Make sure you have an account on NPM
Login through CLI with npm login

It will ask for username, password and email for verification.
4.

mkdir my-test-package

5.

cd my-test-package

6.

npm init

Hit

npm publish
Great! You have published your first npm package to the NPM registry.

Thank you for Reading !!

Figma to Kotlin App

Rakesh Purohit — Fri, 25 Jun 2021 14:02:22 +0000

It's simple.

Just give your figma link and Download the source code of your Kotlin App or sync to your GitLab or GitHub.

For more details visit https://www.dhiWise.com

Or watch this video https://www.youtube.com/watch?v=yzA0QmoWLLo