DEV Community: Stefania Barabas

Virtual Scrolling Architecture in React.js — Why Tables Lose Data and How to Maintain Visual State

Stefania Barabas — Fri, 27 Jun 2025 07:37:41 +0000

What happens when a team isn’t prepared to welcome those proactive questions or actions?

Stefania Barabas — Fri, 27 Jun 2025 07:36:31 +0000

10 Frontend Principles That Work in Any Framework

Stefania Barabas — Thu, 05 Jun 2025 14:13:16 +0000

New post on Stef's Dev Notes: https://stefsdevnotes.substack.com/p/reactjs-understanding-usecallback?r=aehwm

Stefania Barabas — Tue, 04 Mar 2025 13:19:11 +0000

#NextJS 🛟 : How Companies Optimize Caching for Scalability

Stefania Barabas — Wed, 12 Feb 2025 08:12:38 +0000

Hi there,

There's a new article in the ♻️ Knowledge seeks community 🫶 collection.

🚀 Get articles like this delivered straight to your inbox. Subscribe to Stef’s Dev Notes.

🌟 Introduction

Caching is a powerful technique for improving web performance and scalability in the context of modern web development. It reduces server load, speeds up content delivery, and ensures a better and smoother user experience.

Choosing the right caching strategy can be challenging, especially for high-traffic applications that require a balance between speed and data freshness.

🔄 Understanding Caching Strategies in Modern Web Apps

Before diving into case studies, let’s quickly cover the key caching strategies:

Server-side caching: Using Next.js features like Incremental Static Regeneration (ISR) and Server-Side Rendering (SSR) to control data freshness.
Client-side caching: Leveraging browser cache and Service Workers for faster repeat visits.
CDN caching: Storing static assets and API responses at edge locations for reduced latency.

🚀 Real-world use cases:

We’ll look at real-world use cases from companies such as Vercel and Airbnb in order to see how they optimize caching to handle millions of users efficiently. Even though, the second company mentioned is not necessarily using Next.js for its main platform, we will look at its caching strategy as an inspiration for future Next.js applications.

🎯 Case 1: Vercel - How Vercel optimizes caching for deployments and previews

🔍 Problem

Vercel hosts thousands of Next.js applications, needing:

Fast build times for developers deploying changes.
Efficient caching for assets and API responses.
Edge delivery to ensure global performance.

🔧 Solution

Vercel uses:

ISR (revalidate) to enable dynamic content updates without rebuilding everything.
CDN edge caching for pre-rendered pages and assets.
Serverless functions (cache: 'no-store') to avoid stale API data.

✅ Outcome

Faster deployments with instant cache invalidation.
Lower backend load since static pages are cached globally.
Optimized performance for dynamic and static sites.

🔑 Key Takeaway: Next.js with ISR and CDN caching enables fast updates while reducing backend stress.

🎯 Case 2: Airbnb - Ensuring Fresh Data for Real-Time Booking

🔍 Problem

Airbnb listings change in real time, and stale data can cause:

Double bookings when availability isn’t updated fast enough.
Delayed search results, frustrating users.
High backend traffic from constant API calls.

🔧 Solution

Airbnb optimized caching by using:

SSR (cache: 'no-store') → Ensures real-time availability updates.
Static caching (force-cache) for listing details and images.
CDN caching to distribute static assets globally.

✅ Outcome

Reduced booking conflicts.
Faster response times globally.
More scalable backend, as only dynamic data hits the server.

🔑 Key Takeaway: When real-time accuracy is critical, SSR + selective static caching is the best approach.

🌟 Takeaways for your future Next.js App

The best caching strategy depends on your data:

For frequently updated but non-critical data (like blog posts) → Use ISR (revalidate) + CDN caching.
For real-time updates that must be fresh (like transactions) → Use SSR (cache: 'no-store').
For static content (like images, assets) → Use force-cache + long TTLs.

Mixing these strategies ensures better performance, lower costs, and higher scalability.

Until next time 👋,

Stefania

P.S. Don’t forget to like, comment, and share with others if you found this helpful!

💬 Let’s talk:

What caching strategy does your app use?

Let’s discuss in the comments! 🚀

👋 Get in touch

You can find me on LinkedIn where I share updates about what’s next on Stef’s Dev Notes, as well as information about various tech events and other topics.

You can learn more about Frontend Development, JavaScript, Typescript, React, Next and Node.js in my newsletter: Stef’s Dev Notes.

#JS📔: Mastering Async/Await in Javascript

Stefania Barabas — Fri, 07 Feb 2025 14:59:54 +0000

Hi there,

I am back with a new article from the ♻️ Knowledge seeks community 🫶 collection.

🚀 Get articles like this delivered straight to your inbox. Subscribe to Stef’s Dev Notes.

In this article, we'll explore how async/await works, best practices for using it effectively, and common pitfalls to avoid.

Introduction

Asynchronous programming is an essential part of JavaScript, especially in modern web development where non-blocking operations like API calls and timers are common.

Over the years, JavaScript has evolved from callbacks to Promises, and now to async/await, which provides a more readable and maintainable way to handle asynchronous code.

What is Async/Await?

async/await is a syntactic improvement over Promises that makes asynchronous code look and behave more like synchronous code.

The async keyword is used to define a function that returns a Promise.
The await keyword pauses execution until the Promise is resolved, making it easier to work with asynchronous operations

This is a basic example where fetchData automatically returns a Promise. When we call it, we can use .then() to handle the resolved value.

But let’s see how await works in an example where we fetch data from an external API.

This time, we don’t use the .then() chains and instead we use await, which pauses the execution of the function until the API call completes.

🙋 Problems and solutions

Following the problem-solution approach, let’s tackle together some well known async/await problems and explore their optimal solutions. ⬇️

1. Performance Bottlenecks: Sequential vs. Parallel Execution

🔴 Problem: Fetching multiple API resources sequentially slows down the execution.

🟢 Solution: Use Promise.all() to fetch data in parallel.

Using Promise.all() will reduce overall response time by executing the requests concurrently.

2. Handling Multiple Requests Safely: Overloading the Server

🔴 Problem: Fetching too many resources at once (e.g., 100 API calls) can overwhelm the backend.

🟢 Solution: Use request throttling with p-limit.

What does throttling mean? Throttling is a technique used to limit the rate at which a function is called. Throttling transforms a function such that it can only be called once in a specific interval of time.

This prevents excessive concurrent requests, improving stability.

3. Dealing with Unresponsive APIs: Preventing Stuck Requests

🔴 Problem: API requests hang indefinitely if no response is received.

When making API calls, network requests can sometimes hang indefinitely due to server issues, bad internet connections, or backend timeouts. If you don’t set a timeout, your application might stay stuck waiting for a response that never arrives.

🟢 Solution: Implement timeouts with Promise.race().

JavaScript doesn’t have built-in timeout handling for fetch(), but Promise.race() allows us to race the API request against a timeout promise. The first promise that resolves or rejects will determine the outcome.

4. Handling Errors Properly: Avoiding Silent Failures

🔴 Problem: Unhandled async errors cause silent failures in production.

🟢 Solution: Use try/catch in order to handle async errors.

This makes error handling more intuitive and structured.

5. Debugging Async/Await Effectively

🔴 Problem: Tracing async function execution is challenging due to JavaScript’s event loop.

🟢 Solution: Use Chrome DevTools’ async call stack and structured logging.

In Chrome DevTools, go to the Sources tab, set breakpoints in async functions, and check the Call Stack section.

Enable async stack traces in Node.js using -async-stack-traces.

Use structured logging:

This makes debugging more efficient and traceable.

Conclusion

async/await makes asynchronous code more readable and maintainable.
Always handle errors with try/catch.
Use Promise.all() for parallel execution, but throttle when necessary.
Handle failures gracefully with Promise.allSettled() or timeouts with Promise.race().
Leverage DevTools and structured logging for better debugging.

By applying these solutions, you can write robust, scalable, and high-performance async JavaScript code. 🚀

Until next time 👋,

Stefania

💬 Let’s talk:

Have you encountered other async/await challenges?
Let’s discuss in the comments!

👋 Get in touch

You can find me on LinkedIn where I share updates about what’s next on Stef’s Dev Notes, as well as information about various tech events and other topics.

You can learn more about Frontend Development, JavaScript, Typescript, React, Next and Node.js in my newsletter: Stef’s Dev Notes.

#JS📔 - Removing Duplicates from an Array of Objects

Stefania Barabas — Thu, 30 Jan 2025 14:03:20 +0000

Hi there,

I've created a new collection of articles called - ♻️ Knowledge seeks community 🫶 - and it will be dedicated to sharing knowledge through the problem-solution-perfomance comparison approach.

🚀 Get articles like this delivered straight to your inbox. Subscribe to Stef’s Dev Notes.

Today’s topic is JS related: Removing Duplicates from an Array of Objects.

Introduction

In JavaScript, removing duplicates from an array of primitive values (numbers or strings) can be done easily using Set. However, when dealing with arrays of objects, things get tricky because objects are reference types.

This article explores multiple ways to efficiently remove duplicates from an array of objects, discussing their trade-offs and best use cases.

🚩 Problem

Let’s see the following example:

Why does it fail?

The issue with this solution is that Set only removes duplicates for primitive values (like numbers or strings), but the given list contains objects. When you pass an array of objects to new Set(), it does not remove duplicates because objects are reference types, and each object has a unique reference.

💡 Solutions

We will go through some use cases in order to explore different solutions.

Solution #1: Removing Duplicates by a Unique Key (`id`)

If objects have a unique identifier, we can use Map to remove duplicates efficiently.

This ensures that objects with duplicate id values are removed while keeping only the first occurrence.

Solution #2: Removing Duplicates Based on All Object Properties

Using Set() + JSON.stringify()
This solution is order-sensitive, meaning that all the objects should have the properties in the same order.

Solution #3: Handling Objects with Different Property Orders

Using Set() + JSON.stringify()as a sorted JSON string

Sorting object keys before stringifying ensures identical objects are treated the same.

Solution #4: Deep Comparison with Lodash (`_.isEqual`)

For complex objects, Lodash’s _.isEqual() performs a deep comparison.

Performance Comparison

Time complexity explanation - what are those values?

O(n) - Linear Time Complexity: The execution time grows linearly with the number of elements (n) in the array
Example: Iterating through an array once.
O(n²)- Quadratic Time Complexity: The execution time grows quadratically with the number of elements (n)
Example: A nested loop where every element is compared to every other element.

🗒️ If you want to know more about time and space complexity in Javascript, check this resource.

🏆 Challenge: Handling Arrays Inside Objects

Now, I’m challenging you to do a small exercise by solving the following scenario:

P.S. To ensure your solution meets the required time and space complexity, I recommend testing it with a larger dataset and observing its performance.

P.P.S. In addition to the solutions discussed in the article, I suggest experimenting with the structuredClone() algorithm.

Conclusion

Choosing the right approach depends on your dataset size and structure.

For large datasets, you should use Map or Set-based solutions for efficiency.
For deeply nested objects, you can go with Lodash _.isEqual(),but expect performance trade-offs, or with structuredClone().

💬 Let’s talk:

Have you encountered this issue in a real project? Which solution worked best for you? Let me know in the comments!

Until next time 👋,

Stefania

👋 Get in touch

You can find me on LinkedIn where I share updates about what’s next on Stef’s Dev Notes, as well as information about various tech events and other topics.

You can learn more about Frontend Development, JavaScript, Typescript, React, Next and Node.js in my newsletter: Stef’s Dev Notes.

🚀 Build Faster, Code Smarter: My Experience with GitHub Copilot 👉 Check it out here: https://lnkd.in/dR8rFErR #GitHubCopilot hashtag#AIInDevelopment hashtag#ProductivityHacks hashtag#SoftwareEngineering

Stefania Barabas — Mon, 27 Jan 2025 15:11:33 +0000

Building faster with Github Copilot

Stefania Barabas — Wed, 22 Jan 2025 17:30:38 +0000

The AI revolution is upon us, and I've been on a journey of discovery. This article will share some of my thoughts and findings from research and hands-on experimentation, with a particular sight on my experiences using GitHub Copilot.

Some context about Github Copilot

GitHub Copilot is an AI-powered coding assistant that helps developers write code faster by suggesting code completions and even entire functions as they type. It's like having an AI pair programmer working alongside you

How it works: Copilot analyzes your code, comments, and even the names of variables to predict the code you might want to write next.
What it does: It suggests code completions, generates entire functions, and can even help you refactor existing code.
Benefits: Increased coding speed, reduced repetitive tasks, and the opportunity to explore new coding techniques.

Good news! Back in December 2024, Github Copilot announced a new free tier for GitHub Copilot in VS Code by giving everyone access to 2,000 code completions and 50 chat messages per month, simply by signing in with their Github account. If you want to find more about this, check this link.

How do I build faster with Github Copilot?

While developing Frontend projects, Copilot assisted me by:

Creating common configuration files such as .gitignore, README.md, .env, DockerFile and others.
Creating custom components for specialized functionalities, such as a rich text renderer for specific content types.
Generating Fetch Logic: When integrating APIs and creating the application’s core functionality, Copilot can create fetch functions or Axios request, complete with error handling.
Code Simplification: When refactoring, Copilot might suggest cleaner, more efficient code snippets.
Learning: You can also ask questions about things that you don’t fully understand or you are not sure about it, and Copilot will give you an explanation with examples. Analyzing the suggestions provided by Copilot can be a valuable learning experience. It can help you understand different approaches to solving a problem and improve your own coding skills.

Will NPM remain relevant?

While developing dynamic content blocks in Strapi CMS for a Next.js project, I encountered a compatibility issue. The chosen rich text renderer library lacked support for React v19, which my Next.js project relied on. To avoid significant time investment on a workaround, I leveraged GitHub Copilot to build the required functionality. While this solution satisfied my needs and it gave me the chance to understand how easy it is to find a solution quickly, it prompted me to consider the potential long-term implications of relying heavily on AI-generated code instead of established libraries.

I believe that despite the rise of AI-powered tools like GitHub Copilot, NPM will remain relevant because it offers well-tested, optimized libraries that save time and handle edge cases better than AI-generated code. Libraries provide reusability, community support, and security updates that AI can’t match (or at least, not yet 😅). Copilot can complement NPM by helping developers integrate libraries efficiently, rather than replacing them.

Conclusion

GitHub Copilot is more than just an assistant; it’s a powerful friend in your development journey. By automating repetitive tasks, generating boilerplate code, and offering intelligent suggestions, it enables frontend developers to channel their energy into crafting innovative solutions and exceptional user experiences.

As for my question regarding NPM remaining relevant, I believe that while AI may reduce reliance on smaller utilities, robust libraries and frameworks will continue to be essential for complex, scalable projects.

Until next time 👋,

Stefania

P.S. Don’t forget to like, comment, and share with others if you found this helpful!

🫶 My Favorite Articles This Week:

The hottest programming language in 2025 by Fran Soto -Love the way this article tackles a real challenge in software development - "being able to translate thoughts to code".
Building React Components: Turning UI Designs Into React Components by Petar Ivanov - I found this article essential especially for those who are just embarking on a web development journey. It’s an essential skill to know how to efficiently split the design into components, which can set the base for growth and scalability.
How Do AirTags Work  by Neo Kim - Neo Kim’s articles about system design and how it gets implemented in products that we all use, are my favorite ones. I believe it offers the best way to understand system design implementation and how products such as AirTags, Shopify and many others rely on it.
Ship anything with success (a full framework) by Tiger Abrodi - This article presents the software development process as a comprehensive framework, where coding is only one aspect and other principles are playing a more significant role.

🚀 Latest discoveries

CodeRabbit - I’ve integrated CodeRabbit in one of my side projects and I have to say that I love it so far. It is a great code review tool powered by AI which provides valuable insights and suggestions for improving your code. I find it very useful especially while I’m working solo an a project.

Warp Terminal - This terminal is just something else! I love its design and the fact that I feel like I can do everything with it.

👋 Get in touch

You can find me on LinkedIn where I share updates about what’s next on Stef’s Dev Notes, as well as information about various tech events and other topics.

You can learn more about Frontend Development, JavaScript, Typescript, React, Next and Node.js in my newsletter: Stef’s Dev Notes.

Server-Side Rendering vs. Static Site Generation in the Modern Web

Stefania Barabas — Thu, 16 Jan 2025 08:39:44 +0000

Hello everyone, 🤗

Today, I’ll delve into Server-Side Rendering (SSR) and Static Site Generation (SSG) in Next.js. These concepts presented a significant learning curve for me, but through lots of hands-on experience and numerous side projects, I’ve finally grasped some of their core principles.

As web development progresses, choosing between SSR and SSG can be essential for building efficient and scalable applications. Frameworks like React and Next.js provide excellent support for both, each with its own strengths.

What is Server-Side Rendering (SSR)?

Server-Side Rendering generates HTML for a page on the server at runtime, based on the user’s request. This ensures that the user receives a fully rendered page upon loading, improving SEO and providing faster Time to First Byte (TTFB) compared to traditional client-side rendering.

Key Benefits:

Dynamic Content: Ideal for pages that require frequently updated or personalized data.
SEO Optimization: Search engines can crawl fully rendered pages easily.

Example in Next.js (app directory, v13 and later):

import { getTeamMembers } from '@/app/api/strapi';
import TeamMemberCard from '@/components/team-member-card';
import React from 'react'

const Team = async () => {
  const teamMembers = await getTeamMembers()

  return (
    <div>
      <h1 className='text-xl font-semibold mb-4'>Our Team</h1>
      <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8'>
        {teamMembers.data.map((member: TeamMemberProps) => (
          <TeamMemberCard key={member.documentId} {...member}/>
        ))}
      </div>
    </div>
  )
}

export default Team

In this example, teamMembers is fetched server-side using the new app directory features and passed to the component.

Downsides of SSR:

Slower Initial Load Time: Each request to the server requires rendering the page on the fly, which can introduce latency, especially if the server is slow or under heavy load.
Higher Server Load: Since the server generates the page on each request, it can become a bottleneck. High traffic can result in performance degradation or even downtime if the server can’t handle the load.
Less Caching Efficiency: While caching strategies can help mitigate performance issues, SSR doesn’t benefit from the same level of optimization as SSG, where pages can be cached at the CDN level.
State Management Challenges: Managing server-side state (especially when interacting with databases or APIs) can become more complex with SSR, and it may involve additional synchronization between the server and client.

What is Static Site Generation (SSG)?

Static Site Generation creates HTML at build time, producing static files that can be served by a Content Delivery Network (CDN). This approach is highly performant for pages where content does not change frequently.

Key Benefits:

Speed: Pre-rendered pages ensure ultra-fast load times.
Scalability: Static files can handle high traffic with minimal server resources.

Example in Next.js (app directory, v13 and later):

import { getTeamMemberDetails, getTeamMembers } from '@/app/api/strapi';
import { BlockRenderer } from '@/components/blocks';

export const generateStaticParamas = async () => {
    const teamMembers = await getTeamMembers()
    if (!teamMembers) return [];
    return teamMembers.map((item: TeamMember) => ({ slug: item.slug }));
}

const TeamMember = async ({ params }: {params: Promise<{ slug: string }> }) => {
  const slug = (await params).slug

  if(!slug) return <p>No member found</p>
  const teamMember = await getTeamMemberDetails(slug)

  if (!teamMember) return <p>No member found</p>;

  return (
      <div className='bg-gray-200 container mx-auto w-full rounded-xl py-7 px-8 m-6'>
        {teamMember.blocks?.map((block: TeamPageBlock) => (
          <BlockRenderer key={block.__component} block={block}/>
        ))}
      </div>
  )
}

export default TeamMember

Here’s a brief explanation:

generateStaticParams: This function fetches the list of team members and returns an array of parameters (slugs) that will be used to generate static pages for each team member, while the component fetches the details of a team member based on the slug and renders the content. Since it uses generateStaticParams, it will be statically generated at build time.

This setup ensures that the pages for each team member are pre-rendered and served as static HTML, which is the essence of SSG.

Downsides of SSG:

Longer Build Times: For large sites with a high number of pages, generating static pages can be time-consuming. This can lead to delays during deployment, especially if the content updates frequently.
Limited to Non-Dynamic Content: SSG is best suited for content that doesn’t change often or requires real-time interaction. Dynamic content is challenging to integrate and may require additional workarounds like client-side JavaScript or hybrid approaches (e.g., ISR).
Stale Content: Static pages are generated at build time, which means any content updates won’t reflect until the next build and deployment. This can be problematic if the website relies on real-time or frequently changing data.
Difficult to Handle User-Specific Content: If your application requires personalized content (like user dashboards, authenticated areas, etc.), SSG is less ideal, since static pages aren’t tailored to individual users.
Dependency on CDNs: SSG relies heavily on CDNs for delivering static content efficiently. If there’s an issue with the CDN, the site might experience downtime or slowdowns.
Choosing Between SSR and SSG

Use SSR when:

Content changes frequently and must be personalized.
SEO is critical, and the data needs to be up-to-date.
Example: E-commerce product pages with real-time inventory.

Use SSG when:

Content is largely static or updated at predictable intervals.
Scalability and performance are top priorities.
Example: Marketing websites or blogs.

Hybrid Approaches

Next.js also supports hybrid rendering, allowing developers to combine SSR and SSG within the same application. For example, static generation can be used for blog pages, while server-side rendering is used for a user’s dashboard.

Conclusion

Understanding the strengths and limitations of SSR and SSG is essential for creating efficient web applications. By leveraging frameworks like Next.js, developers can choose the right approach — or even a hybrid one — to meet their application’s specific needs. This flexibility ensures both optimal performance and a seamless user experience.

Until next time 👋,

Stefania

P.S. Don’t forget to like, comment, and share with others if you found this helpful!

👋 Get in touch

You can find me on LinkedIn.

You can learn more about Frontend Development, JavaScript, Typescript, React, Next and Node.js in my newsletter: Stef’s Dev Notes.

DEV Community: Stefania Barabas

Virtual Scrolling Architecture in React.js — Why Tables Lose Data and How to Maintain Visual State

What happens when a team isn’t prepared to welcome those proactive questions or actions?

10 Frontend Principles That Work in Any Framework

New post on Stef's Dev Notes: https://stefsdevnotes.substack.com/p/reactjs-understanding-usecallback?r=aehwm

#NextJS 🛟 : How Companies Optimize Caching for Scalability

🌟 Introduction

🔄 Understanding Caching Strategies in Modern Web Apps

🚀 Real-world use cases:

🎯 Case 1: Vercel - How Vercel optimizes caching for deployments and previews

🔍 Problem

🔧 Solution

✅ Outcome

🎯 Case 2: Airbnb - Ensuring Fresh Data for Real-Time Booking

🔍 Problem

🔧 Solution

✅ Outcome

🌟 Takeaways for your future Next.js App

💬 Let’s talk:

Other articles from the ♻️ Knowledge seeks community 🫶 collection: https://stefsdevnotes.substack.com/t/knowledgeseekscommunity

👋 Get in touch

#JS📔: Mastering Async/Await in Javascript

Introduction

What is Async/Await?

🙋 Problems and solutions

1. Performance Bottlenecks: Sequential vs. Parallel Execution

2. Handling Multiple Requests Safely: Overloading the Server

3. Dealing with Unresponsive APIs: Preventing Stuck Requests

4. Handling Errors Properly: Avoiding Silent Failures

5. Debugging Async/Await Effectively

Conclusion

💬 Let’s talk:

👋 Get in touch

#JS📔 - Removing Duplicates from an Array of Objects

Introduction

🚩 Problem

Why does it fail?

💡 Solutions

Solution #1: Removing Duplicates by a Unique Key (id)

Solution #2: Removing Duplicates Based on All Object Properties

Solution #3: Handling Objects with Different Property Orders

Solution #4: Deep Comparison with Lodash (_.isEqual)

Performance Comparison

🏆 Challenge: Handling Arrays Inside Objects

Conclusion

💬 Let’s talk:

👋 Get in touch

🚀 Build Faster, Code Smarter: My Experience with GitHub Copilot 👉 Check it out here: https://lnkd.in/dR8rFErR #GitHubCopilot hashtag#AIInDevelopment hashtag#ProductivityHacks hashtag#SoftwareEngineering

Building faster with Github Copilot

Some context about Github Copilot

How do I build faster with Github Copilot?

Will NPM remain relevant?

Conclusion

🫶 My Favorite Articles This Week:

🚀 Latest discoveries

👋 Get in touch

Server-Side Rendering vs. Static Site Generation in the Modern Web

What is Server-Side Rendering (SSR)?

What is Static Site Generation (SSG)?

Use SSR when:

Use SSG when:

Hybrid Approaches

Conclusion

👋 Get in touch

Solution #1: Removing Duplicates by a Unique Key (`id`)

Solution #4: Deep Comparison with Lodash (`_.isEqual`)