Today we are going to write a reusable custom hook, and build a simple application that will make use of the hook. If you don’t already know hooks were a part of React from v16.8 onwards. They were essentially included as a feature to avoid using classes or class-based components. We can leverage state and other React features the same way we did while using React class-based components. Hooks are just a cleaner way to write programs in React.

What we will have by the end of the tutorial are two components mainly a User component and a Post component…


A headless content management system (CMS) like Strapi is very handy in terms of managing digital content. You have a GUI exposed to register the Content-Type and the content itself through a user-friendly and clean interface. If you are a blogger or want to spin up a website real quick you might as well want to source all of your blog/website’s content from a CMS. Basically, CMS like Strapi exposes an API that can be used to query the content using frontend technologies like React and Next.js.

Today we will look at how easy it is to fetch data hosted…


During the process of developing React applications, I’ve had times when I had to decide if I should use Redux or the fairly new hook (available from React’s version 16.3) called ContextAPI for managing state in my application. For the most part, I have used Redux, but I feel Context API is a little less daunting to me. Anyway, let me explain you through to manifest if either one’s actually better.

We will succinctly look through what these technologies do and how they do, which will probably help you decide which one should you choose for your next project.

Table of Contents


Zustand — A simple, fast, and convenient state-management solution using Hooks API.
Zustand — A simple, fast, and convenient state-management solution using Hooks API.

Zustand is a pretty neat state-management tool. When I say state-management, you might as well want it to be compared with Redux or Context. But, this blog wouldn’t be the typical rundown of pros and cons and comparing technologies as every technology has its own pros and cons. Instead, we are going to have a look at how Zustand makes it easy to get started with handling state on your applications.

By any chance, if you are looking for a top-hole definition of Zustand, here it is:

It is a small, fast and scaleable barebones state-management solution. It has a…


We all want to create beautiful layouts, add exquisite animations, and want to deliver a top-notch user interface but let me be honest, how many of us are really aware of the web vitals that can help deliver a blazingly fast user-experience. In short, Google uses these web vitals to provide quality standards on user experiences.

What are Web Vitals?

Web Vitals are essentially a way to quantify the user-experience of one’s website, which if optimized can help deliver a great user-experience. It is an initiative by Google and they have provided a few different tools to monitor the performance of websites. When one…


Styled Components in React
Styled Components in React

Not a very long time ago, CSS style sheets were the only appropriate way to paint any modern app. That is basically the traditional method of styling at the document level — creating a style.css file and referencing it on the HTML document for the styles to appear.

But with constant updates and improvements, we now have with us something known as styled-components. Styled components are basically an innovative way of using Javascript’s ES6 syntax, along with CSS which enables us to enhance our styling in React components. From very old and basic .css files to .scss


Multi-factor authentication is an authentication method in which a user is granted access to a website or application only after successfully presenting two or more pieces of evidence to an authentication mechanism: knowledge, possession, and inherence.

In the same way, the two-factor authentication method requires you to enter additional data as evidence to access your account. The most common forms of two-factor authentication involve entering a code as used by Google and Facebook for additional security.

Advantages of Two Factor Authentication

  • Added layer security and added protection against cyber attacks.
  • Do not incur any extra costs while setting up.
  • Easy and convenient setup. For most…


Absolute imports and module path aliases are a game changer!
Absolute imports and module path aliases are a game changer!

Absolute imports are indeed a game-changer, at least for me. At times when you have different directories or files to import from, you’d perhaps know the challenge of trying to remember every folder structure so you don’t mess up while importing content.

Remember when you had to spend some time figuring out if the file you have imported is even the right one? It can get unexciting if that happens quite often. Imagine getting caught up in trying to identify if you have the right dots to your import path. …


Next.js has introduced a very handy feature called Incremental Static Re-generation from versions 9.5 and above. It has been five months now since v9.5, nonetheless, I thought the feature was really cool and I had to try it out.

What is Incremental Static Re-generation?

Incremental Static Re-generation is basically a way to update static content on your sites. As we know using methods like Static Site Generation (SSG), we can pre-render sites (fetch data at build-time) and deliver content blazingly fast. While Next.js cares about delivering content almost instantly, they equally care about handling stale data or dealing with dynamic data.

Rebuilding a website for…


Next.js has introduced Automatic Image Optimization in versions 10.0.0 and above, using a built-in Image Component. It is an extension of the HTML element, evolved for the modern web.

The Major Concern

Images make up one of the largest elements to be loaded on a page. Thus, we need to have a way to optimize images for better Web Vital scores.

Unoptimized images can take a toll on significant Web Vitals such as Largest Contentful Paint or LCP.

Largest Contentful Paint (LCP) is a Core Web Vitals metric and measures when the largest content element in the viewport becomes visible. …

Sboro

I write about front-end technologies, development and best practices at large.

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