DEV Community: Parth Bhovad

React Keys and Lists - Explained!

Parth Bhovad — Sun, 02 Aug 2026 16:16:41 +0000

Whenever you worked with rendering lists of DOM elements in React.js you have encountered this error. And most probably you solve this error in wrong way. Let me explain what's the correct approach!

import { useState } from 'react'

type USER = {
  id: number,
  name: string
}

const usersData: USER[] = [
  {
    id: 1,
    name: "user 1"
  },
  {
    id: 2,
    name: "user 2"
  },
  {
    id: 3,
    name: "user 3"
  },
  {
    id: 4,
    name: "user 4"
  },
  {
    id: 5,
    name: "user 5"
  }
]

function ShowUsersList() {
  const [users, setUsers] = useState(usersData);

  return (
    users.map((user) => (
      <div>
        {user.name}
      </div>
    ))
  )
}

export default ShowUsersList

This is the code you wrote and got this error. The problem with this code is you haven't provided key prop to lists of divs. React needs to identify each list item uniquely. To do so it requires unique key prop.

To solve this error most people, use a quick but wrong solution to hide this error by writing code like this:

function ShowUsersList() {
  const [users, setUsers] = useState(usersData);

  return (
    users.map((user, idx) => (
      <div key={idx}>
        {user.name}
      </div>
    ))
  )
}

export default ShowUsersList

But here's a catch, by doing these you will face performance issues. Especially when your list items can move (e.g. due to sorting), update, insert, or get deleted. A uniquely chosen key helps React understand exactly which item in the list get updated and make the correct updates in DOM tree more efficiently.

This also mentioned in the React's Official documentation:

Let's check practically what happens when you add item’s index in the array as its key.

In case you are deleting list items:

function ShowUsersList() {
  const [users, setUsers] = useState(usersData);

  const handleDelete = (id: number) => {
    const filteredItems = users.filter((user) => user.id !== id);
    setUsers(filteredItems);
  }

  return (
    users.map((user, idx) => (
      <div key={idx} onClick={() => handleDelete(user.id)}>
        {user.name}
      </div>
    ))
  )
}

When you click any of the list items and see the change in Developer's tool Elements tab, every list item's get highlighted. Which means by deleting 0th list items only, each and all list items get re-rendered.

But when you assign consistent IDs to key prop:

function ShowUsersList() {
  const [users, setUsers] = useState(usersData);

  const handleDelete = (id: number) => {
    const filteredItems = users.filter((user) => user.id !== id);
    setUsers(filteredItems);
  }

  return (
    users.map((user) => (
      <div key={user.id} onClick={() => handleDelete(user.id)}>
        {user.name}
      </div>
    ))
  )
}

Only the deleted item gets removed and nothing else get re-rendered by React.

This is happening because when you use item’s index in the array as its key, the key value for every item gets changed at run-time. And for React its completely different list of items. So, React re-renders everything.

The better way is to use unique ID which is consistent (e.g ID you will get from DB).

The correct code is:

import { useState } from 'react'

type USER = {
  id: number,
  name: string
}

const usersData: USER[] = [
  {
    id: 0, //ID from DB 
    name: "user 0"
  },
  {
    id: 1,
    name: "user 1"
  },
  {
    id: 2,
    name: "user 2"
  },
  {
    id: 3,
    name: "user 3"
  },
  {
    id: 4,
    name: "user 4"
  }
]

function ShowUsersList() {
  const [users, setUsers] = useState(usersData);

  return (
    users.map((user) => (
      <div key={user.id}>
        {user.name}
      </div>
    ))
  )
}

export default ShowUsersList

Note: Even if you didn't provide any key prop to lists of items, React will automatically use item’s index in the array as its key. Which is wrong method.

That's all about using Keys and Lists in React. I would recommend you refer React's Official Documentation to know more details about Keys in React.
You can access the source code for the code used in this explanation. You check everything on your own and really grasp this concept of React because this is really the core fundamentals of React.

How to generate dynamic sitemap in NextJS?

Parth Bhovad — Fri, 24 Jul 2026 06:41:55 +0000

Earlier I used to manage sitemap manually in NextJS. And I end up forgetting to update the sitemap whenever I add/remove any pages from my website. But now I don't have to remember updating the sitemap. I write dynamic sitemap code once and no need to look at it afterwards.

Here's how you can do it:

There are 2 types of routes you have to add in NextJS sitemap.

Public routes paths
Dynamic routes paths

Both routes should be kept in NextJS route groups. This is not a rule. We are doing this because we are going to traverse your NextJS code directory to find all the pages you want to add in sitemap. So, the traverser will be easier if you keep all the public pages in one route groups. There are 2 benefits of using this approach. Firstly, it will be better for your project folder structure. All the public pages will be inside one directory only. Also, it will make the traversal logic easier to implement.

Divide private and public pages using NextJS route groups. Once you have your folder structure like the above image, use the following function to which returns array of paths of all public routes.

import fs from "fs";
import path from "path";

export function findPublicPagesPath() {
    const appDir = path.join(process.cwd(), "src", "app", "(public)"); //keep all of your pages you want to add in sitemap inside this directory
    const routes: string[] = [];

    function traverse(currentDir: string) {
        const entries = fs.readdirSync(currentDir, {
            withFileTypes: true,
        });

        for (const entry of entries) {
            const fullPath = path.join(currentDir, entry.name);

            if (entry.isDirectory()) {
                traverse(fullPath);
                continue;
            }

            if (entry.isFile() && entry.name === "page.tsx") {
                const relativePath = path.relative(appDir, fullPath);

                let route = relativePath
                    .replace(/\\/g, "/")
                    .replace(/\/page\.tsx$/, "")
                    .replace(/^page\.tsx$/, "");

                // remove route groups: (marketing), (auth), etc.
                route = route
                    .split("/")
                    .filter(segment => !/^\(.*\)$/.test(segment))
                    .join("/");

                // Exclude [id] dynamic routes
                if (route.includes("[") || route.includes("]")) {
                    continue;
                }

                routes.push(route ? `/${route}` : "/");
            }
        }
    }

    traverse(appDir);

    return routes;
}

Example output from this function:

[ '/about', '/contact', '/' ]

For dynamic routes you have to fetch all of the slugs/IDs from your DB and pass it to sitemap.

const posts: Post[] = await fetch(
        "https://jsonplaceholder.typicode.com/posts"
).then(res => res.json());

For the sake of simplicity, we are using dummy API to fetch all the dynamic routes slugs/IDs. The response from this API will look like this:

[
  {
    "userId": 1,
    "id": 1,
    "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
    "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
  },
  {
    "userId": 1,
    "id": 2,
    "title": "qui est esse",
    "body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
  },
  {
    "userId": 1,
    "id": 3,
    "title": "ea molestias quasi exercitationem repellat qui ipsa sit aut",
    "body": "et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut"
  },
  {
    "userId": 1,
    "id": 4,
    "title": "eum et est occaecati",
    "body": "ullam et saepe reiciendis voluptatem adipisci\nsit amet autem assumenda provident rerum culpa\nquis hic commodi nesciunt rem tenetur doloremque ipsam iure\nquis sunt voluptatem rerum illo velit"
  },
...
]

Once you have this 2 of arrays of routes you can use this code of dynamic sitemap:

import type { MetadataRoute } from 'next'
import { findPublicPagesPath } from './findPublicPagesPath';

type Post = {
    id: number;
};

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {

    // src/app/(public) public routes
    const paths = findPublicPagesPath();

    const publicPagePaths: MetadataRoute.Sitemap = paths.map((path: string) => ({
        url: `https://acme.com${path}`,
        lastModified: new Date()
    }))

    // src/app/blog/[id] dynamic routes
    const posts: Post[] = await fetch(
        "https://jsonplaceholder.typicode.com/posts"
    ).then(res => res.json());

    const dynamicRoutes: MetadataRoute.Sitemap = posts.map((post: { id: number }) => ({
        url: `https://acme.com/blog/${post.id}`,
        lastModified: new Date(),
    }));

    return [
        ...publicPagePaths,
        ...dynamicRoutes
    ]
}

This sitemap code will give you following output:

One thing to note is sitemap.js is a special Route Handler that is cached by default. So, you need to configure your caching according to it.

How you will implement caching depends upon whether you are using Caching and Revalidating (Previous Model) or Cache Components. Feel free to refer these docs and add caching as per your use cases.

Along with simply listing URLs in sitemap items, you can give additional metadata information like when was the page last modified, priority of page, changeFrequency and more. Here's a complete type definition for a sitemap item:

type Sitemap = Array<{
  url: string
  lastModified?: string | Date
  changeFrequency?:
    | 'always'
    | 'hourly'
    | 'daily'
    | 'weekly'
    | 'monthly'
    | 'yearly'
    | 'never'
  priority?: number
  alternates?: {
    languages?: Languages<string>
  }
}>

That's all what you have to do in a nutshell!

here's the source code

I tried using a colorful gradient background for screenshots in my posts. And here's why everyone should use it (hint: it increases the reach of posts)

Parth Bhovad — Sat, 02 May 2026 17:03:51 +0000

Firstly, I saw big creators use gradient background in their post's screenshots. I didn't understand why they were doing this.

Later I read somewhere that gradient colours are easy to capture attention and that's why creators were using it.

So, I also started doing the same. And it Also increased engagement rates, likes and impressions on my posts. And I recommend you all do the same.

Initially,

I was using Canva to create gradient background screenshots. But it was very time consuming to do it every time from Canva.

That's why I started searching for tools for this specific use only.

But all the tools I found have too many features, bad UIUX, and a watermark.

At the end, I built my own as per my needs. A minimalist screenshot beautifying tool which only has padding and radius adjustment options with some beautiful gradient background and images. You can add your custom background image too.

To conclude: I would say use any tool/method you want to create eye catching screenshots. You can use my tool or any other you find useful for yourself. But do it. It increases output you will get from your posts by just putting minimal extra effort.

Here you will find the tool BeautifulScreenshots you should give a try to it and then use what you will find good for yourself. But start using a gradient background. You will thank me later.

Indian rupee is getting weak. Is it good for developers?

Parth Bhovad — Sat, 21 Mar 2026 17:52:31 +0000

For a few days I've been hearing a lot about Indian currency vs Dollar. Some people say it is bad, some say it is good. But most of them are not giving genuine reasons for their claims.
In the context of Developers I think it is good news. Because a lot of developers I know are earning in dollars. So, by the end of the month they will earn the same dollar, but more in rupees.
I don't know how it will affect those who are in an Indian based company. I would like to dive more deep into this topic.
This is debatable.

I'm Trying No AI Assisted Coding...

Parth Bhovad — Sun, 15 Mar 2026 17:43:40 +0000

First of all, I started GitHub Copilot when I got enough confidence on my logic building. And it was a right decision. Autocompletions helping me to get my work done fast.

There is no problem in it. At all! Autocompletions helping me to focus on bigger problems and delegating small, repetitive logic to copilot.

But here's a catch. After few months of using this Autocompletions I forgot the syntax completely. There is no problem in not knowing the syntax (I was thinking this).

But when I started applying for Internships, in almost all interviews their basic requirements is knowing syntax. Interviewers give you a small task, and you have to write the code in normal online compiler. No autocompletions.

And in these situations, my mind gets blank. Since I'm not used to knowing how to write an Array.filter(), Array.reduce(). I know the working of them, but writing without autocompletions is something I can't be able to do.

I can build any application end to end. But with autocompletions handling easy, syntax heavy, repetitive tasks.

And the interviewer won't believe. Gives a bad impression. Like I can't even solve a basic problem just because I don't know the syntax.

So, I started spending some of time without using Autocompletions. And my muscle memory is coming back now.