DEV Community: Pavan C

Solving Fragmented Travel Planning with KendoReact Components

Pavan C — Mon, 22 Sep 2025 12:00:00 +0000

This is a submission for the KendoReact Free Components Challenge.

What I Built

I built a comprehensive Travel Planner application that integrates real-time travel data from Amadeus APIs with KendoReact components to create an intuitive trip planning experience. The app solves the problem of fragmented travel planning by bringing together hotels, flights, activities, and budget visualization in one seamless interface.

Key features include:

Smart Trip Planning: Select destinations, dates, and traveler count with real-time validation

Live Data Integration: Real hotel, flight, and activity data via Amadeus Travel APIs

Interactive Scheduling: Drag-and-drop itinerary management with weekly calendar view

Dynamic Budget Visualization: Pie chart showing cost breakdowns that update based on API data

Hotel Comparison: Sortable grid with booking functionality and real pricing

Optional Flight Integration: Toggle-based flight search with pricing and scheduling

Demo

🚀 Live: Travel Planner
📁 GitHub

Screenshot

KendoReact Components Used

I utilized 10 KendoReact components to maximize the free tier offering:

Scheduler - Interactive weekly calendar for drag-and-drop itinerary planning
Grid - Data tables for hotels and flights with sorting/filtering capabilities
Chart - Pie chart for dynamic budget breakdown visualization
DropDownList - City selection dropdown with predefined destinations
DatePicker - Start and end date selection with validation (2 instances)
Dialog - Modal popup for booking confirmations and details
PanelBar - Expandable activity overview panel with collapsible sections
Button - Primary action buttons with custom styling and loading states
NumericTextBox - Traveler count input with min/max validation (1-10)
Switch - Toggle control for including flights in search results

How I Built a Storytelling App That Turns Drawings into Tales with Gemini 2.5 Flash

Pavan C — Thu, 11 Sep 2025 15:00:00 +0000

This is a submission for the Google AI Studio Multimodal Challenge

What I Built

I created DoodleTales - a magical storytelling app that transforms children's drawings into interactive stories. Kids can upload any drawing, photo, or artwork, and my app uses Gemini 2.5 Flash to analyze the image and generate personalized 4-page stories with cliffhangers.

The problem I solved is making storytelling more engaging and personalized for children. Instead of generic stories, kids get tales featuring the exact characters and objects from their own drawings. It encourages creativity and makes reading more exciting with interactive "What happens next?" prompts where kids can add their own ideas to continue the story.

Demo

🚀 Live
💻 GitHub

Upload interface with drawing

Generated story pages

"What happens next?" continuation feature

Story management sidebar

How I Used Google AI Studio

I leveraged Google AI Studio to integrate Gemini 2.5 Flash's multimodal capabilities into my Next.js application. The AI Studio made it incredibly easy to:

Test different prompts for image analysis and story generation
Fine-tune the character extraction from drawings
Optimize story structure for kid-friendly content
Debug API responses and improve error handling

The studio's interface helped me experiment with prompt engineering to get the perfect balance of creativity and age-appropriate content.

Multimodal Features

My app uses Gemini 2.5 Flash's image understanding as its core feature:

Visual Analysis: The AI examines uploaded drawings and identifies characters, objects, and themes

Character Extraction: Converts visual elements into story protagonists with child-friendly descriptions

Story Generation: Creates personalized narratives based on what it "sees" in the image

Interactive Continuation: Generates new story content when kids add their own ideas

This multimodal approach transforms static drawings into dynamic, personalized storytelling experiences. Kids feel more connected to stories featuring their own artwork, making reading more engaging and encouraging artistic expression.

NPM Scripts You Didn’t Know You Could Write

Pavan C — Sun, 10 Aug 2025 14:00:00 +0000

After working with JavaScript, you probably know how to run your app and test it using npm scripts. But npm scripts are more than simple command aliases. They’re a surprisingly powerful automation layer baked right into your project.

If you haven’t explored beyond the basics, you’re missing out on ways to simplify complex workflows without adding bulky tooling.

Here are some npm scripting patterns and techniques that can seriously level up your developer experience.

1. Use npm scripts to orchestrate complex workflows

Instead of running multiple commands manually, chain and orchestrate them cleanly with npm scripts:

"scripts": {
  "lint": "eslint .",
  "test": "jest",
  "build": "webpack --mode production",
  "ci": "npm run lint && npm run test && npm run build"
}

Now npm run ci runs your full pipeline in a predictable sequence.

2. Run scripts in parallel without external tools

Parallel execution is often useful (e.g., starting dev servers and watchers simultaneously). Instead of pulling in dependencies, use npm-run-all:

npm install --save-dev npm-run-all

Then in your scripts:

"scripts": {
  "start:api": "node api.js",
  "start:web": "webpack-dev-server",
  "start": "npm-run-all --parallel start:api start:web"
}

This keeps your workflow lightning fast.

3. Accept and forward CLI arguments dynamically

Pass arguments through npm scripts cleanly using --:

"scripts": {
  "build": "webpack"
}

Run with:

npm run build -- --watch --env production

webpack receives --watch --env production transparently, no changes needed in the script.

4. Define environment variables inline, cross-platform

Environment variables are tricky across Windows and Unix. Use cross-env for smooth cross-platform scripts:

npm install --save-dev cross-env

"scripts": {
  "serve": "cross-env NODE_ENV=production node server.js"
}

This avoids the headache of platform-specific env setting.

5. Leverage shell features in scripts

Npm scripts run in your shell, so you can:

Use globbing, conditionals, and loops:

"scripts": {
  "clean": "rm -rf dist/*.js",
  "prepublish": "if [ -d dist ]; then echo 'Ready to publish'; else echo 'Build missing'; fi"
}

Windows users can use powershell or Node.js scripts for complex logic.

6. Create script aliases for complex or repetitive tasks

Simplify your commands and improve discoverability by adding aliases:

"scripts": {
  "ci": "npm run lint && npm run test && npm run build",
  "start-dev": "webpack serve --mode development --open"
}

Aliases reduce cognitive overhead and speed up onboarding.

7. Debug node scripts via npm scripts

Pass flags to node directly inside npm scripts:

"scripts": {
  "debug": "node --inspect-brk index.js"
}

Now run npm run debug and attach your debugger immediately.

What this really means

Npm scripts aren’t just trivial shortcuts — they’re a robust, flexible automation layer that can replace heavier tools for many tasks. Using them strategically saves time, reduces complexity, and improves team workflows.

Happy Coding!

SEO for React Developers: What They Don’t Tell You

Pavan C — Sun, 10 Aug 2025 03:01:43 +0000

React is awesome for building fast, interactive UIs. But when it comes to SEO, it’s not always smooth sailing. Most guides will tell you to use server-side rendering or static generation. That’s true, but here’s the thing: SEO with React has some sneaky pitfalls that don’t get talked about enough.

Let’s break down what they don’t tell you, and how you can avoid getting tripped up.

1. Google is smarter, but not perfect

Googlebot can crawl and index JavaScript now, but relying on that is risky. It’s slower, less predictable, and sometimes it simply won’t wait for your app’s content to load before indexing.

Here’s a quick example:

Imagine your React app serves this HTML initially:

<body>
  <div id="root"></div>
  <script src="bundle.js"></script>
</body>

That <div id="root"></div> is empty until React runs in the browser and fills it in.

Googlebot can run JavaScript and see your content eventually, but it might delay indexing or miss content if scripts fail or take too long.

If instead you use server-side rendering or static generation, your server sends fully rendered HTML, like:

<body>
  <div id="root">
    <h1>Welcome to My React Site</h1>
    <p>Content visible right away.</p>
  </div>
  <script src="bundle.js"></script>
</body>

This guarantees crawlers see your content immediately.

What this really means: Don’t rely only on client-side rendering for SEO-critical pages. Pre-rendering your content helps make sure Google and other search engines get the full picture.

2. Meta tags need to be handled properly

Dynamic meta tags inside React won’t update in the server response unless you use tools like React Helmet or better yet, handle meta tags during server rendering.

Without server-rendered meta tags, search engines might only see the default or empty tags.

3. Route-based SEO isn’t automatic

React Router or other SPA routers update the URL, but search engines don’t always understand client-side routing changes. If you don’t have server support for those routes, crawlers get 404s.

Solution: Use server-side rendering (Next.js, Remix) or pre-rendering for critical routes.

4. Sitemap and robots.txt are still your friends

React doesn’t auto-generate sitemap or robots.txt files. You have to handle these separately on the server or through build scripts.

Search engines rely on these to discover and crawl your site efficiently.

5. Performance impacts SEO more than you think

Page speed, time to interactive, and cumulative layout shift (CLS) matter a lot. React apps can easily bloat if you’re not careful with bundle size, lazy loading, and code splitting.

Pro tip: Use tools like Lighthouse and WebPageTest to identify bottlenecks.
to identify bottlenecks.

Bottom line

SEO in React isn’t just about rendering content — it’s about thinking through how your app delivers content to search engines, and how it performs for users.

If you want your React app to get found, start with server-side rendering or static generation, manage meta tags properly, and don’t forget the basics like sitemaps and performance.

Happy coding!

ReceiptSense - AI-Powered Grocery Receipt Analyzer

Pavan C — Mon, 04 Aug 2025 04:10:16 +0000

This is a submission for the Redis AI Challenge: Real-Time AI Innovators.

What I Built

ReceiptSense, an AI-powered receipt analyzer that helps people track spending, catch overpayments, and discover better grocery deals.**

It started as a simple idea: what if your grocery receipt could talk back? What if it could tell you where you overpaid, where you could’ve saved, and even how prices are trending over time?

So I built just that.

Users snap a photo of their receipt → OCR kicks in → Redis Stack handles the rest: semantic search, trends, insights, alerts. All in real time.

Whether it’s finding that you overpaid for almond milk or discovering Store A consistently beats Store B on certain items, ReceiptSense makes price awareness effortless.

Demo

GitHub Source: receiptsense
🚀 Try it live: receiptsense.vercel.app

Screenshots:

1. Upload Interface

Drag-and-drop support. OCR kicks in immediately.

2. Price Comparison

Semantic search: type milk, get back whole milk, almond milk, and trend data.

3. Smart Recommendations

Green = good deal. Red = overpriced. Simple.

4. Receipt History

Track all past uploads, sorted by latest.

How I Used Redis 8

🔍 Vector Search + Semantic AI

I used vector embeddings to match similar items—even when the names don’t exactly match.

// Store vectorized items for search
await client.json.set(itemKey, '$', {
  name: item.name,
  price: item.price,
  name_vector: embedding
});

// Query similar items
await client.ft.search('item_idx', '*=>[KNN 10 @vector $vec]', {
  PARAMS: { vec: vectorBuffer }
});

Example:

Searching for “milk” brings up “whole milk”, “almond milk”, “oatmilk” — even if those terms weren’t used exactly.

📈 TimeSeries for Trend Analysis

I log prices over time and use Redis TimeSeries to generate insights.

await client.ts.add(`price:${itemName}`, Date.now(), price);
await client.ts.range(key, fromTime, '+', {
  AGGREGATION: { type: 'avg', timeBucket: 86400000 }
});

Insight Examples:

“Price increased 8.2% in the last 24 hours”
“Lowest price last week: $2.89 at Kroger”

🔄 Real-Time Streams

Every receipt upload and price event goes through Redis Streams.

await client.xAdd('receipt-stream', '*', {
  event: 'receipt_uploaded',
  storeName,
  totalAmount: totalAmount.toString()
});

That gives me a pipeline for triggering notifications, trend updates, or analytics dashboards in real time.

🧩 Multi-Model Redis Setup

Here’s how I structured the data:

JSON Documents: Items + metadata + vector embeddings
Hashes: Store receipt summaries and relationships
Sets: Tagging and category matching
Full-text Search + Vectors: Combined for smarter matching

AI-Driven Insights Generated

Insight Type	Example
💰 Best Deal	“Walmart: $2.99 (25% below avg)”
⚠️ Overpaid Alert	“You paid $4.99, avg is $4.05 (+23.5%)”
🏪 Store Rankings	“Target saves you $1.50 vs Kroger (last 5 receipts)”
📈 Price Trends	“Almond milk up 8.2% this week”
🕒 Time Insights	“Avg daily range: $2.99 - $5.49 (mean $4.12)”

Tech Stack

Frontend: Next.js 15 + Tailwind CSS
OCR: Tesseract.js (runs client-side)
Backend/DB: Redis Stack (JSON, Vectors, Streams, TimeSeries)

Why This Matters

Receipts are boring. But they hold valuable info.

With Redis Stack, I turned static pieces of paper into a live system that watches your grocery spending, helps you shop smarter, and shows you pricing trends most people never see.

That’s the real power of AI + real-time data.

If this idea sparks something for you or you'd like to collaborate—hit me up. Thanks for reading!

Feature flag experiment using DevCycle SDK

Pavan C — Sun, 22 Dec 2024 22:29:08 +0000

This is a submission for the DevCycle Feature Flag Challenge: Feature Flag Funhouse

What I Built

Leveraged release feature type from DevCycle SDK. I built a web app using React which lists all the products for sale, giving additional percentage off on each product for a limited period that runs behind a feature flag.
DevCycle

App
If I set the value for variation on true, we would be able to see the 10% off coupon text with the checkbox. On the other hand, if I make it false, the UI makes a live call automatically to DevCycle SDK and do a real time update hiding the coupon feature on the UI without having to refresh my page.

Demo

Deployed the application with the help of AWS Amplify. You can explore the live feature of the app [here].
🚀 App: https://master.dp8273qwzs6pw.amplifyapp.com/products

My Code

💻 Source code: https://github.com/chilupa/cartmate

My DevCycle Experience

It was great exploring the release feature on DevCycle. Documentation was seamless, helped me in finding the right tool for my use case. I have worked with other tools like LaunchDarkly, Optimizely but this tool is different and unique in its own way. I would highly recommend it.

Dev Blog with Azure Functions

Pavan C — Sun, 06 Mar 2022 08:15:25 +0000

Overview of My Submission

I created a Developer's blog, in-short Dev Blog using Azure functions where GraphQL APIs are hosted and deployed. Used Azure Static Web App service for deploying the front-end part of the application. With this app, users can create, view, and delete the posts.

My submission will have two repositories namely dev-blog-azure-ui for front-end code and dev-blog-azure-functions for back-end code.

Play with the app here 🚀
UI - https://brave-hill-0c5adaa10.1.azurestaticapps.net
GraphQL playground - https://posts-graphql.azurewebsites.net/api/posts

Submission Category:

Computing Captains

Link to Code on GitHub

Front-end

chilupa / dev-blog-azure-ui

Dev Blog UI with GraphQL APIs. Uses Azure functions.

Dev Blog

This application is built using React and GraphQL. It uses azure-functions in the backend where the GraphQL APIs are hosted.

Development 💻

To run the app locally

npm run start

Depolyment 🚀

This application is hosted using Azure's Static Web App.

Watch it live here - https://brave-hill-0c5adaa10.1.azurestaticapps.net

View on GitHub

Back-end

chilupa / dev-blog-azure-functions

GraphQL server

Posts Server using Azure functions

This application uses Azure functions to implement GraphQL APIs.

GraphQL playground

https://posts-graphql.azurewebsites.net/api/posts

This application is deployed using azure-functions VS code extension.

Queries

Some of the useful GraphQL queries that have been consumed by the dev-blog UI.

Get all the posts

query GetPosts {
  getPosts {
    id
    title
    description
    author
    createdAt
  }
}

Get a single post

query GetSinglePost{
  getPost(id:"2aa0b36f-c0d6-431e-87cf-e110684d0341"){
     id
    title
    description
    author
    createdAt
  }
}

Create a post

mutation CreatePost {
  createPost(
    input: {
      title: "React"
      description: "JS Library"
      createdAt: "Feb 17, 2022"
      author: "John Snow"
    }
  ) {
    id
    title
    description
    createdAt
    author
  }
}

Delete a post

mutation DeletePost {
  deletePost(id:"6f009c53-749e-45a5-a15e-73e0dbf84e35"){
    title
  }
}

View on GitHub

Additional Resources / Info

Screenshots

Home page

Dashboard view

Create post

View and delete post

Movie catalog with MongoDB Atlas

Pavan C — Thu, 13 Jan 2022 14:11:03 +0000

Overview of My Submission

This project is a movie catalog application. It lists all the movies with release date, plot and rating from IMDB and Tomatoes. The data is hosted in MongoDB Atlas.

Submission Category:

E-Commerce Creation

Link to Code

Frontend code

chilupa / movies-ui

Movie catalog which uses MongoDB Atlas Search.

Movies

Search movies by movie title.

This app uses MongoDB Atlas where the movies data is hosted and APIs were developed using Express.

Tech stack

React
MongoDB Atlas
Express

Application

Desktop view

Mobile view

Live view

View on GitHub

Backend code

chilupa / movies-server

Backend server for movies app, configured using Express and MongoDB

Movies server

View on GitHub

Additional Resources / Info

Live

Github Actions for Dev Landing Page

Pavan C — Sun, 05 Dec 2021 01:30:49 +0000

My Workflow

Pushing the code to higher environment is a crucial step in the software development process. We have to make sure that all the code is clean and thoroughly tested.

Integrating Github actions was a piece of cake and I have automated running lint and tests on the application when new pull requests are created. This helps in checking for any lint errors in the code or if any test case is failing. If both the checks are done successfully, then only the code can promoted to master branch.

Submission Category:

Maintainer Must-Haves

Yaml File or Link to Code

The Yaml file and code to my workflow can be found in the below repo in .github/workflows folder.

chilupa / dev-landing-page

Introductory page for developers

Dev Landing Page

A minimal introductory page for developers. Feel free to make yours!

Deployment 🚀

This application has been deployed using AWS Amplify.

https://master.d1mxeizd5j5ul.amplifyapp.com

Workflow 🔧

Github workflow is setup for this project which runs lint and test cases on opening a pull request.

Application

Keeping responsiveness in mind, I have developed this app which can fit in all the devices - PCs to mobile devices.

Desktop view	Mobile view

Development 👨‍💻

To run the application in development mode

npm run start

Tests ⚙️

React testing library is being used for unit testing React components.

Scripts 🧰

ESLint and prettier are configured in this project.

To run lint

npm run lint

To format the code

npm run format

View on GitHub

useBreakpoint - React Hook

Pavan C — Tue, 15 Jun 2021 22:11:17 +0000

I have come across a use case where I had to display content based on the device width. I was using Material-UI's Grid component which added responsiveness to my web application. However, there are few things I did not want to be seen on the mobile screens. For instance, a long expanded list of Menu items might not be necessary to occupy your whole screen on the mobile device.

To solve the above problem, I wrote a custom hook to get the screen width. The useBreakpoint hook will return one of the breakpoints based on the device width. The below table would help determine the breakpoints for various device widths.

Width	0px	600px	960px	1280px	1920px
Breakpoint	xs	sm	md	lg	xl
Devices	Extra Small	Small	Medium	Large	Extra Large

I made use of JavaScript EventTarget's addEventListener() function on window object to handle the resizing of the device width.

From Mozilla Docs,

The EventTarget method addEventListener() sets up a function that will be called whenever the specified event is delivered to the target. Common targets are Element, Document, and Window, but the target may be any object that supports events (such as XMLHttpRequest).

addEventListener() works by adding a function or an object that implements EventListener to the list of event listeners for the specified event type on the EventTarget on which it's called.

Ok, enough said. Let's have a glimpse at the code 👀

1️⃣ Set initial values for breakpoint and windowSize objects.

  const [breakpoint, setBreakPoint] = useState('');
  const [windowSize, setWindowSize] = useState({
    width: undefined,
    height: undefined,
  });

2️⃣ A range of device widths following the above table to define or setting the breakpoint.

    if (0 < windowSize.width && windowSize.width < 600) {
      setBreakPoint(breakpoints[0]);
    }
    if (600 < windowSize.width && windowSize.width < 960) {
      setBreakPoint(breakpoints[600]);
    }
    if (960 < windowSize.width && windowSize.width < 1280) {
      setBreakPoint(breakpoints[960]);
    }
    if (1280 < windowSize.width && windowSize.width < 1920) {
      setBreakPoint(breakpoints[1280]);
    }
    if (windowSize.width >= 1920) {
      setBreakPoint(breakpoints[1920]);
    }

3️⃣ A function that can continuously handle updating width and height of the windowSize.

  const handleResize = () => {
    setWindowSize({
      width: window.innerWidth,
      height: window.innerHeight,
    });
  };

4️⃣ Finally, a useEffect hook to hold everything together. It accepts windowSize.width as a dependency since we have to handle resizing of window based on the width of the device or browser.

  useEffect(() => {
    window.addEventListener('resize', handleResize);
    handleResize();

    if (0 < windowSize.width && windowSize.width < 600) {
      setBreakPoint(breakpoints[0]);
    }
    if (600 < windowSize.width && windowSize.width < 960) {
      setBreakPoint(breakpoints[600]);
    }
    if (960 < windowSize.width && windowSize.width < 1280) {
      setBreakPoint(breakpoints[960]);
    }
    if (1280 < windowSize.width && windowSize.width < 1920) {
      setBreakPoint(breakpoints[1280]);
    }
    if (windowSize.width >= 1920) {
      setBreakPoint(breakpoints[1920]);
    }

    return () => window.removeEventListener('resize', handleResize);
  }, [windowSize.width]);

That concludes everything. Feel free to checkout the source code. Let me know if you have any suggestions or questions.

React state management using Hooks in Ionic

Pavan C — Wed, 04 Nov 2020 00:55:12 +0000

Managing individual states in different components can be cumbersome when your app grows large with time. Hence, we need one central point where you can manage your application state.

Thanks to Hooks as they will make our job very easy in setting up the global state.

Let's get started 😎

Step 1️⃣

Set up the state of the application in one single file named State.tsx or State.jsx (If you're using JavaScript)

import React, { createContext, useEffect, useReducer } from "react";
import reducer, { initialState } from "./reducer";

const persistedState = localStorage.getItem("persistedState")
  ? JSON.parse(window.localStorage["persistedState"])
  : undefined;

let AppContext = createContext(initialState as any);

function AppContextProvider(props) {
  const fullInitialState = {
    ...initialState,
    ...persistedState
  };

  let [state, dispatch] = useReducer(reducer, fullInitialState);
  let value = { state, dispatch };

  useEffect(() => {
    window.localStorage["persistedState"] = JSON.stringify({
      loader: state.loader
    });
  }, [state]);

  return (
    <AppContext.Provider value={value}>{props.children}</AppContext.Provider>
  );
}

let AppContextConsumer = AppContext.Consumer;

export { AppContext, AppContextProvider, AppContextConsumer };

Step 2️⃣

Now, we will create a Reducer (reducer.ts), which is simply a function that takes previous state and an action and returns the next state.

export const initialState = {
  loader: false
};

const reducer = (state, action) => {
  switch (action.type) {
    case "setLoader": {
      return { ...state, loader: action.loader };
    }
  }
  return state;
};

export default reducer;

From the above piece of code, there is a loader with initial state set to false. And, we made our reducer know that whenever an action comes with type setLoader, it takes the previous state and returns the next state.

Step 3️⃣

Now that we have set up our State and Reducer, our next goal would be to enable state management globally in our application. So, wrap your application inside AppContextProvider. In my case, the root of the application is inside index.tsx file.

ReactDOM.render(
  <AppContextProvider>
    <App />
  </AppContextProvider>,
  document.getElementById("root")
);

That's it! We are all set. 🚀

Let's jump in to an example case where I want to spin and pause a loader. For this, we will be dispatching actions by specifying what action the buttons should perform.

In other words, we will be dispatching the actions by specifying the type setLoader along with the value you want to pass to the reducer - true if you want to spin the loader or false for pausing the loader.

const Home = () => {
  const { state, dispatch } = useContext(AppContext);

  const handleSpinLoader = () => {
    dispatch({ type: "setLoader", loader: true });
  };

  const handlePauseLoader = () => {
    dispatch({ type: "setLoader", loader: false });
  };
  return (
    <IonPage>
      <IonContent>
        <IonSpinner name="crescent" paused={!state.loader} />

        <IonButton onClick={handleSpinLoader}>Spin Loader</IonButton>
        <IonButton onClick={handlePauseLoader}>Pause Loader</IonButton>
      </IonContent>
    </IonPage>
  );
};

Whenever you click on the buttons, actions will be dispatched and there by state changes according to the actions.

I created a working example using Codesandbox. Please feel free to check it out and drop your questions or comments if any.

References

A state management pattern for Ionic React with React Hooks

Remove element from DOM in React way

Pavan C — Sat, 17 Oct 2020 23:49:01 +0000

We will be using useEffect Hook to execute JavaScript Window.setTimeout() function which will help hide an element in the DOM (a side effect).

From React docs,

Data fetching, setting up a subscription, and manually changing the DOM in React components are all examples of side effects.

In the setTimeout function, set the state variable visible to false after some amount of delay, which comes from props. In this example, 5000 milliseconds. In other words, we are telling setTimeout function to set the visible variable to false after 5 seconds.

import React, { useEffect, useState } from "react";

const Expire = props => {
  const [visible, setVisible] = useState(true);

  useEffect(() => {
    setTimeout(() => {
      setVisible(false);
    }, props.delay);
  }, [props.delay]);

  return visible ? <div>{props.children}</div> : <div />;
};

export default Expire;

You might have thought what is the optional second argument, props.delay doing in the useEffect Hook. By doing that, we told React to skip applying an effect if certain values haven’t changed between re-renders. This is for performance optimization by skipping effects 💡.

Let's say you forgot you mention the second argument, you would notice that the app will cause unnecessary re-renders even after the element is hidden from DOM and thus affecting your app performance.

useEffect(() => {
  setTimeout(() => {
    setVisible(false);
  }, props.delay);
}); // This causes re-rendering effect

Now that we are done with our functional component, let's bring it to action altogether 🚀. Pass in delay props (5000 milliseconds) to our Expire component and you will notice that the element would be hidden from the DOM after 5 seconds.

<Expire delay="5000">Hooks are awesome!</Expire>