DEV Community: Ashish Prajapati

[Boost]

Ashish Prajapati — Wed, 18 Feb 2026 03:28:36 +0000

Next.js Finally Has Competition

Elvis Sautet ・ Feb 15

#nextjs #webdev #react #javascript

[Boost]

Ashish Prajapati — Sat, 14 Feb 2026 04:22:46 +0000

One Month at a Startup: What Stayed With Me After I Left

Aryan Choudhary ・ Feb 10

#career #startup #learning #mentalhealth

Next.js: A Comprehensive Overview

Ashish Prajapati — Sat, 07 Feb 2026 15:44:57 +0000

Next.js: A Comprehensive Overview

Picture this: You've just built a great React app. It works flawlessly on your machine. Then you deploy it, and reality hits - your SEO is non-existent, your initial load time is sluggish, and you're manually configuring everything from routing to image optimization. Sound familiar?

This is exactly where Next.js enters into the picture, like a Swiss Army knife for React developers.

What is Next.js?

Next.js is Vercel's production-ready react framework - it takes everything about React and wraps it in a framework that handles server-side rendering, static generation, and routing without you having to wire up a single configuration file.

Born from the real-world pain points developers face when scaling React applications, Next.js has evolved into one of the most popular meta-frameworks in the JavaScript ecosystem.

Key Features

So what makes Next.js special? Let's unpack the toolbox.

When you create a Next.js project, you're not starting from scratch. You're stepping into a well-architected world where common problems already have elegant solutions baked in:

Hybrid Rendering: Mix and match Static Site Generation (SSG), Server-Side Rendering (SSR), Client-Side Rendering (CSR), Incremental Static Regeneration (ISR), and Partial Pre-Rendering (PPR) based on what each page actually needs
File-based Routing: Drop a file in the app or pages directory, and boom-you have a route. No configuration files, no router setup
API Routes: Need a backend endpoint? Create a file in the API folder. You've just built a serverless function
Built-in Optimizations: Code splitting happens automatically. Images get optimized. Fonts load efficiently. You don't lift a finger
TypeScript Support: Full TypeScript support that just works-no wrestling with tsconfig files
Middleware: Edge functions that let you intercept and modify requests before they hit your pages
Server Components: React Server Components support means you can fetch data on the server and send zero JavaScript for that component to the client

The philosophy is simple: give developers powerful tools that require minimal configuration.

The Bright Side: What Next.js Gets Right

Every framework has its strengths, and Next.js has plenty. After shipping dozens of projects with it, here's what consistently impresses:

Massive community backing - When you hit a wall at 2 AM, chances are someone on Stack Overflow has already climbed it. The ecosystem is thriving with libraries, tutorials, and third-party tools

Rendering flexibility that actually makes sense - Need a static blog? Use SSG. Building a dashboard? SSR has your back. E-commerce product pages? ISR updates them incrementally. You're not locked into one approach

Route-level caching - Control exactly how and when each route caches. It's granular, powerful, and surprisingly intuitive

Image and font optimization that just works - Import next/image, and suddenly your 5MB photo becomes a responsive, lazy-loaded, next-gen format masterpiece. Same goes for fonts-no more flash of unstyled text

SEO without the headache - The metadata API makes it dead simple to add meta tags, Open Graph images, and structured data. Google loves it, and so will your marketing team

Layouts that make architectural sense - Share headers, footers, and sidebars across routes without prop drilling or context hell

Parallel routes for sophisticated UIs - Load multiple pages simultaneously in the same layout. Perfect for dashboards and complex interfaces

CSS support that doesn't discriminate - CSS Modules, Sass, Tailwind, styled-components-bring your favorite, they all play nice

Developer experience that respects your time - Fast Refresh means you see changes instantly. Error messages actually help you fix bugs. The debugging experience is stellar

Deploy-ready out of the box - Optimized for Vercel, but it runs happily on AWS, Digital Ocean, or any Node.js environment

The Rough Edges: Where Next.js Stumbles

But let's be real - no framework is perfect. Next.js has quirks that'll make you scratch your head, and some decisions that feel... questionable. Here's what you should know before you commit:

Accidental wrong imports - Sometimes we accidentally import stuffs from Page router inside the App router. Which should not happen if the application is initialized with App router and vice-versa.

Type safety has blind spots - The Link component's href prop isn't type-safe by default. You can pass /prodcts instead of /products and TypeScript won't catch it. For a framework that champions TypeScript, this feels like an oversight

Major versions break things - Upgrading from Next.js 12 to 13 to 14? Expect to rewrite code. The framework evolves fast, which is great for innovation but painful for maintenance

Layout inheritance is rigid - Your root/parent layout always wraps child pages. Always. Want to completely replace it for a landing page? Too bad. You're stuck with the wrapper, which can be frustrating for marketing sites

JavaScript payload isn't tiny - That first load can hit 85-100 KB of JavaScript. For a simple site, that's overkill. Frameworks like Fresh and SolidJS ship a fraction of that

Vercel optimization bias - While Next.js runs anywhere, let's not pretend-it's optimized for Vercel's platform. Self-hosting works, but you'll miss out on edge functions and some optimization features

The learning curve is real - App Router vs. Pages Router. Server Components vs. Client Components. When to use use client and when not to. For newcomers, it's overwhelming

Over-engineering temptation - Next.js gives you so many tools that it's easy to reach for SSR when static HTML would've sufficed. Sometimes simplicity is better

Where Next.js Shines Brightest

Understanding when to use Next.js is half the battle. I've seen teams succeed wildly with it and others struggle unnecessarily - usually because they picked the wrong tool for the job.

Here's where Next.js truly excels:

🎯 Perfect Fit Scenarios

1. E-commerce Platforms: Where Performance Meets Discoverability

Imagine you're building an online sneaker store. You need those product pages to rank on Google, images to load blazingly fast (thank you, next/image), and dynamic inventory updates without full page rebuilds (ISR to the rescue).

Next.js was built for this. Product listings load fast, search engines can crawl everything, and your customers get a snappy experience. Companies like Nike and Hulu have proven this at scale.

2. Content-Heavy Websites: The Blogger's Best Friend

Running a tech blog or news publication? You're publishing content regularly, need fantastic SEO, and can't afford slow page loads that make readers bounce.

With ISR, your blog posts can be statically generated but revalidated every few minutes. New article? The static page regenerates automatically. It's the perfect middle ground between static site speed and dynamic content freshness.

3. SaaS Applications: Dashboards That Don't Compromise

Building a project management tool or analytics platform? Your landing page needs to be fast and SEO-optimized (static). Your dashboard needs authentication and personalized data (SSR). Your API needs to live somewhere convenient (API routes).

Next.js handles all of this in one framework. You're not stitching together three different tools-it's all right there.

4. Marketing Websites: First Impressions Matter

Your company's homepage gets one shot to load fast and look professional. Next.js gives you image optimization, pre-rendering, and excellent Core Web Vitals scores by default.

Add A/B testing through middleware, use ISR for testimonials that update from your CMS, and watch your conversion rates climb.

5. Multi-tenant Applications: When Customization Is King

Building a platform where each customer gets their own branded subdomain? Next.js's dynamic routing and middleware make this elegant. Fetch tenant data server-side, customize the UI per tenant, and keep everything performant.

When to Walk Away: Next.js Isn't Always the Answer

Here's an uncomfortable truth: sometimes Next.js is overkill. And using it anyway is like bringing a bulldozer to hang a picture frame.

Let's talk about when simpler alternatives make more sense:

⚠️ Think Twice Before Using Next.js For...

1. Small Portfolio Sites or Static Blogs

You're a designer showcasing your work. Five pages, minimal interactivity, content changes quarterly. Why are you shipping 85 KB of JavaScript and dealing with server-side rendering?

Use Astro, Svelte, Qwik, or even plain HTML and CSS. Your portfolio will load in milliseconds, cost nothing to host on Netlify, and you'll spend your time designing instead of configuring build settings.

2. Experimental Weekend Projects

You want to learn something new. Maybe you're curious about Svelte's reactivity model, or you've heard Solid.js is wicked fast and want to see for yourself.

Don't reach for Next.js out of habit. Trying Remix, SvelteKit, or Qwik will expand your toolkit and might just change how you think about web development.

3. Pure Single-Page Apps with Zero SEO Needs

You're building an internal admin dashboard. No one's searching for it on Google. It's behind authentication. Every interaction is client-side with API calls.

Just use Vite with React. You don't need server-side rendering, you don't need static generation, and you definitely don't need the complexity Next.js brings to the table.

Getting Your Feet Wet: A Quick Start

Enough theory. Let's build something.

Starting a Next.js project is refreshingly simple. You don't need to configure webpack, set up routing, or install a dozen dependencies. One command, and you're coding:

# Spin up a new Next.js app
npx create-next-app@latest my-app

# Jump into your project
cd my-app

# Fire up the development server
npm run dev

Within seconds, you'll have a development server running at localhost:3000 with hot reload, TypeScript support (if you want it), and the basic file structure ready to go.

See It in Action: Dynamic Routes

Want to see the magic of Next.js? Here's a product page that fetches data server-side using dynamic routes. No configuration, no route definitions-just a file structure:

// app/products/[id]/page.tsx
export default async function ProductPage({ 
  params 
}: { 
  params: { id: string } 
}) {
  const product = await fetch(`https://api.example.com/products/${params.id}`)
    .then(res => res.json());

  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      <p>${product.price}</p>
    </div>
  );
}

That's it. Create a file at app/products/[id]/page.tsx, and Next.js automatically generates routes like /products/1, /products/2, etc. The data fetches server-side, so search engines see the full HTML. No useState, no useEffect, no loading spinners-just clean, server-rendered content.

How Does It Stack Up? Performance Face-Off

Numbers tell a story. Here's how Next.js compares to other modern frameworks when it comes to the metrics that actually matter-bundle size, time to interactive, and SEO capability:

Framework	First Load JS	Time to Interactive	SEO Capability
Next.js	~85-120 KB	Fast	Excellent
SolidJS	~6-30 KB	Very Fast	Excellent
Marko	~0-15 KB	Very Fast	Excellent
Deno Fresh	~0-5 KB	Very Fast	Excellent

Note: Sizes vary based on application complexity and configuration

The Verdict: Should You Bet on Next.js?

Here's what it comes down to: Next.js is a production-grade framework that solves real problems. It's not the lightest, it's not the simplest, and it's definitely not perfect. But when you need to ship a React application with great SEO, solid performance, and room to scale, it's hard to beat.

I've seen Next.js power everything from scrappy startups to enterprise applications serving millions of users. The framework handles complexity gracefully, the community is active and helpful, and Vercel continues to push it forward aggressively.

That said, don't use Next.js just because everyone else is.

"use client" and "use server" directive in simple manner

Ashish Prajapati — Mon, 05 Jan 2026 15:13:58 +0000

Rethinking Conditional JSX in React - Part 1

Ashish Prajapati — Thu, 25 Dec 2025 17:11:24 +0000

Note:- This is an attempt of mine to making JSX more easy, maintainable and fun to write.

Introduction

We all have been writing the conditional jsx in different manners whether its ternary hell, short-circuiting, or switch object to render specific component with key, or rendering the async list(array) with Arr.length > 0 && Arr.map something like that and so on.

And that was it, when it clicked to me and I started my journey to make writing of conditional jsx in a manner which would be easy, readable and maintainable to write.

But, first let's take a closer look at the problems which I am talking about.

Current Conditional JSX Problems

Ternary becomes un-readable when item ? true : false clause are bigger than 5-10 lines.
Nested ternaries can create buggy, un-readable and hard to maintain code.
Scattered logic due to Object switching. Over the time it can grow larger.

Managing two seperate type-definitions for Object switching and actual state.

type Status = "Active"|"Inactive"|"Banned"
const status:Status = "Active"
const StatusComp: Record<Status, ()=>ReactNode> = {
  "Active":()=><div>active</div>,
  "Inactive":()=><div>inactive</div>,
  "Banned":()=><div>Banned</div>
}

Un-avoidable null/undefined, length checks or optional chaining for async list data.
To render repeated/template jsx, writing new Array(length).fill(0).map() code everytime.

Now let's look at the code snippets describing the conditional jsx that we write.

1. Ternary and short-circuting problem

function Dashboard() {
  const [showUser, setShowUser] = useState(false);
  const [currentUser, setCurrentUser] = useState(null);

  return (
    <div>
      {/* Based on flag, show the content */}
      {/* If no fallback needed */}
      {showUser && <div>User modal component</div>}

      {/* If fallback needed. */}
      {/* This gets unreable if jsx is bigger than 5-10 lines */}
      {showUser ? <div>User modal component</div> : <div>some other thing</div>}
    </div>
  );
}

2. Sync/Async list rendering problem

function List() {
    const [notes, setNotes] = useState<{ id: number, title: string }[]>([])

    useEffect(() => {
        // assume, notes are coming from api
        setNotes([
            { id: 1, title: 'some random' }, 
            { id: 2, title: "awesome" }
        ])
    }, [])

    return (
        <ul>
            {/* rendering notes */}
            {/* manually checking the length and running map function. */}
            {/* Which already look too repetitive and cumbersome to write often */}
            {notes.length > 0 && notes.map((item) => {
                return (
                    <li>{item.id} - {item.title}</li>
                )
            })}
        </ul>
    )
}

3. Switching object problem

function Switch(){
    const userStatus: "Banned"|"Online"|"InActive" = "Online" 

    // This is often created to manage switch based logic.
    // Which just creates two twisted sources for jsx. 
    // it always become un-managable by managing two seperate types
    const StatusComponent = {
        "Banned": ()=><div>banned status component</div>,
        "Online": ()=><div>online status component</div>,
        "InActive": ()=><div>in-active status component</div>,
    }
    const ActiveStatus = StatusComponent[userStatus]

    return (
        <div>
            {/* Showing different status component based on the user status */}
            {<ActiveStatus />}
        </div>
    )
}

I am pretty sure, you all have written these kind of code. Most of the time it's un-avoidable.

Whether it's ternary, short-circuit, object switching or async list rendering, there is so much un-readability, code become un-maintanble or buggy over the time if there are multiple conditions to satify.

I will not pretend that React is the best UI library out there. In fact most of these issues are aleardy solved in SolidJS, Svelte and VueJs. Let's take a look at them

SolidJS Conditionals

<Show
  when={loggedIn()}
  fallback={<button onClick={toggle}>Log in</button>}

  <button onClick={toggle}>Log out</button>
</Show>

Svelte Conditionals

{#if count > 10}
    <p>{count} is greater than 10</p>
{:else if count < 5}
    <p>{count} is less than 5</p>
{:else}
    <p>{count} is between 5 and 10</p>
{/if}

VueJS Conditionals

<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>

Since, all of these frameworks are fine-grained unlike React, which is coarse-grained(components are re-rendered on state update) and how jsx is parsed, due these it becomes impossible to implement these kind of component based conditional rendering in JSX.

After lots of experimention, long before even I knew about these frameworks, I build these solutions for solving out the conditional jsx in react.

Solving The Problems

1. If-Else component -> Replacing Ternary and Short-circuit

We can tackle the short-circuit and ternaries with If-Else syntax, which feels like natural if-else code, easy to write, read and maintain.

Super clean!!!

Handle only sync values.(async value support is in-progress)
If-Then-Else syntax

import {If, Then, Else} from 'classic-react-components'

function Dashboard() {
    const [showUser, setShowUser] = useState(false)

    return (
        <div>
            {/* No ternary for simple toggling. Use if-else */}
            <If condition={showUser}>
                <Then>
                    <div>User modal component</div>
                </Then>
            </If>


            {/* Use if-else syntax */}
            <If condition={showUser}>
                <Then>
                    <div>User modal component</div>
                </Then>
                <Else>
                    <div>some other thing</div>
                </Else>
            </If>
        </div>
    )
}

2. For component -> Solving sync/async list rendering

For rendering the sync/async list, we have For component, which just feels like normal for-loop. It takes data, which gets inferred in the callback automatically. No null/undefined checks etc.

Code already become minimal and super easy write and remember.

Type-safe
No null checks


function List() {
    const [notes, setNotes] = useState<{ id: number, title: string, description?: string }[]>([])

    useEffect(() => {
        // assume, notes are coming from api
        setNotes([{ id: 1, title: 'some random' }, { id: 2, title: "awesome" }])
    }, [])

    return (
        <ul>
            {/* rendering notes */}
            {/* No undefine check or Array.map */}
            {/* Fully type-safe */}
            <For data={notes}>
                {(item, index)=> <li key={index}>{item.id} - {item.title}</li>}
            </For>
        </ul>
    )
}

3. Switch-Case component -> Solving switching of object

And lastly we have Switch-Case component, you heard it right. We can write switch-case code inside in our jsx finally!!!.

Fully type-safe
Handles async values
Provides syntax similar to switch-case, it has also default case.

function Switch(){
    const userStatus: "Banned"|"Online"|"InActive" = "Online" 

    return (
        <div>
            {/* No type needed, using infering  */}
            <Switch item={userStatus}>
                {({ Case, Default }) => {
                    return (
                        <>
                            {/*  value is type-safe */}
                            <Case value='Banned'>
                                <div>banned status  component</div>
                            </Case>
                            <Case value='Online'>
                                <div>online status  component</div>
                            </Case>
                            <Case value='InActive'>
                                <div>in-active status  component</div>
                            </Case>

                            {/* put any where, ordering does not matter for <Default> */}
                            <Default>
                                <div>this is default case</div>
                            </Default>
                        </>
                    )
                }}
            </Switch>
        </div>
    )
}

You already can see how our jsx becomes more readable, maintainable and fun to write. You can write if-else, for and switch-case code inside our jsx. That is so cool!!!

That's it for now. On next part, I will talk in-detail about all of the components.

[Boost]

Ashish Prajapati — Wed, 06 Aug 2025 13:01:34 +0000

Jakub Andrzejewski

Aug 4 '25

The reality of Open Source

#opensource #webdev #programming #beginners

Comments

3 min read

MCP - The "USB-C Port" for AI Apps

Ashish Prajapati — Sun, 27 Jul 2025 12:09:25 +0000

Intro

Have you ever thought or wished that AI assistant like Claude, ChatGPT or your own AI assistant could actually open up your gmail and reply to your customers queries, accessing files from Google drive, updating task status on jira, sending notification on slack when a task status gets updated - without you writing a mountain of glue code? That's exactly the problem what MCP(Model Context Protocol) solves.

What is MCP in one line?

MCP is an open protocol(standard) that lets any AI application talks to any external tool, services or data resources in a single, secure and standardized way.
The pain MCP fixes

Before MCP, every new itegration looked like this:
- Build custom API wrappers
- Handle auth, rate-limits
- Repeat these steps for every LLM provider
USB-C analogy

You can think of MCP like a USB-C port for AI applications. Just like USB-C provides a standardized way to connect your devices to various peripherals or other devices, MCP provides same kind of standardized way to connect AI models to different data resources and tools in plug-n-play manner.
Under the hook working
Simple example

For example, you can ask following:

"Show last five emails which I recieved on my gmail account."
Security & Governace

MCP servers run locally or in your VPC; credentials never leave your machine so much lower chances of leaking.
Each tool has its own JSON-Schema inputs, so the malicious request can be blocked before even they are executed.

TL;DR

                MCP = Universal protocol for all AI applications

Read official docs here. https://modelcontextprotocol.io/docs/learn/architecture

What was you win of the Week?

Ashish Prajapati — Fri, 11 Jul 2025 15:55:53 +0000

Jess Lee for The DEV Team

Jul 11 '25

What was your win this week?

#discuss #weeklyretro

Comments 39

1 min read

An Introduction To Immer in React

Ashish Prajapati — Thu, 10 Jul 2025 19:30:07 +0000

Introduction

When we deal with updating any nested or too deep property within an object (nested or flat level), it is possible that you might have run into some weird issues:-

State does not get properly updated.
Updating it affects somewhere else.
Or it completely destroys the application.
Always creating shallow copy and updating the state in immutable way.

We often find ourself doing these to fix it:-

// parsing from json
JSON.parse(JSON.stringify(BigNestedObject))

// lodash clone
lodash.clone(BigNestedObject, true)

// shallow copy, most people do not understand deep copy
const newObject = {...BigNestedObject}

// deep copy on every update. But very expensive
structuredClone(BigNestedObject)

So to deal with all these sort of problems, we can use Immer and make our life much better once for all. Let's understand more about it.

Table of content

What is Immer?
What does Immer brings to the table?
Installation
Simple Example with Immer produce function
Using Immer in React
Tips to better utilize Immer

What is Immer?

Immer is a developer friendly and performant package, which helps to manage immutable states in our application with ease. Updating the state in mutable way but it's immutable. Read offical Docs here (https://immerjs.github.io/immer/)

What does Immer brings to the table?

Immer provides a way deal with Immutable data structures which allow for efficient change detection:-
- if the reference to an object didn't change, the object itself did not change.
It makes cloning relatively cheap:-
- Unchanged parts of a data tree don't get copied and are shared in memory with older versions of the same state.
We do not need to spread or copy the object again and again. No deep/shallow copy problem anymore.
We do not need to return anything from the functions provided by Immer. It's get automatic reflected and retured by the function.

Installation

npm i immer

Simple Example with produce function of Immer

Managing simple list with produce function. It takes two argument, first one is initialState and second one is producer function where it recieves one argument draft a proxy of the initialState, which can mutated safely.

import {produce} from "immer"

const animeList= [
    {
        title: "One punch man",
        done: true
    },
    {
        title: "Hunter X Hunter",
        done: false
    }
]

// adding new item into the list
const nextState = produce(animeList, draftState => {
    draftState.push({title: "Hajime No Ippo"})
    draftState[1].done = true
})

console.log(nextState === animeList) // false
console.log(nextState[0] === animeList[0]) // true
console.log(nextState[1] === animeList[1]) // false

Using Immer in React

We can use just produce function in our React app for updating/modifying the states, but we have more powerful tool provided by Immer, and it is useImmer hook. useImmer is just as same implementation like useState and it's syntax is same as to it, behind the scene it creates proxy and manages everything for us.

Installing use-immer library

npm i use-immer

Below example is managing the animeList with immer. Where we are rendering the list, can add new item into the list, and can update the watch status of each item and rendering the whole state-tree in json.

import { useImmer } from 'use-immer';
import { useState } from 'react';

export default function AnimeList() {
  const [list, updateList] = useImmer([
    { id: 1, title: "One Punch Man", done: true },
    { id: 2, title: "Hunter X Hunter", done: false }
  ]);
  const [input, setInput] = useState('');

  const toggle = (id) => {
    updateList(draft => {
      const item = draft.find(a => a.id === id);
      if (item) item.done = !item.done;
    });
  };

  const add = () => {
    if (input.trim()) {
      updateList(draft => {
        draft.push({ id: Date.now(), title: input.trim(), done: false });
      });
      setInput('');
    }
  };

  return (
    <div className="max-w-md mx-auto mt-8 p-6 bg-white rounded shadow">
      <h1 className="text-xl font-bold mb-4">Anime List</h1>

      <div className="flex gap-2 mb-4">
        <input
          value={input}
          onChange={e => setInput(e.target.value)}
          onKeyPress={e => e.key === 'Enter' && add()}
          placeholder="Add anime..."
          className="flex-1 px-3 py-2 border rounded"
        />
        <button onClick={add} className="px-4 py-2 bg-blue-500 text-white rounded">
          Add
        </button>
      </div>

      <div className="space-y-2">
        {list.map(anime => (
          <div key={anime.id} className="flex items-center gap-2 p-2 border rounded">
            <input
              type="checkbox"
              checked={anime.done}
              onChange={() => toggle(anime.id)}
            />
            <span className={anime.done ? 'line-through text-gray-400' : ''}>
              {anime.title}
            </span>
          </div>
        ))}
      </div>
    </div>
  );
}

A brief comparison

// ❌ ❌ ❌ ❌ ❌  useState in nutshell
const [state, setState] = useState([])

setState((oldState) => {
  const clonedState = [...oldState]    // ❌ shallow cloning
  clonedState.push(someData)
  return clonedState   // ❌ returning cloned state
})


// ✅ ✅ ✅ ✅ ✅   useImmer
const [state, setState] = useImmer([])

setState((oldState) => {
  clonedState.push(someData)   //✅ just pushing new data
})

Tips to better utilize Immer

Do not use immer where your state is not nested object or it's just flat level or dealing with only primitive values.
Using too much Immer in application can make it very memory heavy, as proxies takes up extra space.
We can use produce function in our reducers to manage the state.
Do not use it if your build size is constraint.
We can also use immer for managing Map object states. (https://immerjs.github.io/immer/map-set)

If learned something by reading the blog, please do like and share. 😄

Creating your TOC for Dev.to post

Ashish Prajapati — Sun, 06 Jul 2025 17:39:30 +0000

Kevin Bravo

Mar 2 '22

How to create a table of content for a Dev.to post

#beginners #tutorial #javascript #bloging

Comments 10

5 min read

A guide to create custom hooks in React

Ashish Prajapati — Sun, 06 Jul 2025 17:24:18 +0000

First of all before creating any custom hook, we should understand what are hooks and why they are needed. So I would suggest reading my previous blog here link.

Table of content

Creating our first custom hook
Encapsulating reusable logic into Custom hook
Creating a real life custom hook
What we learned

Creating our first custom hook

To create our first custom hook, just create a simple javascript function with use prefix. It is case sensitive, so do write exactly as it is. For example just name it like useFetch or useTodo or maybe useDelete, whatever you can think of. Be clear of what name you are giving it and the name should represent what it's doing.

function useEvent(){
   useEffect(() => {
      console.log('effect')
   },[])
}

That's it!!

Encapsulating reusable logic into Custom hook

You can make best out of your custom hook by encapsulating the same logic that has been used across in your React application within custom hook. For example, it can be fetch logic for getting same data in your application or it can be logic for getting the current theme status(dark or light or something else).

Creating a real life custom hook

Below is the fetch hook example, which is very simple implementation of what an advanced level hook can handle. It handles these things internally:-
- Fetching data based on the given url prop on initial mount
- Handling the error and loading status while data fetching
- Returns the given data which we are using in App component

function useFetch(url: string){
    const [data, setData] = useState<any>(null)
    const [status, setStatus] = useState<"fetching"|"error"|"fetched">("fetching")


    useEffect(()=>{
        fetch(url)
            .then((res)=> res.json())
            .then((res)=> {
                setData(res)
                setStatus("fetched")
            })
            .catch(err=> setStatus("error"))
    },[])

    return {data, status}
}


function App(){
    const {data,status} =  useFetch("https://fakestoreapi.com/products")

    if(status == "fetching"){
        return (
            <div>loading...</div>
        )
    }

    if(status == "error" && !data){
        return (
            <div>error while fetching the data</div>
        )
    }

    return (
        <div>{JSON.stringify(data)}</div>
    )
}

What we learned

With hooks, you can take away your most of your boilterplate code or logic into the custom hooks and use those hooks in the application.

It helps you to write DRY code.
Simple and easy to create.
Encapsulate the common logic of the application

What are React Hooks?

Ashish Prajapati — Mon, 30 Jun 2025 17:33:10 +0000

TL;DR :- "Hooks are simple javascript functions which allows to add movement to our lifeless component. Here movement means state. It's like you hook into something and move that thing with hook handler"

Over the years React.js has evolved quit a lot. At a glance looking at all of the APIs in React, it's a lot to grok in:-

JSX
Hooks
Server components & Client components
Suspense
Memoization
cache api
transitions
Context
Higher Order Component/Component Composition
Concurrent Rendering (React Fibre) - UI updates are interruptable
and much more...

Those who has been doing React for years they know about how painful it was before even Functional component was a thing. Just look at below image and see the difference. 😱😱

From creating the Class components to adding and updating the states via this syntax within the component, it was just too much boilerplate to write and maintain for the developers. On top of it the UI rendering was synchronous(means UI updates were blocking).

Enough of the introduction, let's focus on the topic that we are here for.

Before Functional components, we were used to create states within our constructor function in Class component. And for modifying it, we needed to understand about this keyword.

And to solve all of the issues in existing eco-system of React, React Team from Meta(formerly know as Facebook) introduced the Functional component in v16.8 release and which was a banger. It took away all of the boiler-plate code and made our component much simpler to write and maintain.

Functional component release was a shift toward the new Paradigm for writing React. Now we did not have to use class, no this syntax anymore and we could use just simple javascript function and directly return our jsx as value. Pretty neet huh!!!

But wait there's a catch, Functional component can only recieve props and return jsx, no state, no UI update, no interaction in our application. Just static UI!!

Basically Functional components are stateless, they don't have any kind of state creation functionality within them.

So to make our component stateful or to add state within them, we have hooks!!!. Yes you read it right.

Basically Hooks are simple javascript functions which may return some values, which can be used within our Functional component and add make our component stateful.

So now we have understanding about hooks. Now let's learn about some rules which must be adhered when using them:-

Must use/call it within component. Can't be called outside the component.
Must start with use prefix. (for example - useEffect, useState).
Can not be used/called conditionally. We can not call them inside if-else clause.
Can not use/call any hook within React's inbuilt hooks.
Can use/call React inbuilt hooks/Custom hooks within our custom hooks.
Must not be async function. Only normal/arrow function as hook.

Here are the examples

Must use/call it within component. Can't be called outside the component.

// ❌ ❌ ❌ ❌ ❌   // called outside of the component
useEffect(() =>{
   console.log("effect")
},[])

function Component(){
   return (
      <div>jsx</div>
   )
}

Must start with use prefix. (for example - useEffect, useState).

// ❌ ❌ ❌ ❌ ❌ //calling with wrong prefix
function Component(){
   // ❌ wrong prefix - must be "use"
   UseEffect(() =>{
      console.log("effect")
   },[])
   return (
      <div>jsx</div>
   )
}

Can not be used/called conditionally. We can not call them inside if-else clause.

// ❌ ❌ ❌ ❌ ❌  // calling hook conditionally
function Component(){
   let a = 10
   // ❌ conditional call
   if(a == 0){
      useEffect(() =>{
         console.log("effect")
      },[])
   }
   return (
      <div>jsx</div>
   )
}

Can not use/call any hook within React's inbuilt hooks.

// ❌ ❌ ❌ ❌ ❌  // calling hook within inbuilt hook
function Component(){

   useEffect(() =>{
      useTimer()  // ❌ calling custom hook - illegal
      useState() //  ❌ calling inbuilt hook - illegal
   },[])
   return (
      <div>jsx</div>
   )
}

Can use/call React inbuilt hooks/Custom hooks within our custom hooks.

// ✅ ✅ ✅ ✅ ✅  // calling hook within inbuilt hook
function useClick(){
   // ✅ valid
   useEffect(()=>{
      const handler =()=>{}
      document.addEventListener("click",handler)
      return ()=>{
         document.removeEventListener("click",handler)
      }
   },[])

   // ✅ another custom hook of your
   useTimer()
}

Should not be async function. Only normal/arrow function as hook. Although async hook will work, but we should not do it.

// ❌❌❌❌
async function useClick(){
   return {name: "asis"}
}

function Component(){
   const res = useClick()

   return (
      <div>hook</div>
   )
}

That's it. A quick run down what we learned about hooks.

A javascript function which must start with use prefix.
Makes our Functional component stateful.
Easy to use and learn.
Reduces code boiler-plate.