Topics on JavaScript frameworks such as React, Next.js,MERN stack, and any other technology based on JavaScript
React Query is a library that simplifies the process of managing data fetching and caching in React applications. It provides a set of tools and utilities for fetching and updating data from APIs and other data sources and manages the state of data fetching and caching automatically. The library provides a comprehensive set of hooks …
In this post, I will be discussing TypeScript classes, which is a big topic in Object-Oriented Programming. To start, I will go over the essential features of TypeScript classes. In future posts, I will delve into the topic in greater detail and cover how TypeScript implements OOP concepts such as Inheritance and Polymorphism, as well …
Learn the fundamentals of Typescript classes in no time Read More »
What is Type Annotation? TypeScript is a statically-typed language. Hence, Type Annotation is an essential part of TypeScript that you need to be well familiar with. Type Annotations mean different ways that you can define types of variables, parameters, and return values of functions, and properties (of objects). There are many ways to do type annotation …
You may have heard of TypeScript whether you are a JavaScript or React developer or even a newbie. It is said to be a superset of JavaScript. What does it mean by a superset? This really means that TypeScript includes all the features of JavaScript and extra features on top of it. So, what does …
TypeScript is a superset of JavaScript. Unlike JavaScript, Which is dynamically typed, it is statically typed. This means you will know the types of variables used in your code at the compile time. This helps you as a developer to check for typed-related errors before the code is executed. If there are no compiled errors, …
How to create React functional components in TypeScript Read More »
React.lazy and Suspense make React developer life easy. React.lazy helps in code-splitting and Suspense backup React.lazy in loading state. Before, we go into details let’s start things simply. let’s be familiar with some background knowledge. What is Bundling? Bundling is the process of putting code in many files into one file. While bundling is essential …
React.lazy and Suspense make code-splitting easy Read More »
React useMemo hook One of the ways that you can improve the performance of React apps is by using the useMemo hook. This hook prevents expensive calculations from running on every render. The React useMemo takes two arguments: a function and a dependency array. useMemo( function, dependancy_array) Now, let us see how useMemo work by an …
How to use React useMemo hook to improve performance Read More »
You may have encountered a situation where you need to add a carousel to the landing pages. A carousel is a slide show of images or videos or a combination of both images and videos in a cyclic manner. You can create a carousel from scratch with HTML, CSS, and JavaScript. However, if you use …
How to create React Bootstrap carousel for landing pages Read More »
What are webhooks? A webhook is a way for an application to communicate with other external applications. Apps use webhooks to send automated messages or information to other apps. For example, Payal would tell your accounting app whenever a client pays you, Twillio routes phone calls to your number, and WooCommerce can notify you about new …
Full-stack apps built with Next.js has three aspects of authentication: client-side authentication, server-side authentication, and API route authentication. I have discussed client-side authentication in a previous post. In this post, I will be discussing Server-side & API routes authentication in NextAuth.js. How does server-side authentication work? The browser sends a request with a user session …
How to implement authentication for SSR pages & API routes in Next.js Read More »
