DEV Community: Nilupul Perera

🤖 The Role of AI in Modern Frontend Development

Nilupul Perera — Wed, 28 May 2025 05:00:00 +0000

Frontend development is evolving fast. Like, blink-and-you-miss-it fast. And now, AI is crashing the party — not as a guest, but as the new co-pilot. From generating components to optimizing UX, AI is reshaping how we design, build, and ship user interfaces.

In this article, we'll break down:

How AI is transforming frontend workflows
Real-world tools and examples
What you should actually care about as a frontend dev
Whether you should be hyped — or cautious

💡 What’s AI Actually Doing in Frontend Right Now?

Let’s get real. AI isn’t writing perfect React apps from scratch (yet). But it is crushing it in specific parts of the workflow:

1. UI Code Generation

Tools like Vercel’s v0.dev, Codeium, and even ChatGPT are generating full UI components from simple prompts.

"Build me a pricing card with Tailwind and a call-to-action button"

Boom — AI can spit out 80% of what you'd hand-code.

2. Design-to-Code

Figma + AI = magic. Tools like Figma plugins with GPT, or Vercel’s v0, can interpret design layers and output clean, usable JSX.

3. AI Pair Programming

GitHub Copilot and CodeWhisperer are now your daily standup buddies. You write a few lines, they complete it. Boring boilerplate? Gone.

4. Personalized UX at Scale

AI can help dynamically tailor frontend content — think e-commerce homepages that adapt based on real-time preferences or behavior.

⚙️ Real-World Tools in Action

Let’s talk about what’s actually being used out there:

Tool	What It Does	Use Case
GitHub Copilot	AI-assisted code completion	Speed up repetitive code
v0.dev	Prompt-to-UI generator	Bootstrap UIs instantly
LangChain.js	Build AI-powered frontends	Chatbots, dynamic search
Vercel AI SDK	Edge-optimized AI interaction	Real-time AI in Next.js apps
Locofy.ai	Converts Figma to React/HTML	Design-to-code pipeline

🧠 Code Example: AI Chatbot in React with OpenAI API

Here’s a quick look at how to build a minimal AI chatbot UI in React:

import { useState } from 'react';

const Chat = () => {
  const [input, setInput] = useState('');
  const [messages, setMessages] = useState([]);

  const sendMessage = async () => {
    const res = await fetch('/api/chat', {
      method: 'POST',
      body: JSON.stringify({ message: input }),
    });
    const data = await res.json();
    setMessages([...messages, { user: input }, { bot: data.reply }]);
    setInput('');
  };

  return (
    <div>
      {messages.map((m, i) => (
        <div key={i}>{m.user || m.bot}</div>
      ))}
      <input value={input} onChange={e => setInput(e.target.value)} />
      <button onClick={sendMessage}>Send</button>
    </div>
  );
};

export default Chat;

Pair that with a basic /api/chat backend hitting OpenAI or any LLM, and you're live.

🧬 Should You Be Worried?

Short answer: No. Adapt.

AI isn’t here to steal your job — it’s here to make you 10x faster at the boring stuff. You still need to:

Architect scalable apps
Optimize performance
Handle state and edge cases
Build great UX

But now you can ship faster, focus more on logic, and let AI cover boilerplate.

⚠️ The Gotchas

Code quality ≠ guaranteed — You still need to review what AI gives you.
Security holes — AI tools can generate risky patterns if you’re not careful.
Accessibility + UX — AI might not understand real users like you do.

Think of AI as a fast intern. Smart, helpful — but needs supervision.

📈 What's Next?

Expect more:

Framework-level AI integration (React, Vue, SvelteKit)
Live coding assistants inside your IDE
LLM-driven personalization that renders custom content on the edge
A11y and testing bots that review your code on commit

AI isn’t replacing frontend devs. It’s augmenting us.

🎯 Final Thoughts

Frontend is no longer just about CSS and components. It’s becoming increasingly about how fast you can prototype, how personalized your UI can be, and how well you integrate intelligence into the UX.

So if you haven’t already, it’s time to experiment. Build with AI. Learn its quirks. And use it to ship better, faster, smarter frontends.

👀 Want to see code examples or a full GPT-powered React app? Drop a comment or connect with me. Let’s build the future of frontend together.

⚛️ React 19's `use()` Hook: A Practical Guide with Examples

Nilupul Perera — Tue, 27 May 2025 04:22:00 +0000

React 19 introduces a powerful new addition to the hooks API — the use() hook. If you’ve been deep in server components or experimenting with async rendering in React, this is about to make your life a lot easier.

In this article, we’ll explore:

What use() is and when to use it
Why it matters in React 19
Real-world examples with async data fetching and server components
How to migrate from traditional patterns

🧠 What Is the `use()` Hook?

use() is a new hook that lets you read the value of a promise directly inside a component — mostly designed for use with React Server Components (RSC).

Instead of using useEffect and useState to manage async flows, you can now handle async logic more declaratively:

// Server Component Example
import { use } from 'react';

async function getUserData() {
  const res = await fetch('https://api.example.com/user');
  return res.json();
}

export default function UserProfile() {
  const user = use(getUserData());

  return <div>Hello, {user.name}!</div>;
}

⚠️ Note: This works only in server components, not client components (yet).

🛠️ Why Use `use()`?

The use() hook brings these major improvements:

✅ Simpler async logic in server components
🔄 Suspense-friendly by design
🧼 Cleaner code — fewer loading states and side-effects
🚀 Better DX with async/await natively inside components

📦 Real-World Use Case: Fetching Products

Let’s build a simple eCommerce component that fetches products on the server:

// app/products/page.tsx (Server Component)
import { use } from 'react';

async function getProducts() {
  const res = await fetch('https://fakestoreapi.com/products');
  return res.json();
}

export default function ProductsPage() {
  const products = use(getProducts());

  return (
    <div>
      <h1>Products</h1>
      <ul>
        {products.map((product: any) => (
          <li key={product.id}>{product.title}</li>
        ))}
      </ul>
    </div>
  );
}

Boom — no loading state, no messy lifecycle code. And React handles it in the streaming render pipeline.

🤔 How Does This Compare to useEffect?

In traditional React (client components), you'd use useEffect + useState like this:

useEffect(() => {
  fetchData().then(setData);
}, []);

Now, in React Server Components, you just:

const data = use(fetchData());

It’s declarative, synchronous-feeling, and lets you write async code like you would in a regular function.

🔁 Composing Async Logic

You can also compose multiple use() calls without breaking the render tree:

const user = use(getUser());
const posts = use(getPosts(user.id));

It’s clean, readable, and behaves predictably thanks to Suspense under the hood.

🧪 When Not to Use It

❌ Not usable in client components yet
⚠️ Can lead to waterfall fetches if not used carefully
🔍 Debugging async render flows might take getting used to

🧬 Final Thoughts

The use() hook in React 19 marks a serious shift toward simpler, more intuitive async programming in React — especially for server components.

If you're building with Next.js 14+ or another React 19-compatible framework, now’s the time to refactor those old useEffect spaghetti towers and try use() instead.

It’s cleaner, faster, and frankly — it’s the future of React.

💬 Have you used the new use() hook in your app? What’s your experience been like?

🚀 What Are Progressive Web Apps (PWAs)? A Complete Guide for Modern Web Devs

Nilupul Perera — Mon, 26 May 2025 05:00:00 +0000

Progressive Web Apps (PWAs) are reshaping how we build and deliver web experiences. They're not a buzzword anymore — they're a core part of the modern web stack. From startups to big tech, everyone’s jumping on the PWA train.

Let’s break down what PWAs are, how they work, why they matter, and how to build one that performs like a native app — but with the reach of the web.

🧠 What is a Progressive Web App?

A Progressive Web App is a web application that uses modern web capabilities to deliver an app-like experience. It can be installed on a user’s device, works offline, and loads fast — all while being served via HTTPS and built with standard web technologies (HTML, CSS, JS).

Core Characteristics:

✅ Responsive
📲 Installable on home screen
⚡ Works offline
🛡️ Served over HTTPS
🔔 Push notifications
🔁 Background sync

🛠️ Key Technologies That Power PWAs

PWAs are made possible by combining several APIs and browser features:

1. Service Workers

They run in the background and enable:

Offline support
Caching assets/data
Intercepting network requests

2. Web App Manifest

A JSON file that defines how your app appears to the user (icon, name, start URL, display mode).

3. HTTPS

PWAs must be served securely. Browsers restrict service workers and advanced features to secure origins only.

4. App Shell Architecture

Splits static assets (the shell) from dynamic content — making repeat loads fast and reliable.

📈 Why PWAs Matter in 2025

⚡ Speed = Retention

PWAs load in under 3 seconds on average, and users bounce less.

🌍 Reach

They're cross-platform by nature. Android? iOS? Desktop? You’re covered.

💸 No App Store Gatekeeping

Skip the app store submission process and still allow users to “install” the app.

🔔 Re-engagement

Push notifications and background sync offer a mobile-native engagement layer.

🧩 Smaller Bundle Sizes

No bloated binaries like with native apps. Faster updates, smaller download footprint.

🧪 Real-World Examples of PWAs

Twitter Lite: Reduced data usage by 70% and increased engagement.
Starbucks PWA: Doubled daily active users on mobile.
Pinterest PWA: Increased time spent by 40%.

These apps prove that you can offer native-like experiences from a URL.

🏗️ How to Build a Basic PWA

Here’s what your dev flow might look like:

Start with a basic React/Vue/Vanilla app
Add a manifest.json with name, icons, theme colors
Register a service worker to cache assets and handle offline
Ensure the app is served over HTTPS
Test with Lighthouse (Chrome DevTools) for PWA readiness score

Popular frameworks like Next.js, Nuxt, and SvelteKit also offer built-in support or easy plugin options for PWA features.

📉 Gotchas and Limitations

Not every browser supports full PWA features (especially on iOS)
Service workers can be tricky to debug
Offline UX must be designed intentionally
Limited background processing compared to native

🧬 Final Takeaway

PWAs aren’t just a fallback solution. They're a legit contender to native apps when done right. If you're building a modern frontend experience and care about speed, reach, and engagement — PWAs are 100% worth investing in.

💬 Have you built a PWA before? Drop your stack and thoughts in the comments. Let’s share tips.

📡 A Practical Guide to Using WebSockets in Real-Time Apps

Nilupul Perera — Fri, 23 May 2025 05:00:00 +0000

In a world where users expect everything to be real-time — chat apps, dashboards, notifications, live updates — WebSockets have become a foundational tool for modern frontend developers.

If you're still relying solely on REST APIs and polling to handle dynamic data, it's time to level up. This guide will show you how to integrate WebSockets into your frontend apps in a clean, scalable, and practical way.

🔄 What Are WebSockets?

WebSockets are a communication protocol that enables full-duplex, bidirectional communication between a client and server over a persistent connection.

Unlike REST or HTTP requests, WebSockets keep the connection open, allowing data to be pushed from the server without the client needing to constantly ask for updates (a.k.a. polling).

🚀 When Should You Use WebSockets?

Use WebSockets when you need:

Real-time communication (e.g., messaging, collaboration tools)
Live updates (e.g., stock prices, sports scores, data dashboards)
Push notifications without delay
Bidirectional interaction (e.g., multiplayer games, live auctions)

Avoid WebSockets if your app doesn't need frequent or immediate updates — REST may be simpler and cheaper to manage.

🛠️ Setting Up a WebSocket Server

For this example, we'll use Node.js with ws, a lightweight WebSocket library.

1. Install `ws`

npm install ws

2. Create a basic WebSocket server

// server.js
const WebSocket = require('ws');

const server = new WebSocket.Server({ port: 8080 });

server.on('connection', socket => {
  console.log('Client connected');

  socket.on('message', message => {
    console.log('Received:', message);
    // Echo back
    socket.send(`Server: ${message}`);
  });

  socket.on('close', () => {
    console.log('Client disconnected');
  });
});

🌐 Connecting WebSockets in the Frontend

Let’s connect from a React app:

// useWebSocket.js
import { useEffect, useRef } from 'react';

export default function useWebSocket(url) {
  const socketRef = useRef(null);

  useEffect(() => {
    socketRef.current = new WebSocket(url);

    socketRef.current.onopen = () => console.log('Connected');
    socketRef.current.onmessage = (event) => console.log('Message:', event.data);
    socketRef.current.onerror = (err) => console.error('WebSocket error:', err);
    socketRef.current.onclose = () => console.log('Disconnected');

    return () => socketRef.current.close();
  }, [url]);

  const sendMessage = (msg) => {
    if (socketRef.current.readyState === WebSocket.OPEN) {
      socketRef.current.send(msg);
    }
  };

  return { sendMessage };
}

🧠 Best Practices

Reconnect Logic: Add automatic reconnection for dropped connections.
Use Context or State Management to share socket data across your app.
Throttle updates if you're handling high-frequency events (e.g., mouse tracking).
Secure Your Sockets: Use wss:// in production.
Fallbacks: Consider fallback strategies for older browsers or poor network conditions.

⚡ Real-World Use Case: Live Notifications

Let’s say you want to show real-time notifications in your dashboard:

On server: Broadcast a "notification" event when something important happens.
On client: Listen for that event and update the UI.
Done — no polling, no delays.

📈 Final Thoughts

WebSockets offer a fast, efficient way to build truly interactive frontend apps. With the right architecture and tools, you can create experiences that feel instant and alive.

Don't overcomplicate it. Start small. Use a hook. Add reconnection later. Focus on user experience first.

If you're not experimenting with WebSockets yet, you're missing out on the real-time future of the web.

📎 Save this post and follow for more frontend dev insights.

⚙️ The Impact of Edge Functions on Frontend Performance

Nilupul Perera — Wed, 21 May 2025 05:00:00 +0000

In the world of frontend development, performance is king. Whether you're building a sleek SaaS dashboard or a blazing-fast eCommerce storefront, your users expect snappy load times and seamless interactions — no excuses.

Over the years, we've optimized everything from lazy loading to CDN caching. But there's a new tool that’s changing the game completely: Edge Functions.

Let’s break down why every frontend engineer should be paying attention.

🌍 What Exactly Are Edge Functions?

At a high level, edge functions are serverless functions deployed closer to your users, at edge locations across the globe. This is different from traditional serverless setups that live in a single cloud region.

Think Vercel Edge Functions, Netlify Edge Middleware, or Cloudflare Workers — all of them let you run logic at the edge of the network, before the request even reaches your origin server.

Instead of relying on one centralized backend in the US or Europe, you can now process requests near the user, reducing round trips and improving performance in ways that frontend tools alone can’t match.

🧠 Why Frontend Developers Should Care

We obsess over Core Web Vitals like FCP (First Contentful Paint), LCP (Largest Contentful Paint), and CLS (Cumulative Layout Shift). These metrics directly impact both user experience and search engine rankings. Here's how edge functions can help:

⚡ 1. Reduced Latency = Faster Pages

When logic executes close to the user, the time it takes to respond — especially the Time to First Byte (TTFB) — drops significantly.

Imagine a user in Singapore hitting your API that's hosted in North Virginia. That round-trip is brutal. With edge functions, the request is handled in Singapore itself.

✅ Result: Lower TTFB, better FCP, and happier users.

🌐 2. Personalized Content Without Delays

Edge functions let you inject personalization into your pages without slowing down the client-side load.

Let’s say you want to show currency, language, or offers based on location. Instead of doing this on the client or backend, handle it at the edge. By the time the page loads, it’s already tailored to the user.

✅ Result: Fast, dynamic pages with no hydration jank.

🧱 3. Smarter Caching Logic

Edge functions give you fine-grained control over caching. You can serve cached content to anonymous users and fresh content to logged-in ones — all handled before your app runs.

✅ Result: Balance performance with real-time updates.

🔌 4. Lightweight API Orchestration

Use edge functions to act as an API gateway. Combine requests, handle routing logic, or inject headers — all on the fly.

No need to hit your origin server for every little thing.

✅ Result: Lower latency and less load on your backend.

🔍 5. Core Web Vitals & SEO Wins

Google cares about speed. The faster your LCP and FCP scores, the higher your chances of ranking well. If edge logic helps you render meaningful content faster, it’s a straight-up SEO boost.

✅ Result: Better UX and better discoverability.

🛠️ Real-World Use Case (Vercel Example)

Here’s an edge function that fetches geo-specific product data based on the visitor’s country:

// /pages/api/edge-products.ts
export const config = { runtime: 'edge' };

export default async function handler(req) {
  const region = req.headers.get('x-vercel-ip-country') || 'US';
  const res = await fetch(`https://api.myshop.com/products?region=${region}`);
  const products = await res.json();

  return new Response(JSON.stringify(products), {
    headers: { 'Content-Type': 'application/json' },
  });
}

This executes close to the user, personalizes data, and avoids a second trip from the client. It’s simple, powerful, and fast.

⚠️ Edge Functions Aren’t a Free Lunch

A few things to be aware of:

Cold Starts still happen (though less often)
No full Node.js environment (no native fs, path, etc.)
Debugging is a bit trickier than traditional serverless

So yeah, plan wisely. But if you care about global scale and frontend performance — edge is worth it.

📈 Final Thoughts: The Edge Is the Future

Edge functions are more than just a backend tool — they’re a frontend performance multiplier. They let us rethink how we build, render, and serve content to users across the globe.

If you’re serious about optimizing LCP, slashing TTFB, and building experiences that feel instant, edge functions are a must in your stack.

🔗 Want to Learn More?

If you enjoyed this breakdown, follow me for more frontend deep dives, real-world React tips, and performance engineering strategies.

Let’s keep pushing the web forward. ⚡

🚀 Web Performance Metrics: How to Improve FCP, LCP, and CLS

Nilupul Perera — Mon, 19 May 2025 05:00:00 +0000

You could have the most beautiful UI ever built… but if it takes 6 seconds to show up, no one cares. Web performance isn't just a tech concern — it's a user experience killer and a conversion buster.

Let’s break down the three Core Web Vitals that actually matter — FCP (First Contentful Paint), LCP (Largest Contentful Paint), and CLS (Cumulative Layout Shift) — and how to actually improve them like a pro.

🕓 1. First Contentful Paint (FCP)

What it measures: Time from page load to when first visible content renders.

Why it matters: It tells users something is happening. A fast FCP makes your app feel snappy.

How to improve it:

✅ Use a minimal critical CSS strategy.
✅ Lazy-load fonts — use font-display: swap.
✅ Prioritize above-the-fold content.
✅ Eliminate render-blocking resources (like giant stylesheets and unused JS).

🔥 Pro tip: Inline the CSS needed to render the first screen and defer the rest.

📸 2. Largest Contentful Paint (LCP)

What it measures: Render time of the largest visible element (image, video, or text block) in the viewport.

Why it matters: It reflects perceived load speed. This is what users actually see and wait for.

How to improve it:

🖼️ Optimize and compress hero images (use next-gen formats like WebP or AVIF).
⚡ Serve static assets via a CDN.
🎯 Preload critical assets (like hero images or large headings).
⏬ Remove unnecessary third-party scripts — they’re often LCP killers.

Target: Keep LCP < 2.5s

📦 3. Cumulative Layout Shift (CLS)

What it measures: Visual stability. Ever clicked the wrong button because content jumped? Yeah, that’s CLS.

Why it matters: Poor CLS kills user trust — and makes you look like an amateur.

How to improve it:

🧷 Always set explicit width and height for images and media.
🛑 Don’t inject content above existing content without reserving space.
🧼 Avoid font swaps that cause shifts (use font-display: optional or preload fonts).

Target: CLS score < 0.1

🧪 Tools to Monitor and Fix

Lighthouse (in DevTools) — Instant audits
WebPageTest.org — Deep analysis
PageSpeed Insights — Real-world + lab data
Chrome User Experience Report (CrUX) — Real user metrics

📈 Bonus: The Domino Effect of Optimization

When you improve FCP and LCP, SEO rankings and user retention spike. Google rewards fast experiences. Users stick around longer. And your bounce rate? 👋

💬 Final Thoughts

Web performance isn’t just for backend folks or DevOps nerds. As a frontend dev, it’s your job to deliver fast, stable, sexy apps.

If your users are waiting, they’re leaving. If your UI jumps around, they’re annoyed. Mastering FCP, LCP, and CLS isn't optional — it's the standard now.

Exploring the Latest JavaScript Features in ESNext

Nilupul Perera — Fri, 16 May 2025 05:00:00 +0000

JavaScript is evolving faster than your npm dependencies can break. ESNext refers to the bleeding-edge features currently proposed or recently added to the ECMAScript spec — and if you're not keeping up, you're falling behind.

In this article, we’ll break down some of the most exciting new features landing in modern JavaScript that are already usable in most major runtimes or via transpilers like Babel or TypeScript.

🚀 1. `await` Outside of Async Functions (Top-Level Await)

Previously, await could only live inside async functions. That’s history now.

const response = await fetch("/api/data");
const data = await response.json();
console.log(data);

Top-level await allows cleaner module code, especially for scripts with dynamic imports or data loading. It’s a game-changer for modular design.

⚠️ Works only in ES Modules (not CommonJS)

✨ 2. `?.` Optional Chaining

Gone are the days of foo && foo.bar && foo.bar.baz.

const userName = user?.profile?.name;

This reads clean, protects from undefined errors, and doesn’t feel like you’re writing defensive code all day long.

💬 3. `??` Nullish Coalescing Operator

Forget || for fallbacks—it’s not always safe.

const value = input ?? "default";

This only falls back if input is null or undefined, not if it’s 0, '', or false. More precise and less surprising.

📦 4. `import.meta` and Dynamic Importing

You now get access to meta-info about your module.

console.log(import.meta.url);

Also, dynamic imports let you split bundles smartly:

if (condition) {
  const { heavyStuff } = await import("./heavy-module.js");
}

This makes lazy loading and conditional loading native-level smooth.

🧪 5. Record & Tuple (Stage 2/3)

Coming soon: immutable, deeply comparable data structures.

const record = #{ name: "Nilupul", age: 30 };
const tuple = #[1, 2, 3];

These aren't regular objects/arrays — they’re deeply frozen, and comparison is value-based.

#{x: 1} === #{x: 1}; // true

⚠️ Not widely supported yet, but worth keeping on your radar.

🧵 6. Pattern Matching (Stage 3)

Forget switch-case spaghetti. Match with style.

match (value) {
  when ({ type: "admin" }) => doAdminThing(),
  when ({ type: "user" }) => doUserThing(),
  else => handleDefault()
}

It’s like destructuring and switch had a baby — and it’s glorious for cleaner, declarative control flows.

📏 7. Ergonomic Brand Checks for Private Fields

Private fields now have a cleaner existence check:

#secret;

if (#secret in obj) {
  console.log("Private field exists!");
}

Goodbye verbose workarounds, hello native ergonomics.

🔥 Final Thoughts

JavaScript isn’t just “the language of the web” anymore — it’s morphing into a modern, expressive, and powerful tool that stands tall with the big leagues.

If you’re building apps today, you need to be fluent in tomorrow’s syntax. Start experimenting now — these features aren’t just sugar; they change how we architect everything from UIs to APIs.

Stay sharp. Stay modern.

Best Practices for Handling Side Effects in React

Nilupul Perera — Wed, 14 May 2025 05:00:00 +0000

When working with React, handling side effects correctly can make or break your component’s performance, readability, and predictability. Side effects—like data fetching, subscriptions, or DOM manipulations—shouldn’t be sprinkled all over your codebase like confetti.

Here’s a deep dive into the best practices every serious React dev should follow when dealing with side effects.

⚠️ First, What Are Side Effects in React?

Side effects are operations that affect something outside the scope of the current function being executed. In React, they can include:

Fetching data from APIs
Manually modifying the DOM
Subscribing to WebSocket or event listeners
Setting timeouts or intervals
Logging or analytics tracking

These are not part of the component’s render output and must be handled outside the render phase.

✅ 1. Use `useEffect` for Declarative Side Effects

React's useEffect hook is the official home for most side effects in functional components.

useEffect(() => {
  const fetchData = async () => {
    const res = await fetch("/api/data");
    const data = await res.json();
    setData(data);
  };

  fetchData();
}, []);

Best practice:
Use the dependency array correctly. It should contain everything your effect depends on.

✅ 2. Separate Concerns — Don't Cram Everything Into One Effect

Avoid the “God effect” trap where one useEffect tries to do it all. Split effects by purpose: data fetching, subscriptions, cleanup logic, etc.

useEffect(() => {
  // Handles window resize
  const handleResize = () => setWidth(window.innerWidth);
  window.addEventListener("resize", handleResize);

  return () => window.removeEventListener("resize", handleResize);
}, []);

useEffect(() => {
  // Fetch data separately
}, []);

✅ 3. Always Clean Up Subscriptions and Timeouts

If you don’t clean up, you’ll leak memory and trigger bugs during unmounting or re-renders.

useEffect(() => {
  const timer = setTimeout(() => {
    console.log("Delayed log");
  }, 1000);

  return () => clearTimeout(timer);
}, []);

✅ 4. Avoid Side Effects During Rendering

Never call fetch(), setTimeout(), or manipulate the DOM directly during render.

🚫 Bad:

const MyComponent = () => {
  fetch("/api/data"); // NOPE
  return <div>Hello</div>;
};

✅ Good:

useEffect(() => {
  fetch("/api/data");
}, []);

✅ 5. Use Custom Hooks to Encapsulate Reusable Side Effects

If you're repeating effect logic, it’s time to extract it into a custom hook.

function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, []);

  return width;
}

Then use it like:

const width = useWindowWidth();

✅ 6. Be Mindful of Async Functions in `useEffect`

You can't pass an async function directly to useEffect. Instead, define an async function inside it and call it.

useEffect(() => {
  const loadData = async () => {
    try {
      const res = await fetch("/api/data");
      const json = await res.json();
      setData(json);
    } catch (err) {
      console.error(err);
    }
  };

  loadData();
}, []);

✅ 7. Don’t Use Effects for State Derivation

If your state can be derived from props or other state, do it in the render—not with side effects.

// ✅ Good
const derivedState = someValue > 0;

// 🚫 Bad
useEffect(() => {
  setDerivedState(someValue > 0);
}, [someValue]);

🧠 Final Thoughts

Side effects are where bugs love to hide. Clean, scoped, and well-structured effects make your code:

Easier to debug
Easier to test
More predictable

And in the React world, predictability is power.

Strategies for Handling Large-Scale Frontend Applications

Nilupul Perera — Fri, 09 May 2025 10:00:00 +0000

As frontend projects grow, maintaining scalability, performance, and team efficiency becomes increasingly difficult. Large-scale frontend applications, like those seen in enterprise or SaaS platforms, demand thoughtful architecture, robust tooling, and clear conventions.

Here are battle-tested strategies to ensure your large frontend codebase remains sustainable and efficient:

📐 1. Establish a Scalable Project Architecture

A clear folder structure and separation of concerns can drastically improve maintainability.

Structure example:

src/
├── components/
├── features/
├── pages/
├── hooks/
├── services/
├── utils/
├── state/
├── config/

Organize code by domain (feature-based) rather than type. This encourages encapsulation and modularity.

🧩 2. Embrace Component Reusability

Build atomic, reusable UI components. Tools like Storybook help document and visualize components in isolation.

✅ Pro Tip: Create a design system or UI library early to promote consistency.

🧠 3. Use Modern State Management Techniques

Avoid overusing global state. Use local state (e.g., via useState, useReducer) when possible, and React Context, Zustand, Jotai, or Redux Toolkit for cross-cutting concerns.

Consider splitting global state into slices by feature to prevent tight coupling.

⚙️ 4. Code Splitting & Lazy Loading

Don’t ship your entire app upfront.

Use:

const Settings = React.lazy(() => import('./pages/Settings'));

And wrap in:

<Suspense fallback={<Loader />}>
  <Settings />
</Suspense>

This reduces initial load time significantly.

📦 5. Modularize Features Using Micro-Frontends (When Needed)

Micro-frontends are ideal when teams work on independent verticals or using different tech stacks.

Use Module Federation (Webpack 5) or tools like Single-SPA.

⚠️ Be cautious—micro-frontends add complexity. Only use them when necessary.

🧪 6. Enforce Strong Testing Practices

Maintain high confidence with tests at all levels:

Unit (e.g., Jest)
Integration (e.g., React Testing Library)
E2E (e.g., Cypress)

Automate tests via CI/CD pipelines.

🛠️ 7. Automate with Dev Tools and Linters

ESLint and Prettier for code consistency
TypeScript for static type safety
Husky and lint-staged for enforcing rules before commits

🌍 8. Internationalization (i18n)

Use libraries like react-i18next or FormatJS to support multilingual experiences, especially if the app has a global audience.

🧱 9. Adopt Monorepos with Tools Like Turborepo or Nx

Great for managing multiple packages (like shared components, utilities) in one codebase.

It helps with:

Dependency versioning
Code reuse
Scalable builds with caching

📊 10. Monitor and Optimize Performance

Use:

React Profiler
Chrome DevTools
Lighthouse
Web Vitals

Keep an eye on bundle size, unused dependencies, and expensive re-renders.

✅ Final Thoughts

Scaling a frontend application isn’t just about adding more code—it’s about managing complexity, enabling developer efficiency, and ensuring long-term maintainability. Start with clean abstractions, modular architecture, and strong tooling, and you'll be well-equipped to build robust large-scale systems.

The Evolution of React State Management

Nilupul Perera — Thu, 08 May 2025 07:50:33 +0000

When React was first released, managing state was relatively simple—mostly handled within components using this.state and setState. As applications scaled, so did the complexity of managing state. This has led to a rich ecosystem of tools and approaches to solve state management challenges effectively.

Let’s walk through the evolution of React state management and when to use each approach.

1. `useState`: The Starting Point

React Hooks introduced in version 16.8 changed everything.

const [count, setCount] = useState(0);

Use useState when:

You have local component state.
The state logic is simple.
No need to share the state across components.

2. `useReducer`: For Complex Logic

For state with complex transitions (like toggling, incrementing, or managing arrays), useReducer can be more predictable.

const reducer = (state, action) => {
  switch (action.type) {
    case 'increment': return { count: state.count + 1 };
    default: return state;
  }
};

const [state, dispatch] = useReducer(reducer, { count: 0 });

Use useReducer when:

The state logic is complex or nested.
You want to mimic Redux-style reducers.

3. Context API: For Global Sharing

React’s Context API helps pass state deeply without prop drilling.

const ThemeContext = React.createContext();

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Header />
    </ThemeContext.Provider>
  );
}

Use Context when:

You want to share simple global data (like theme or language).
It’s read-heavy, not write-heavy.

Important: Don’t overuse Context for high-frequency updates—it can cause unnecessary re-renders.

4. Redux: The Enterprise Choice

Redux introduced a unidirectional data flow, perfect for large-scale apps.

Use Redux when:

You need a single source of truth.
You want middleware support (e.g., for logging or side effects).
You’re building enterprise-level applications.

With Redux Toolkit, the setup is now easier than ever:

const counterSlice = createSlice({
  name: 'counter',
  initialState: 0,
  reducers: {
    increment: (state) => state + 1,
  },
});

5. Recoil, Zustand, Jotai: The New Wave

Modern state libraries offer lightweight alternatives:

Zustand: Minimal API, intuitive global state.
Jotai: Atom-based primitives with first-class TypeScript support.
Recoil: Atom + selector architecture for fine-grained updates.

Zustand example:

import { create } from 'zustand';

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

Use these when:

You want a simpler and scalable global store.
Redux feels like overkill for your project.

6. Server/URL-Based State: Don't Forget

Not all state belongs in React:

Server State: Use tools like React Query or SWR for data fetching.
URL State: Routing libraries like React Router manage state via URLs.

Conclusion: Choose the Right Tool

React's ecosystem provides a toolkit, not a one-size-fits-all. Here’s a quick decision tree:

Local and simple? → useState
Complex transitions? → useReducer
Share globally? → Context / Zustand / Redux
Async data? → React Query
Heavy logic with debugging needs? → Redux Toolkit

As React apps grow, choosing the right state management strategy is critical to maintainability, performance, and scalability.

Modern Authentication Methods OAuth, JWT, and Beyond

Nilupul Perera — Mon, 05 May 2025 05:00:00 +0000

Authentication is at the heart of every secure web application. As frontend developers, understanding modern authentication flows and how to implement them securely is crucial. This article explores the most widely used authentication methods today: OAuth 2.0, JWT (JSON Web Tokens), and OpenID Connect, and introduces some emerging approaches.

🔐 Why Authentication Matters

Authentication determines who the user is, and authorization determines what they can access. An insecure authentication mechanism can expose your app to session hijacking, data leaks, and impersonation attacks.

Modern SPAs (Single Page Applications) demand decoupled and secure authentication techniques that work well across multiple clients, including web, mobile, and APIs.

🚪 1. OAuth 2.0 — The Industry Standard

OAuth 2.0 is an authorization framework, not an authentication protocol by itself. It allows third-party apps to access user data without sharing credentials.

How It Works:

User is redirected to the authorization server.
They grant access to the app.
The app receives an authorization code/token.
It exchanges it for an access token to access resources.

Common Use Case:

"Login with Google" or "Login with GitHub" buttons.

Example:

// Redirect user to OAuth authorization endpoint
window.location.href = `https://accounts.google.com/o/oauth2/v2/auth?
  client_id=YOUR_CLIENT_ID
  &redirect_uri=http://localhost:3000/callback
  &response_type=code
  &scope=email profile`;

🧾 2. JWT (JSON Web Tokens)

JWTs are a compact, URL-safe way to represent claims between two parties.

Structure:

header.payload.signature

Use Cases:

User session handling in SPAs
Stateless authentication with APIs

Example (React + Express):

React (Login):

localStorage.setItem('token', response.data.token);

Express (Verify Token):

const jwt = require('jsonwebtoken');
const token = req.headers.authorization?.split(" ")[1];
jwt.verify(token, process.env.JWT_SECRET);

⚠️ JWTs are not encrypted, only encoded. Don't store sensitive data in them!

🧠 3. OpenID Connect (OIDC)

OpenID Connect is a layer built on top of OAuth 2.0. It adds authentication to OAuth's authorization.

It returns an ID token, which contains user identity information (usually a JWT).

Use Case:

"Sign in with Google" that gives you both the user's identity and access token for APIs.

🧬 4. Beyond: WebAuthn and Passkeys

The future of authentication is passwordless. WebAuthn and Passkeys aim to replace traditional credentials with biometrics or device-based authentication.

Example:

Face ID login on websites.
FIDO2 hardware keys.

These methods offer stronger phishing protection and better UX.

🛡️ Best Practices for Secure Authentication

Always use HTTPS
Store tokens in httpOnly cookies or use refresh token rotation
Set token expiration policies
Use PKCE for public clients (SPAs)
Never store tokens in localStorage without additional safeguards

⚖️ Choosing the Right Method

Method	Best For
OAuth 2.0	Third-party logins, API access
JWT	Stateless auth, scalable backend systems
OIDC	Identity + Authorization
WebAuthn	Passwordless, high-security applications

✅ Conclusion

Modern authentication has evolved far beyond simple username/password forms. Understanding tools like OAuth, JWT, and OpenID Connect, along with new methods like WebAuthn, allows you to build secure and user-friendly authentication flows.

The next time you're architecting an authentication system, choose a method that balances security, user experience, and scalability.

🧠 The Power of Web Workers for Frontend Performance

Nilupul Perera — Fri, 02 May 2025 05:00:00 +0000

As modern web applications become more complex, performance bottlenecks in the main thread can severely impact user experience. One powerful, underutilized tool to mitigate this is the Web Worker API.

Web Workers allow you to offload expensive JavaScript operations to a background thread, keeping the UI thread free for user interactions. Let's break it down:

🔍 What Are Web Workers?

Web Workers are JavaScript scripts that run in the background, independent of other scripts, without blocking the main thread.

This makes them ideal for:

Heavy computations (e.g., parsing large JSON files)
Data processing (e.g., image manipulation)
Real-time tasks (e.g., WebSocket handling, polling)
Working with IndexedDB or other async APIs

🧪 When Should You Use Them?

Use Web Workers when:

Your app has noticeable UI jank due to CPU-heavy operations.
You need to keep animations, scrolling, or inputs smooth.
You're dealing with data processing, such as analytics or parsing.

❗ Avoid using them for tasks that rely on DOM access — Web Workers don’t have access to the DOM.

✍️ Example: Creating a Basic Web Worker

1. worker.js (background thread logic):

// worker.js
self.onmessage = function (e) {
  const result = heavyComputation(e.data);
  self.postMessage(result);
};

function heavyComputation(data) {
  // Simulate CPU-intensive task
  let sum = 0;
  for (let i = 0; i < data.iterations; i++) {
    sum += Math.sqrt(i);
  }
  return sum;
}

2. Main thread file (e.g., app.js):

const worker = new Worker('worker.js');

worker.postMessage({ iterations: 1000000 });

worker.onmessage = function (e) {
  console.log('Result from worker:', e.data);
};

⚛️ Web Workers in React

React doesn't directly integrate with Web Workers, but you can create hooks or context wrappers to communicate with them:

// useWorker.ts
import { useEffect, useRef } from 'react';

export function useWorker(workerScript: string) {
  const workerRef = useRef<Worker | null>(null);

  useEffect(() => {
    workerRef.current = new Worker(workerScript);
    return () => workerRef.current?.terminate();
  }, [workerScript]);

  const postMessage = (data: any) => {
    workerRef.current?.postMessage(data);
  };

  return { postMessage, worker: workerRef.current };
}

Use this hook like:

const { postMessage, worker } = useWorker('/worker.js');

useEffect(() => {
  worker!.onmessage = (e) => console.log('Worker result:', e.data);
  postMessage({ iterations: 1000000 });
}, []);

🚀 Best Practices

Use Comlink to simplify worker communication.
Bundle workers using tools like worker-loader (Webpack) or Vite's native support.
Minimize communication overhead between the main thread and workers.

🧩 Advanced Use Cases

Image manipulation (e.g., filters, transformations)
AI/ML models in the browser
Data compression/decompression
Cryptography and hashing

🌟 Conclusion

Web Workers are a powerful tool to improve frontend performance by delegating heavy tasks off the main thread. When used appropriately, they result in snappier, more responsive user experiences.

They may not be needed for every project, but knowing how and when to use them is a great addition to your frontend performance toolbox.

DEV Community: Nilupul Perera

🤖 The Role of AI in Modern Frontend Development

💡 What’s AI Actually Doing in Frontend Right Now?

1. UI Code Generation

2. Design-to-Code

3. AI Pair Programming

4. Personalized UX at Scale

⚙️ Real-World Tools in Action

🧠 Code Example: AI Chatbot in React with OpenAI API

🧬 Should You Be Worried?

⚠️ The Gotchas

📈 What's Next?

🎯 Final Thoughts

⚛️ React 19's `use()` Hook: A Practical Guide with Examples

🧠 What Is the use() Hook?

🛠️ Why Use use()?

📦 Real-World Use Case: Fetching Products

🤔 How Does This Compare to useEffect?

🔁 Composing Async Logic

🧪 When Not to Use It

🧬 Final Thoughts

🚀 What Are Progressive Web Apps (PWAs)? A Complete Guide for Modern Web Devs

🧠 What is a Progressive Web App?

Core Characteristics:

🛠️ Key Technologies That Power PWAs

1. Service Workers

2. Web App Manifest

3. HTTPS

4. App Shell Architecture

📈 Why PWAs Matter in 2025

⚡ Speed = Retention

🌍 Reach

💸 No App Store Gatekeeping

🔔 Re-engagement

🧩 Smaller Bundle Sizes

🧪 Real-World Examples of PWAs

🏗️ How to Build a Basic PWA

📉 Gotchas and Limitations

🧬 Final Takeaway

💬 Have you built a PWA before? Drop your stack and thoughts in the comments. Let’s share tips.

📡 A Practical Guide to Using WebSockets in Real-Time Apps

🔄 What Are WebSockets?

🚀 When Should You Use WebSockets?

🛠️ Setting Up a WebSocket Server

1. Install ws

2. Create a basic WebSocket server

🌐 Connecting WebSockets in the Frontend

🧠 Best Practices

⚡ Real-World Use Case: Live Notifications

📈 Final Thoughts

📎 Save this post and follow for more frontend dev insights.

⚙️ The Impact of Edge Functions on Frontend Performance

🌍 What Exactly Are Edge Functions?

🧠 Why Frontend Developers Should Care

⚡ 1. Reduced Latency = Faster Pages

🌐 2. Personalized Content Without Delays

🧱 3. Smarter Caching Logic

🔌 4. Lightweight API Orchestration

🔍 5. Core Web Vitals & SEO Wins

🛠️ Real-World Use Case (Vercel Example)

⚠️ Edge Functions Aren’t a Free Lunch

📈 Final Thoughts: The Edge Is the Future

🔗 Want to Learn More?

🚀 Web Performance Metrics: How to Improve FCP, LCP, and CLS

🕓 1. First Contentful Paint (FCP)

📸 2. Largest Contentful Paint (LCP)

📦 3. Cumulative Layout Shift (CLS)

🧪 Tools to Monitor and Fix

📈 Bonus: The Domino Effect of Optimization

💬 Final Thoughts

Exploring the Latest JavaScript Features in ESNext

🚀 1. await Outside of Async Functions (Top-Level Await)

✨ 2. ?. Optional Chaining

💬 3. ?? Nullish Coalescing Operator

📦 4. import.meta and Dynamic Importing

🧪 5. Record & Tuple (Stage 2/3)

🧵 6. Pattern Matching (Stage 3)

📏 7. Ergonomic Brand Checks for Private Fields

🔥 Final Thoughts

Best Practices for Handling Side Effects in React

🧠 What Is the `use()` Hook?

🛠️ Why Use `use()`?

1. Install `ws`

🚀 1. `await` Outside of Async Functions (Top-Level Await)

✨ 2. `?.` Optional Chaining

💬 3. `??` Nullish Coalescing Operator

📦 4. `import.meta` and Dynamic Importing

✅ 1. Use `useEffect` for Declarative Side Effects

✅ 6. Be Mindful of Async Functions in `useEffect`

1. `useState`: The Starting Point

2. `useReducer`: For Complex Logic