DEV Community: Nadeem Khan

How KEY plays a vital role in React ?

Nadeem Khan — Sat, 08 Jun 2024 21:14:51 +0000

In this blog, we will cover:

Why is a Key Needed in React?
Why Avoid Using the Index as a Key?
How Using Index as Key Creates Problems?

Consider this example where we have a list of product categories like Beauty, Fragrances, Furniture, etc. When a category is selected, we display the product details of that category using data from the dummyjson.

Code:

// src/app/page.tsx

import CategoryContainer from "@/components/home-container";
import "../styles/global.css";

export default async function Home() {
  const response = await fetch("https://dummyjson.com/products/category-list");
  const data: string[] = await response.json();
  return (
    <>
      <CategoryContainer data={data} />
    </>
  );
}

// CategoryContainer.tsx

"use client";

import Image from "next/image";
import React, { FC, useEffect, useState } from "react";
import ProductResponse from "./from-type-folder-lets-assume";

type Props = {
  data: string[];
};


const CategoryContainer: FC<Props> = ({ data }) => {
  const [selectedCategory, setSelectedCategory] = useState("");
  const [productDetails, setProductDetails] = useState<ProductResponse | null>(
    null
  );

  useEffect(() => {
    (async () => {
      const response = await fetch(
        "https://dummyjson.com/products/category/" + selectedCategory
      );
      const data: ProductResponse = await response.json();
      setProductDetails(data);
    })();
  }, [selectedCategory]);

  return (
    <div className="max-w-6xl mx-auto my-10">
      {data?.map((item, index) => {
        return (
          <button
            key={index}
            type="button"
            onClick={() => setSelectedCategory(item)}
            className={`text-gray-900 border border-gray-300 font-medium rounded-full text-sm px-5 py-2.5 me-2 mb-2 uppercase ${
              item === selectedCategory ? "bg-gray-600 text-white" : "bg-white"
            }`}
          >
            {item}
          </button>
        );
      })}
      <h1 className="my-5 italic">
        {selectedCategory ? (
          <>
            Product Details of{" "}
            <span className="font-bold uppercase">{selectedCategory}</span>
          </>
        ) : (
          "Please select a category from above"
        )}
      </h1>

      <div className="grid grid-cols-3 gap-3">
        {productDetails?.products?.map((product, index) => {
          return (
            <div
              key={index}
              className="max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700"
            >
              <div>
                <h2>{product.title}</h2>
                <p>{product.description}</p>
                <Image
                  key={index}
                  width={100}
                  height={100}
                  className="w-full h-full"
                  src={product.images?.[0]}
                  alt={product.title}
                />
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default CategoryContainer;

In the CategoryContainer, we loop through two lists: one for categories and another for product details of the selected category. Initially, we used the index as the key for both loops. This caused issues where images were not updating correctly when switching categories, as shown in this visual

Debugging the Problem
When switching categories, the content updated immediately, but the images took some time to load. This suggested that React wasn't re-rendering the components correctly.

By examining the code, we noticed that using the index as the key prevented React from recognizing that new components needed to be rendered. React was reusing components with old images, leading to the delay

Solution
We needed to provide a unique key for each product. Fortunately, the API response included a unique id for each product:

Using product.id as the key resolved the issue, ensuring React correctly identified and rendered new components:

Conclusion
In React, always use a unique identifier for keys instead of the index. This ensures efficient and correct re-rendering of components, preventing issues like delayed image updates or incorrect component states.

Creating a Reusable Component in React: Handling Unlimited Future Changes

Nadeem Khan — Sat, 01 Jun 2024 18:39:33 +0000

Hi Folks,

When working with React, creating reusable components is essential for maintaining clean, manageable, and scalable code. One common component that frequently needs to be adaptable and flexible. In this blog post, we’ll explore how to build a reusable component that can handle various configurations and adapt to future changes without becoming overly complex.

Variants of Headers
Let's consider a header component that may need to support different variants. Below is an example of different header styles:

Basic Header Component
A typical React header component might look something like this, where props are used to conditionally render elements like the logo, navigation items, search bar, and cart.

Using props, a developer might set up the header as follows:

Usage:

Handling Future Changes
Now, let's consider a scenario where the requirements change. The header needs to include additional elements like a favorites section, user account details, and a top banner with image and text that can be shown or hidden. If we continue using the prop-based approach, the component might look like this:

As you can see, this approach quickly becomes unwieldy with 10-15 props. Managing such a prop-heavy component can lead to cumbersome and error-prone code.

Using Compound Components
To address this issue, we can use the compound component pattern. This approach allows for more flexible and readable code by enabling the parent component to define the structure and the children to specify the content.

Here's an example of how we can refactor our header component using compound components:

Header.js

Usage

Benefits of Compound Components

Flexibility: Compound components provide greater flexibility as they allow you to nest components and pass props directly to the specific parts of the header.

Readability: The structure is more readable and maintains a clear hierarchy.

Scalability: Adding new components or modifying existing ones becomes easier without making the parent component too complex.

Reusability: Each part of the header can be reused independently in different contexts or layouts.

By using the compound component pattern, we ensure that our header component remains manageable and adaptable to future changes, providing a robust solution for complex UI requirements.

Detect Scroll Direction ReactJS

Nadeem Khan — Sun, 07 Nov 2021 04:58:39 +0000

In these blog. I am detecting scroll direction either person id scrolling down or up. To use these concept you can make some better thing like Navbar. Render a Navbar when we scroll untill that it gets disappear. So I am explaining here only about scroll direction If you want the example then please let me know.



import React, {useEffect, useState, useCallback} from 'react';

import { Fragment } from 'react/cjs/react.production.min';

import styles from "./App.module.css";

const App = () => {

  const [y,

    setY] = useState(document.scrollingElement.scrollHeight);

  const [scrollDirection,

    setScrollDirection] = useState("you have not scrolled yet");

const handleNavigation = useCallback((e) => {

if (y &gt; window.scrollY) {
  setScrollDirection("Scrolling Up");
  console.log("scrolling up");
} else if (y &lt; window.scrollY) {
  setScrollDirection("Scrolling Down");
  console.log("scrolling down");
}
setY(window.scrollY)



}, [y]);

useEffect(() => {

window.addEventListener("scroll", handleNavigation);

return () =&gt; {
  window.removeEventListener("scroll", handleNavigation);
};



}, [handleNavigation]);

return (

    <Fragment>

    <div className={styles.main_container}>

&lt;/div&gt;
  &lt;div&gt;{scrollDirection}&lt;/div&gt;
&lt;/Fragment&gt;



)

}

export default App

OutPut Result

React Local Time Theme Based Quote Generator.

Nadeem Khan — Thu, 04 Nov 2021 13:39:24 +0000

Steps

Create react project.
Static code of html and css.
Adding API for random quote.
Adding API for Theme Selection and some JS.
Result and Live Demo.

Step 1

Create react project using following command:

Note: Make sure the npm is installed.

npx create-react-project theme-based-quote-generator

Step 2

Folder Structure

Step 3 & 4

main.js

import React, {useEffect, useState} from 'react';
import styles from "./main.module.scss";
import {getCall} from "../../api/getCall";

const TOKEN = process.env.REACT_APP_TOKEN
const Main = () => {
  const [quote,
    setQuote] = useState("Loading...")
  const [theme,
    setTheme] = useState();
  useEffect(() => {
    getCall({path: "https://timezoneapi.io/api/ip/?token=" + TOKEN}).then((result) => {
      var s = new Date().toLocaleString(undefined, {timeZone: result.data.data.timezone.id});
      const hours = s
        .split(", ")[1]
        .split(":")[0];
        if(hours >= 20 && hours<=5 ){
            setTheme(false)
        }else{
            setTheme(true)
        }

    }).catch((error) => {
      console.log(error)
    });
    getCall({path: "https://api.quotable.io/random"}).then((item) => setQuote(item.data.content)).catch((error) => {
      console.log(error)
    })
  }, [])

  const handleClick = () => {
    setQuote("Loading...")
    getCall({path: "https://api.quotable.io/random"}).then((item) => setQuote(item.data.content)).catch((error) => {
      console.log(error)
    })
  }
  if(!theme){
      return(null)
  }else{
  return (
    <section
      className={[
      styles.main,
      (theme
        ? styles.day_mode
        : styles.night_mode)
    ].join(' ')}>
        <div>
        <h1
        className={[
        styles.main_title,
        (theme
          ? styles.day_mode_title
          : styles.night_mode_title)
      ].join(" ")}>Quote Generator</h1>
      <span>Theme is decided as per the local time.<br/> Theme is {theme ? "day theme" : "night theme"} supports all country</span>
        </div>
      <div
        className={[
        styles.quote_generator,
        (theme
          ? styles.night_mode
          : styles.day_mode)
      ].join(" ")}>
        {quote}
      </div>
      <button
        className={[
        styles.button,
        (theme
          ? styles.night_mode
          : styles.day_mode)
      ].join(' ')}
        onClick={handleClick}>Generate Quote</button>
    </section>
  )
}
}

export default Main

main.module.scss

.main{
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    &_title{
        font-size: 2.5em;
        text-align: center;
    }
    .quote_generator{
        min-height:300px;
        width: 70%;
        margin: 0 auto;
        border-radius: 16px;
        padding: 20px;
        font-size: 2em;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        @media screen and (max-width:768px){
            width: 100%;
            padding: 20px;
        }
        @media screen and (max-width:556px){
            padding: 10px;
        }
    }
    span{
        color: red;
        font-style: italic;
        font-weight: 100;
        font-size: 0.8em;
        display: block;
        text-align: center;
    }
    .button{
        height: 50px;
        border: none;
        padding: 10px;
        border-radius: 0.5em;
        font-size: 1em;
        cursor: pointer;
    }
}

.day_mode{
    background-color: rgb(235, 235, 235);
    color: #173f5f;
}

.night_mode{
    color: rgb(235, 235, 235);
    background-color: #173f5f;
}

.day_mode_title{
    color: #173f5f;
}

.night_mode_title{
    color: rgb(235, 235, 235);
}

getCall.js

import axios from "axios"

export const getCall = async({path}) => {
  return axios
    .get(`${path}`)
}

Step 5

LIVE DEMO

Live Demo Click here

Any Questions Please let me know.