DEV Community: Abhishek Pandey

React Server Components: What Problems Do They Actually Solve?

Abhishek Pandey — Thu, 07 Aug 2025 20:36:00 +0000

If you’re curious about React Server Components (RSCs) and why everyone’s talking about them, this post is for you. Let’s break it down in plain English—no jargon, just the real-world problems RSCs help with and why they matter for modern web apps.

🧱 The Old Problems: Slow Loads & Big Bundles

Traditionally, React web apps fell into two camps:

⚙️ Client-Side Rendering (CSR)

Everything runs in your browser.

✅ Super interactive.

❌ Slow initial loads — your device has to download and process a big JavaScript bundle before showing anything useful.

🖥️ Server-Side Rendering (SSR)

The server sends HTML to the browser.

✅ Faster first content paint.

❌ As the app grows, SSR can become a bottleneck—servers do more work and scaling becomes tricky.

Both approaches have tradeoffs. For years, developers bounced between them trying to balance speed, scalability, and interactivity.

🚀 Enter RSCs: A New Way

React Server Components let you split your app into two parts:

Server Components: Run on the server. Handle heavy lifting like data fetching, layout generation, and processing logic.
Client Components: Run in the browser. Handle interactivity like buttons, inputs, modals, etc.

Now, your app can stream parts of the page as soon as they’re ready.

✨ The Result?

Faster loads — users see content faster, even before all JavaScript is loaded.
Smaller bundles — you only ship code for interactive parts.
More scalable — no need to rerender everything on the server all the time.

🛠️ What Does This Actually Fix?

✅ Faster initial loads
✅ Improved SEO — crawlers see content sooner
✅ Efficient code splitting — ship less JS
✅ Reduced server load — fewer server round-trips
✅ No more waterfall problem — users don’t wait for extra data-fetching passes

Plus, RSCs unlock new patterns for data fetching, performance, and rendering strategies.

Frameworks like Next.js are already integrating RSCs under the hood, giving you the benefits with minimal manual setup.

🔁 The Waterfall Problem

In traditional SSR or CSR workflows, there’s often a “waterfall” effect:

The server sends the initial HTML.
The browser loads JavaScript.
The app re-runs client-side code.
It fetches data.
Only then does the UI update again.

This multi-step delay slows down how fast users see real, useful content.

React Server Components solve this by:

Fetching data during server rendering.
Sending a streamed response with content ready-to-show.
Avoiding the “double-render” client-side fetch dance.

So instead of waiting for everything twice, the user just sees content — fast.

⚠️ Are There Downsides?

Yep. Nothing’s perfect:

You need to think about what runs where (server vs. client).
Managing state and side effects across boundaries can get tricky.
Migrating an existing app might mean rearchitecting parts of it.

But for complex or performance-critical apps, the tradeoff is usually worth it.

📚 Want to Learn More?

Here are some great resources to go deeper:

💡 TL;DR

React Server Components help build faster, lighter, and more scalable React apps by:

Letting you divide work between the server and client
Only shipping what’s needed
Showing users content ASAP

They’re not magic—but they solve real performance headaches for today’s web.

Happy coding! 👨‍💻👩‍💻

Have thoughts or questions? Drop them in the comments below!

7 Upcoming JavaScript Features to Watch in 2025 🚀

Abhishek Pandey — Sun, 03 Aug 2025 11:26:32 +0000

JavaScript keeps evolving, and 2025 is shaping up to be an exciting year! 🚀 Whether you're a frontend developer, full-stack engineer, or just a language nerd, these upcoming ECMAScript features are worth keeping an eye on.

Here are 7 upcoming JavaScript features that are either in Stage 3 or getting close—meaning they're likely to become part of the language very soon.

1. 🔗 Pipeline Operator (`|>`)

Imagine chaining functions like a Unix pipe:


const double = x => x * 2;
const square = x => x * x;

let value = 5

const result = value
  |> double  // 5 * 2 = 10
  |> square  // 10 * 10 = 100
  |> String; // convert 100 into String "100"

the code flows from left to right.

the same above code we write like this in javascript as of now

 const result = String(square(double(value)));

✅ Cleaner than nested function calls
🚧 Stage: 2/3 (depends on proposal version)

📖 Proposal: https://github.com/tc39/proposal-pipeline-operator

2. 🧩 Pattern Matching (Like switch on steroids)

Pattern matching is a way to compare a value (like an object) against several shapes or patterns — and run different code depending on what pattern it matches:

match (input) {
  { type: "success", data } => handleSuccess(data),
  { type: "error", message } => handleError(message),
  _ => handleUnknown()
}

the above code work like this:- lets say you have an object called input. This match blocks which satisfy the criteria.
If input is an object like {type:"success", data:...} it will call the handleSuccess with data.
if nothing is matched it will call handleUnknown.

✅ Great for handling JSON APIs or discriminated unions
🚧 Stage: 3

📖 Proposal: https://github.com/tc39/proposal-pattern-matching

3. 🔐 Built-in Observable

JavaScript may soon include a native Observable (finally!) to work better with reactive programming:
An Observable is a way to handle streams of data over time — like events, user inputs, or async data — in a clean, reactive way.

const obs = new Observable((subscriber) => {
  subscriber.next("Hello");
  subscriber.complete();
});

What’s going on in above code:
new Observable(...) creates a new stream of data.

The function you pass gets a subscriber object.

You call subscriber.next(value) to send a value ("Hello") to whoever is listening.

You call subscriber.complete() to say "I’m done sending values."

✅ Works well with reactive UI frameworks
🚧 Stage: 1 (early, but gaining traction)

📖 Proposal: https://github.com/tc39/proposal-observable

4. 📦 Records and Tuples (Immutable Data Structures)

JavaScript is introducing Records and Tuples — new data structures that provide deep immutability and value-based equality.

What are Records and Tuples?

Records are like immutable objects: once created, their properties cannot be changed.
Tuples are like immutable arrays: once created, their elements cannot be changed.

This means you can safely share these data structures across your app without worrying about accidental changes.

Why use them?

Deep immutability: The data cannot be altered anywhere.
Value equality: Two Records or Tuples with the same content are considered equal (===), unlike normal objects or arrays.
This makes comparisons and caching much simpler and more predictable.

Syntax Examples

const person = #{ name: "Alice", age: 30 };  // Record
const point = #[10, 20];                      // Tuple

The #{ ... } syntax creates a Record.

The #[ ... ] syntax creates a Tuple.

✅ Useful for safer data structures
🚧 Stage: 2

📖 Proposal: https://github.com/tc39/proposal-record-tuple

5. 🗂️ Array Grouping

Quickly group items by a property:

const grouped = Object.groupBy(users, user => user.role);

✅ Simplifies data transformation
🚧 Stage: 3

📖 Proposal: https://github.com/tc39/proposal-array-grouping

6. ⏱️ Temporal API (Better Dates and Times)

JavaScript is introducing the Temporal API, a modern and much-improved way to handle dates and times — designed to fix the many problems with the old Date object.

Why use Temporal?

More precise and reliable handling of time zones, calendars, and formatting.
Immutable objects that avoid the quirks and bugs of Date.
Clearer APIs for common date and time operations.

Example usage:

const now = Temporal.Now.instant();                 // current precise timestamp
const birthday = Temporal.PlainDate.from("1995-08-03");  // a date without time

What do these do?

Temporal.Now.instant() gives you the current moment in time with nanosecond precision.
Temporal.PlainDate.from() creates a date-only object (no time or timezone), great for birthdays or anniversaries.

✅ Handles time zones, durations, calendars
🚧 Stage: 3

📖 Proposal: https://github.com/tc39/proposal-temporal

7. 🔄 Set Methods: `.union()`, `.intersection()`, `.difference()`

JavaScript is finally adding built-in methods for common set operations — making it easier to work with sets directly!

What are these methods?

.union() — Combines two sets, returning a new set with all unique elements from both.
.intersection() — Returns a new set with only the elements common to both sets.
.difference() — Returns a new set with elements in the first set but not in the second.

Example:

const a = new Set([1, 2, 3]);
const b = new Set([3, 4, 5]);

console.log(a.union(b));        // Set {1, 2, 3, 4, 5}
console.log(a.intersection(b)); // Set {3}
console.log(a.difference(b));   // Set {1, 2}

✅ Native, readable, and efficient
🚧 Stage: 3

📖 Proposal: https://github.com/tc39/proposal-set-methods

✨ Final Thoughts

JavaScript is evolving fast. Staying aware of what’s coming helps you write future-ready code and adopt new patterns early.

Lets not optimize your optimization

Abhishek Pandey — Thu, 31 Jul 2025 21:14:18 +0000

New developers often hear or read that useCallback and useMemo are tools to improve the performance of a React application.

As a result, they start using them everywhere, hoping to optimize their app. But this usually leads to cluttered, overly verbose code, filled with complex dependency arrays—and ironically, it often hurts more than it helps.

In this post, we’ll explore what useCallback and useMemo actually do, when they’re useful, and—more importantly—when to avoid them.

Lets learn about what useCallback and useMemo do:-

useCallback:- "remembers" a function which you passed to it, so React doesn’t make a brand new version of that function every time your component updates.

const handleClick = useCallback(() => {
  console.log("Button clicked");
}, []);

In above snippet, handleClick will remain the same across renders as long as the dependency array ([]) doesn't change. Without useCallback, a new function would be created on every render.

useMemo:- lets React remember (or "cache") the result of a calculation so it doesn’t redo it every time your component updates.

const expensiveValue = useMemo(() => {
  return computeHeavyValue(input);
}, [input]);

Here, computeHeavyValue(input) runs only when input changes. If input is the same on the next render, React reuses the cached result instead of recalculating.

Doing these things(remebering of your values when props are changed) comes with a cost.

The Hidden costs of `useCallback` and `useMemo`

The core idea behind using useCallback and useMemo is that memoization isn't free—it's a trade-off. You're spending extra CPU cycles and memory to cache a function or value, with the hope that it will save more expensive computations during future renders. But if not used wisely, the cost of memoizing can outweigh the benefits.

1. memory overhead:- This is the most direct cost. When you use useCallback or useMemo, React must store the memoized function or value in memory between renders.

2. CPU overhead:- Before React can decide whether to use the cached value or re-run the function React must iterate through the dependencies array and perform a shallow comparison of each item with the values from the previous render.

3. Readability and Maintenance:- Memoizing every function or value creates verbose code that is difficult to read and understand. These hooks force developers to manage dependency array carefully.Forgetting or adding a new dependecy can create a subtle bug.

const memoizedFn = useCallback(() => {
  doSomething(a, b);
}, [a]); // Missing b in dependencies — can cause bugs

When not to optimize

Let’s look at a case where using useCallback is unnecessary:

const logEvent = useCallback(() => {
  analytics.track('button_click');
}, []);

<button onClick={logEvent}>Click me</button>

In this example, the logEvent function is simple and is not passed to any memoized child components.
Therefore, using useCallback provides no real benefit and only adds unnecessary complexity.

const UserInput = React.memo(({ onChange }) => {
  const handleChange = useCallback(event => {
    onChange(event.target.value);
  }, [onChange]);

  return <input onChange={handleChange} />;
});

In above example handleChange is always created based on onChange, which is the only prop so when the parent re-renders and passes a new onChange prop, both the React.memo and useCallback will trigger a re-render and recreate handleChange. If onChange hasn't changed, React.memo will prevent re-render, so handleChange isn't recalculated either — even without useCallback. So here useCallback is not used properly.

const _debounce = (func, delay) => { /* returns debounced function */ };

const makeApiCall = (e) => { console.log("Making an API call"); };

const debounce = useCallback(_debounce(makeApiCall, 2000), []);

<input onChange={e => debounce(e.target.value)} />

Despite using useCallback, the function is redefined each time (because the function call is inlined), so all the memoization is pointless and adds CPU cost and memory use.

Now let’s explore at the cases where using useMemo is unnecessary:

Memoizing small calculation

const filteredTodos = useMemo(() => {
  return todos.filter(todo => todo.completed);
}, [todos]);

Why it's overkill:- the .filter here is very fast, and inline use of it would be more readable as well. useMemo adds memory overhead and dependency complexity here.

Memoizing a JSX Tree

const todoRows = useMemo(() => {
  return todos.map(todo => <ToDoRow key={todo.id} todo={todo} />);
}, [todos]);

useMemo just stores a value — but React will still re-render each child component unless they're memoized with React.memo.

When to Optimize

useCallback, useMemo can be powerful tools—but only when used in the right situations.

Optimizing Expensive Computation with useMemo-

const filteredUsers = useMemo(() => {
  // Expensive filtering logic
  return users.filter(user => user.name.toLowerCase().includes(searchTerm.toLowerCase()));
}, [users, searchTerm]);

In the example above, useMemo memoizes the filtered list of users, so the filtering function only runs again if either the users array or the searchTerm changes. This optimization can significantly improve performance by avoiding unnecessary recalculations on every render, keeping your UI responsive even with large datasets.

Stable Callback for Child Components with useCallback-

const handleUserSelect = useCallback((userId) => {
  // Logic for selecting a user
  setSelectedUserId(userId);
}, [setSelectedUserId]);

In this example, useCallback memoizes the handleUserSelect function so that its reference only changes if setSelectedUserId changes. This stability prevents child components relying on handleUserSelect from re-rendering unless truly necessary, improving rendering efficiency and overall app performance.

useCallback and useMemo Together for Linked Operations-

const filteredUsers = useMemo(() => {
  return users.filter(user => user.name.toLowerCase().includes(searchTerm.toLowerCase()));
}, [users, searchTerm]);

const handleUserSelect = useCallback((userId) => {
  setSelectedUserId(userId);
}, [setSelectedUserId]);

return (
  <UserList users={filteredUsers} onUserSelect={handleUserSelect} />
);

useMemo memoizes the filtered list of users to avoid recalculating the filtered array on every render unless users or searchTerm changes. useCallback memoizes the handleUserSelect function to keep its reference stable, preventing unnecessary re-renders in child components that receive it as a prop.

By combining these two hooks, you ensure that the child component <UserList> receives both stable data and stable callbacks, which helps React skip unnecessary renders, improving performance and keeping your UI responsive.

Summary

useCallback and useMemo are powerful hooks that can boost React app performance but only when applied thoughtfully. Overusing them leads to complex, harder-to-maintain code and sometimes even worse performance.

Always ask yourself:

Is the function or value expensive to compute?
Is it passed to memoized child components that depend on stable references?
Will memoization reduce unnecessary renders or recalculations meaningfully?

If the answer is yes, useCallback and useMemo can be great allies. If not, keeping your code simple and clear often serves you better.

Remember, premature optimization is the root of all evil—optimize only when you know the problem exists!

03 Higher Order Functions in Javascript

Abhishek Pandey — Sun, 19 May 2024 08:44:34 +0000

Higher Order Function

A Higher order function is a function that either can accept another function as an argument or return a function as a result.

Introduction:

Higher-order functions are a fundamental aspect of JavaScript, offering immense flexibility and code reusability by allowing functions to be treated as first-class citizens. In this blog, we'll explore what higher order functions are, why they are important, and how they can be used effectively in your code.
Javascripts Array.prototype.map and Array.prototype.filter they both are Higher order function. Lets explore why do we need Higher order function.

let's write a function that filter words that starts with word H.

function startWithH (words){
  const containsCharWithH = [];

  for(let i=0, {length} = words; i< length; i++ ){
    const word = words[i];
    if(word.startsWith('H')){
        containsCharWithH.push(word)
    }
  }
  return containsCharWithH;
}

console.log(startWithH(['Hack', 'Recursion', 'HOF', 'Currying', 'Handshake', 'Heap', 'Array'])) // ['Hack', 'HOF', 'Handshake', 'Heap']

and now lets filter all the words whose length is less than or equal to 4.

function wordsWithLessThanChar4(words){
  const containsCharWithH = [];

  for(let i=0, {length} = words; i< length; i++ ){
    const word = words[i];
    if(word.length <=4){
        containsCharWithH.push(word)
    }
  }
  return containsCharWithH;
}

console.log(wordsWithLessThanChar4(['Hack', 'Recursion', 'HOF', 'Currying', 'handshake', 'Heap', 'Array']))

As we can see both of these above functions are almost same, so we can refactor this with Higher order function.
Javascript has first class functions just like numbers, strings or objects, functions also can be

Assigned as identifier.
Passed as arguments
Returned from functions.

due to these qualities abstractions are made easier with functions.

Refactoring with Higher-Order Functions

let's write a reduce function which takes a function and return accumulated result for the given array.

function reduce(reducerFn, acc, arr){
  let initial = acc;
  for(let i=0, {length} = arr; i< length; i++) {
    acc = reducerFn(acc, arr[i])
  }
  return acc;
}

now if we want to get product of 0-10 then we can get easily with this reduce HOF.

reduce((acc, curr) => acc * curr, 0, [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]) // 3628800

now lets implement a filter function which is most useful function which will help us to abstract logic for both the above functions startWithH and wordsWithLessThanChar4

const filter = (predicateFn , arr) => {
  // referring to the above reduce function
  return reduce((acc, curr) => {
    return predicateFn(curr) ? acc.concat([curr]) : acc
  }, [], arr)
}

filter function is a higher-order function because it takes another function, predicateFn, as one of its inputs. This predicateFn function is like a test that decides whether each item in the array should be included in the final result. The filter function then uses this predicateFn to check each item in the array. If the item passes the test (returns true), it's added to the result. If not, it's skipped.
In the above filter function everything is shared except the predicateFn, that's gets passed as an Argument.

now lets implement startWithH with these utility functions.

const startWithH = words => filter(
  word => word.startsWith('H'), 
  words
)
startWithH(['Hack', 'Recursion', 'HOF', 'Currying', 'handshake', 'Heap', 'Array']) // ['Hack', 'HOF', 'Heap']

and lets rewrite this wordsWithLessThanChar4 function.

const wordsWithLessThanChar4 = words => filter(
  word => word.length <=4,
  words
)
wordsWithLessThanChar4(['Hack', 'Recursion', 'HOF', 'Currying', 'handshake', 'Heap', 'Array']) // ["Hack", "HOF", "Heap"]

filter can work on numbers as well, this utility function is smart enough to work on different data types.

Conclusion

higher-order functions are a fundamental aspect of JavaScript that offer immense flexibility and code reusability by allowing functions to be treated as first-class citizens. By accepting or returning other functions, they enable powerful abstractions and functional programming paradigms.

Happy Learning!!!

02 Pure Functions in Javascript

Abhishek Pandey — Wed, 15 May 2024 05:30:05 +0000

What is Function

A function is the process which takes some input called arguments and produce some output called return values.
Function may serve different purposes like Procedures and I/O.

Procedures

A function may be called to perform a sequence of steps, the sequence is known as procedures, A function should return something, by default a function return undefined, So Programming in this style called Procedural Programming.
For example:

function multiplyNumbers(x=1, y=1) {
  const value = x * y;
  console.log(value)
}

The above code is an example of Procedure the reason behind this is that it returned nothing from function body.

I/O

some functions exist to communicate with other parts of system such as screen, storage etc.

function alertUser(){
  alert("Welcome to the world of Functions")
}

What are Pure functions

A Pure function is a function that always gives the same output for the same input and doesn't do something extra.

Pure function is all about mappings, for each input there exist an output.
For example slice and splice they both are array methods but serves different purposes.
Slice is pure because it returns the same output every time if same input is passed.

const vowels = ['a', 'e', 'i', 'o', 'u'];

vowels.slice(0, 3) // ['a', 'e', 'i']
vowels.slice(0, 3) // ['a', 'e', 'i']
vowels.slice(0, 3) // ['a', 'e', 'i']

Splice method will changes the contents of an array by removing or replacing the existing elements in the array.

vowels.splice(0, 3) // ['a', 'e', 'i']
vowels.splice(0, 3) // ['o', 'u']
vowels.splice(0, 3) // []

In functional Programming we dont use methods like splice which mutates the data.

let's see another example to understand it better.

let minAgeForVote = 18;

const canVote = voterAge => voterAge >= minAgeForVote

the above code snippet is impure because minAgeForVote is mutable variable i.e. minAgeForVote can be modified later in the program which may provide unwanted result.
To fix this we can do something like this

function canVote(voterAge) {
  const minAgeForVote = 18;
  return voterAge >= minAgeForVote;
}

what are the Side Effects

A side effect is a change of system state or observable interaction with the outside world that occurs during the calculation of a result.

Brian Lonsdorf 1

Side effects are list are so long but majorly are

Writing on Screen
Querying a DOM
Writing in console
Making an Http Request
Mutations.

Application of Functional Purity

1. Testable:- Pure functions are very easy to test, because we do not need to mock anything, we just give input and expect the output for the same.

2. Parallel Code:- Pure functions are completely independent of outside state. Their independent nature makes them great candidate for Parallel processing across many CPU's.

3. Referential Transparency:- You can replace a function call with its result without changing the behaviour of your program. So if a function consistently return the same output for the same input and doesnt cause any side effect in your code called Referential Transparent.

    function add(x, y) {
      return x + y;
    }

    const result1 = add(3, 5);
    const result2 = add(3, 5);

    console.log(result1); //  8
    console.log(result2); //  8

In this example, the add function is referentially transparent because it doesn't have any side effects. It always returns the same output (x + y) for the same inputs (x and y), making it safe to replace function calls with their return values without affecting the program's behavior.

Pure functions are predictable, easy to test, and enable better code maintainability and reasoning. They promote immutability and functional programming principles by avoiding changes to global state and ensuring that function calls are deterministic and independent of external factors.

Happy Learning!!

01 Functional Programming in Javascript.

Abhishek Pandey — Sat, 11 May 2024 12:14:12 +0000

I am going to write a series of blogs on functional Programming in Javascript.

Javascript has the most important features needed for Functional Programming.

1. First class function- In JavaScript, you can treat functions like regular data. This means you can pass functions around as if they were just variables, give them as inputs to other functions, get them back as outputs from functions, and even store them in variables or inside objects. This feature lets you create what are called "higher-order functions," which can do cool things like filling in some function arguments for you (partial application), breaking functions into smaller parts (currying), and combining functions together (composition).

2. Anonymous Function- Arrow function or lambda function it makes easier to work with the Higher order function.

 a => a * a

3. Closure- Closures are created at a function creation time. Closures are how partial applications get their fixed Arguments.

Whats Javascript missing to be a Functional Programming

JavaScript is a multi-paradigm language, meaning it supports programming in different styles. However, the disadvantage of this is that imperative programming, for example, tends to imply that almost everything needs to be mutable.

const foo = {
  bar : 'baz'
}
foo.bar = 'wow'

the object properties are mutable so that object can modify them.
1. Purity- In some Functional Programming language purity is enforced by default, any expressions which contains side-effects are not allowed.

2. Immutability- In some fp language you can't mutate the data directly, you have to return a data each time.

In upcoming blogs we will discuss about the Pure functions in depth.