DEV Community: Bidisha Das

Computed and Watchers in Vue: A Deep Dive

Bidisha Das — Sun, 09 Nov 2025 10:12:51 +0000

In Vue 2, computed properties and watch functions are key tools in the reactivity system. Understanding their internals and appropriate use cases is crucial to writing efficient, predictable applications.

Vue 2 Reactivity System (Brief Primer)

Vue 2 uses getter/setter interception via Object.defineProperty to make data reactive. When a component renders or computes a value, Vue tracks which properties were accessed. If those properties change, Vue knows which components or functions to re-run.

This tracking mechanism powers both computed and watch.

`computed`: Lazy, Cached Derivations

Purpose

To derive state from other reactive properties without side effects, and cache the result until a dependency changes.

Internal Behavior

Lazily evaluated: only recalculates when accessed.
Memoized: tracks dependencies and only updates when they change.
Purity enforced: should have no side effects or async logic.

Prototype Note

Computed properties are defined on the component’s prototype, so they don’t appear as own properties:

vm.hasOwnProperty('computedProp') // false

Arguments Are Not Allowed

computed: {
  val(flag) { ... } // ❌ Not allowed
}

If you need to pass arguments, use a method instead:

methods: {
  val(flag) {
    return flag === 1 
      ? this.someDataProperty * this.otherVariable 
      : this.someDataProperty * 5;
  }
}

Example: Basic Sum

export default {
  data() {
    return {
      a: 2,
      b: 3
    };
  },
  computed: {
    sum() {
      console.log('Computed sum');
      return this.a + this.b;
    }
  }
}

Real-World Example: Product Price Calculation

computed: {
  finalPrice() {
    return this.basePrice * (1 + this.taxRate) - this.discount;
  }
}

Real-World Example: Reducing Expression Length

computed: {
  deeplyNestedValue() {
    return this.$store.state.module.submodule.deepValue;
  }
}

This simplifies access and ensures reactivity when store updates.

Points to remember

Try to avoid mutating computed property as much as possible. Instead of mutating the computed property, you should try to update the data field which triggers new computations and invokes the getter.

A computed property behaves like a pure function: it always returns the same output for the same input, and it only re-evaluates when one of its reactive dependencies changes.

In contrast, a method is a regular function that can be called any number of times—regardless of whether its dependencies have changed. It's not cached, doesn't need to be pure, and doesn't create any new reactive data on its own.

`watch`: Reactive Side Effects

Purpose

To observe changes to specific reactive properties and trigger imperative code, including side effects or async logic.

Internal Behavior

Eager: runs handler when dependencies change.
Can be async.
Supports deep and immediate options.

Arguments

The handler receives the new and old value:

watch: {
  myVar(newVal, oldVal) {
    console.log('changed from', oldVal, 'to', newVal);
  }
}

Real-World Example: Async API on Property Change

watch: {
  userId: {
    immediate: true,
    handler(newVal) {
      this.fetchUser(newVal);
    }
  }
},
methods: {
  async fetchUser(id) {
    const res = await fetch(`/api/users/${id}`);
    this.userData = await res.json();
  }
}

Real-World Example: Debounced Search API

watch: {
  searchQuery(newQuery) {
    clearTimeout(this._searchTimeout);
    this._searchTimeout = setTimeout(() => {
      this.fetchSearchResults(newQuery);
    }, 300);
  }
}

Real-World Example: Reacting to Deep Object

watch: {
  settings: {
    handler(newVal) {
      console.log('Settings updated:', newVal);
    },
    deep: true
  }
}

Real-World Example: Routing on Condition

watch: {
  somethingSelected(val) {
    if (val) this.$router.push('/next-step');
  }
}

Real-World Example: Fetch Data on Filter Change

watch: {
  filters: {
    handler(newFilters) {
      this.loadTableData(newFilters);
    },
    deep: true
  }
},
methods: {
  async loadTableData(filters) {
    const query = new URLSearchParams(filters).toString();
    const res = await fetch(`/api/data?${query}`);
    this.tableData = await res.json();
  }
}

Comparison Table

Feature	`computed`	`watch`
Trigger	Lazy (on access)	Eager (on mutation)
Purpose	Derived value	Side effects / async
Caching	Yes	No
Async Support	No	Yes
Side Effects	No (should be pure)	Yes
Deep/Nested Support	No	Yes (via `deep: true`)
Arguments	❌ Not allowed	✅ newVal, oldVal

React Equivalents

`computed` → `useMemo`

const sum = useMemo(() => {
  console.log("Computing sum");
  return a + b;
}, [a, b]);

`watch` → `useEffect`

useEffect(() => {
  async function loadUser() {
    const res = await fetch(`/api/users/${userId}`);
    const data = await res.json();
    setUserData(data);
  }
  loadUser();
}, [userId]);

Deep Watch in React (manual)

React doesn't support deep watching natively:

useEffect(() => {
  console.log("Settings changed", settings);
}, [settings.theme, settings.notifications]);

When to Use What

Adapted from Flavio Copes' best practices:

Use `methods`:

To respond to DOM events (e.g., @click)
When you need to pass arguments
To call imperative logic on user action

Use `computed`:

To create derived state from reactive sources
When using nested data in the template
When a value should update reactively without manual tracking

Use `watch`:

To trigger side effects (e.g., route change, fetch data)
To observe prop changes
To respond to a single property reaching a specific value

Anti-Patterns

❌ Using `watch` for derivation

watch: {
  a(val) {
    this.sum = val + this.b;
  },
  b(val) {
    this.sum = this.a + val;
  }
}

Better:

computed: {
  sum() {
    return this.a + this.b;
  }
}

❌ Side effects in `computed`

computed: {
  fullName() {
    fetch('/api/profile'); // ❌ side effect
    return this.first + ' ' + this.last;
  }
}

Summary

Use computed for pure derivations that should be cached.
Use watch for executing logic when data changes, especially async effects.
In React, replicate:
- computed with useMemo
- watch with useEffect

Vue 2's split between computed and watch promotes clear separation of declarative derivation vs imperative side effects, a pattern React replicates using different primitives.

Need live examples, benchmarking, or async control patterns (e.g., cancellation with watch)? Ask and I can break that down next.

Port and Adapter Architecture in Real Life (with Java)

Bidisha Das — Wed, 25 Jun 2025 09:29:26 +0000

Modern software development often faces one major hurdle: tight coupling. Whether you're swapping out a database, switching from REST to GraphQL, or integrating a new third-party service, making changes without breaking the core business logic can feel like performing surgery with a sledgehammer.

Port and Adapter Architecture, also known as Hexagonal Architecture, was created to solve this exact problem. It puts the core logic at the center and treats all external dependencies—databases, UIs, APIs—as plug-and-play accessories.

In this blog post, we’ll explore this architecture with an intuitive analogy, compare it to traditional layered architecture, and implement a Task Manager App in Java that retrieves tasks for users.

What is Port and Adapter Architecture?

Think of the application core as the brain of your app. It defines what the app does, not how it's done. To interface with the messy outside world, it uses:

Ports: Abstract interfaces that define how external actors interact with the app. Think of ports like the USB ports on your laptop—they stay the same regardless of the device you plug in.

Adapters: Concrete implementations that plug into ports and use specific technologies. Like USB cables, you use different ones depending on the kind of device (application or service) you're connecting.

Configurator: The glue that wires everything together at runtime.

Even if your cable (adapter) changes, your port remains the same. It's this stability that makes the architecture so flexible and powerful.

🏠 Real-World Analogy: Home Appliances

House (Core) = Your application's business logic

Sockets (Ports) = Interfaces that define what’s possible

Appliances (Adapters) = Implementations using those sockets (e.g., toaster, TV)

Electrician (Configurator) = Connects the right appliance to the right socket

Need to switch from a toaster to a microwave? You don’t rebuild the house—you just plug in a new appliance.

🔁 Compared to Layered Architecture

Layered architecture often leads to unnecessary and tight coupling between layers. Typically, applications follow a flow like:

UI → Service → Repository → DB

However, in many real-world cases, the boundaries blur. The business logic starts depending directly on the database entities and infrastructure-specific components. For example, ORM entities like JPA are often available throughout the service and UI layers, exposing technical details such as lazy loading and transaction management to places they shouldn't be.

This not only leads to subtle bugs (like uninitialized collections being accessed from the UI) but also makes it difficult to test business logic in isolation—because it ends up entangled with database access logic.

Worse still, updating infrastructure components—like changing the ORM framework or database version—requires changes across all layers, which becomes a bottleneck and is often neglected due to the high cost.

In contrast, Hexagonal Architecture flips this structure. The application core depends only on ports (interfaces). External systems—whether databases, REST APIs, or UIs—connect via adapters. This keeps the core pure and decoupled from implementation details, enabling isolated testing and easier tech upgrades.. The app core only talks to ports. Everything else plugs in.

🎯 Our Example: Task Manager App

Use Case: "Fetch all pending tasks for a user"

We’ll build it using Port and Adapter architecture. Components:

Port (interface)
Adapter (simulated database)
Application Service (core logic)
Configurator (wiring)
Client (runner)

Step 1: Define the Port

public interface TaskRetrievalPort {
    List<Task> getPendingTasksForUser(String userId);
}

This interface represents a contract. The service layer only depends on this.

Step 2: Create the Adapter (Simulating a DB)

public class InMemoryTaskAdapter implements TaskRetrievalPort {
    private final Map<String, List<Task>> db = new HashMap<>();

    public InMemoryTaskAdapter() {
        db.put("user1", List.of(
            new Task("1", "Buy milk", true),
            new Task("2", "Read book", false)
        ));
    }

    @Override
    public List<Task> getPendingTasksForUser(String userId) {
        return db.getOrDefault(userId, List.of()).stream()
                 .filter(task -> !task.isCompleted())
                 .collect(Collectors.toList());
    }
}

Step 3: Application Core Service

public class TaskService {
    private final TaskRetrievalPort taskPort;

    public TaskService(TaskRetrievalPort taskPort) {
        this.taskPort = taskPort;
    }

    public List<Task> getUserPendingTasks(String userId) {
        return taskPort.getPendingTasksForUser(userId);
    }
}

Step 4: Configurator

public class TaskServiceConfigurator {
    public static TaskService createDefaultService() {
        TaskRetrievalPort adapter = new InMemoryTaskAdapter();
        return new TaskService(adapter);
    }
}

Step 5: Task Model + Main Client

public class Task {
    private final String id;
    private final String description;
    private final boolean completed;

    public Task(String id, String description, boolean completed) {
        this.id = id;
        this.description = description;
        this.completed = completed;
    }

    public boolean isCompleted() { return completed; }
    public String getDescription() { return description; }
}

public class Main {
    public static void main(String[] args) {
        TaskService service = TaskServiceConfigurator.createDefaultService();
        List<Task> tasks = service.getUserPendingTasks("user1");

        tasks.forEach(task -> System.out.println("Pending: " + task.getDescription()));
    }
}

✅ Benefits in Practice

Want to add a real DB later? Just create a new adapter.
Need to expose tasks via REST? Add a REST adapter.
Writing tests? Mock the port interface.

No changes to TaskService are needed.

📐 Testing Support

Hexagonal architecture makes testing clean and painless:

Unit tests talk to primary ports.

Mocks can replace secondary ports (e.g., database or notification systems).

Adapters can be tested separately with stubs or integration tools like TestContainers.

🧩 Closing Thoughts

Port and Adapter architecture doesn’t just help you write cleaner code—it empowers you to:

Delay infrastructure decisions
Embrace change confidently
Build with clarity and testability

Start small: wrap your use cases in interfaces, implement them with adapters, and connect them using a configurator. It’s a mindset shift—but one that pays off in the long run.

Facebook System Design Frontend

Bidisha Das — Sun, 23 Jun 2024 19:58:54 +0000

Concurrency Limit

Bidisha Das — Thu, 30 May 2024 16:54:19 +0000

const CONCURRENCY_LIMIT = 3

function asyncTaskRunner(tasks) {
 const results = new Array(tasks.length).fill(0)
 const totalTasks = tasks.length
 let currentTaskIndex = 0
const runner = (resolve) => {
   if (!Array.isArray(tasks)) {
     throw new Error("tasks must be Array");
   }
   let taskQueue = []
   const runNext = async () => {
     if (taskQueue.length === 0 && currentTaskIndex === totalTasks) {
       resolve(results)
       return
     }

     if (taskQueue.length >= CONCURRENCY_LIMIT || tasks.length === 0) {
       return
     }


     const taskIndex = currentTaskIndex;
     currentTaskIndex += 1

     const task = tasks.shift()
     console.log('scheduling task ', taskIndex)
     taskQueue.push(task)

     task()
       .then(result => {
         console.log('finished task: ', taskIndex)
         results[taskIndex] = result
         taskQueue = taskQueue.filter((t => t !== task))
         runNext()
       })
   }
   for (let i = 0 ; i < CONCURRENCY_LIMIT; i++) {
     if (tasks.length === 0) {
       break
     }


     const taskIndex = currentTaskIndex;
     currentTaskIndex += 1


     const task = tasks.shift()
     console.log('scheduling task ', taskIndex)
     taskQueue.push(task)


     task()
       .then(result => {
         console.log('finished task: ', taskIndex)
         results[taskIndex] = result
         taskQueue = taskQueue.filter((t => t !== task))
         runNext()
       })
   }
 };
 return new Promise((res) => runner(res));
}


const t1 = () => new Promise(res => setTimeout(() => res('t1'), 3000))
const t2 = () => new Promise(res => setTimeout(() => res('t2'), 200))
const t3 = () => new Promise(res => setTimeout(() => res('t3'), 1500))
const t4 = () => new Promise(res => setTimeout(() => res('t4'), 5000))
const t5 = () => new Promise(res => setTimeout(() => res('t5'), 4000))
const t6 = () => new Promise(res => setTimeout(() => res('t6'), 1000))


const tasks = [t1, t2, t3, t4, t5, t6]


asyncTaskRunner(tasks)
 .then(console.log)

Creating Async Task Runner with Concurrency in JavaScript

Bidisha Das — Tue, 29 Nov 2022 19:46:09 +0000

Let us consider we need to create an aync task runner in javascript with the following constraint:

The task runner should have a set of tasks that will be pushed to it,
Each of these tasks will be some async operation,
The task runner should also ensure that at a single point of time only a given number of tasks can perform, and other tasks keep on waiting unless their turn comes.

Let's code out the solution first

class Runner{
      constructor(concurrency=1){
          this.concurrency = concurrency;
          this.waitList = [];
          this.count = 0;
          this.currentQ = [];
      }
      push(task){
         this.waitList.push(task);
         this.run();
      }
      run(){
         let current = this;
         if(this.count<this.concurrency){
            this.count++;
            if(this.waitList.length>0){
               let task = this.waitList.shift();
               let id = task.id;
               this.currentQueue.push(id);
               this.showRunningTasks();
               let done = function(){ 
       this.currentQueue.splice(this.currentQueue.indexOf(id),1);
                  this.showRunningTasks();
                  this.count = this.count - 1;
                  this.run();
               }.bind(current);
               task.task(done);
            }
         }
      }

      showRunningTasks(){
         let existingQueue = this.currentQueue.join(", ");
         document.getElementId("running").innerHTML = existingQueue;
      }
}

Let's understand this piece of code line by line.

Initially we pass the concurrencyflag indicating how many tasks can run concurrently. The waitList is used for making a wait list of tasks, which will wait unless the queue referred to as currentQueue is empty. The count variable is initialised to count the number of concurrent tasks at a moment.
The push method is used to push a task to waitList, and we then execute the run method.This simply indicates that the tasks need to be run if the queue is empty
The run method is interesting. First it preserves the context of the task by the virtue of first line denoted as let current = this
Next, we check for the concurrency and if the waitList has elements, we simply,

push the task id to the currentQueue,
display the current running tasks via the method showRunningTasks,
in the inner donemethod, which will be taken as a callback in tasks, we simply remove the task with the id from current
queue, reduce the count to reduce the total number of concurrent tasks,
In the end, we recursively call the run() method to run the current function. Note, here the context remains same.
Lastly we bind this function to the current context.
We pass this function to task.task function.

Let's now see how this method can be used

Use the following code snippet to see the result.

let runner = new Runner(3);
let task1 = {
  id: 1,
  task: function(done) {
    setTimeout(function() {
      console.log("Task 1");
      done();
    }, 3000)
  }
}

let task2 = {
  id: 2,
  task: function(done) {
    setTimeout(function() {
      console.log("Task 2");
      done();
    }, 5000)
  }
}

let task3 = {
  id: 3,
  task: function(done) {
    setTimeout(function() {
      console.log("Task 3");
      done();
    }, 4000)
  }
}

let task4 = {
  id: 4,
  task: function(done) {
    setTimeout(function() {
      console.log("Task 4");
      done();
    }, 9000)
  }
}

runner.push(task1);
runner.push(task2);
runner.push(task3);
runner.push(task4);

You will see the result on the screen as Task 1, Task 3, Task 2, Task 4, which is expected.

Compound Components Pattern in React

Bidisha Das — Tue, 28 Jun 2022 17:12:45 +0000

During development, we face some design patterns in React. Compound Components is one of the most important and frequently used Design Pattern in React. Let us create a Expandable Accordion component using React.

Compound Components are components that are made up of two or more components which cannot be used without it's parent.

A select box is an example of it.

Intially, we set up the Expandable component. Here is the code that goes along with it.

import React, {createContext} from React;
const ExpandableContext = createContext();
const {Provider} = ExpandableContext;

const Expandable = ({children}) => {
    return <Provider>{children}</Provider>
}

export default Expandable;

The following things are happening here

ExpdandableContext is created,
The Provider is desctructured from the ExpandableContext
In the end, we are just creating an Expandable Component and returning the JSX with the Provider that displays the children passed to the Expandable component

Now we have to introduce state for the expanded accordion and even create a toggle function for it.

const Expandable = ({children}) => {

    /**
     * State to update the expanded behaviour
     */
    const [expanded, setExpanded] = useState(false);

    /**
     * Method for toggling the expanded state
     */
    const toggle = setExpanded(prevExpanded => !prevExpanded);

    return <Provider>{children}</Provider>
}

Now the toggle callback function will be invoked by the expandable header and it shouldn't change every time or re-render. Hence, we can memoize the callback as follows.

After this, we need to pass these - toggle function and expanded to the provider. Hence we write this line:

const value = { expanded, toggle }

and to prevent the re-rendering of value every time, we use useMemo for preserving the object on every render.

const value = useMemo(()=> {expanded, toggle}, [expnded, toggle]);

Providing flexibility to the external user to provide custom functionality after expansion

At times, it will be the requirement to provide custom functionality to the user after the accordion is expanded. In this case we can follow the below pattern.

For class components we can do this using a callback, however for functional components we need to do this with useeffect and run this only when the functional component has already been mounted (it should not run when the component is mounted every time).

     * Check for mounting
     */
    const componentJustMounted = useRef(true);

    /**
     * Function to call when the expanded state is altered tp true, 
     * that is when the expansion happens. 
     */
    useEffect(()=> {
        if(!componentJustMounted.current){
            onExpand(expanded);
        }
        componentJustMounted.current = false
    }, [expanded])

We are using a useRef as it will return a reference which will be preserved during render cycles. Initially it is set to true. We only make it false when the callback is executed with the expanded prop passed to it.

Hence the whole component Expandable.js looks like this:

import React, {createContext, useState, useCallback, useRef, useEffect} from 'react';
const ExpandableContext = createContext();
const {Provider} = ExpandableContext;

const Expandable = ({children}) => {

    /**
     * State to update the expanded behaviour
     */
    const [expanded, setExpanded] = useState(false);

    /**
     * Check for mounting
     */
    const componentJustMounted = useRef(true);

    /**
     * Function to call when the expanded state is altered tp true, 
     * that is when the expansion happens. 
     */
    useEffect(()=> {

        if(!componentJustMounted.current){
            onExpand(expanded);
        }
        componentJustMounted.current = false
    }, [expanded, onExpand])

    /**
     * Method for toggling the expanded state
     */
    const toggle = useCallback(() => 
        setExpanded(prevExpanded => !prevExpanded), []
    );

    const value = useMemo(()=> {expanded, toggle}, [expanded, toggle])

    return <Provider value={value}>{children}</Provider>
}

export default Expandable;

Building Child Components

The three components of the body, header and icon are as follows.

Header.js

import React, { useContext } from 'react'
import { ExpandableContext } from './Expandable'

const Header = ({children}) => {
  const { toggle } = useContext(ExpandableContext)
  return <div onClick={toggle}>{children}</div>
}
export default Header;

Here we just try and access the toggle and on click we toggle the body on click of the div. This is the by default feature of accordion.

For Body,

Body.js

import { useContext } from 'react'
import { ExpandableContext } from './Expandable'

const Body = ({ children }) => {
  const { expanded } = useContext(ExpandableContext)
  return expanded ? children : null
}
export default Body

In the body, we check if the expanded property is true or not. If it is true, we set the body to the props.children passes to it, otherwise we return null (since the body is not expanded).

For icon, we can use Icon.js which looks like this:

Icon.js

// Icon.js
import { useContext } from 'react'
import { ExpandableContext } from './Expandable'

const Icon = () => {
  const { expanded } = useContext(ExpandableContext)
  return expanded ? '-' : '+'
}
export default Icon

For expanded body, we show a - sign and for contracted body, we show, +.

After adding these logics, let us add just the styles in the each of these elements and finally the components look like this.

Expandable.js

import React, {
  createContext,
  useState,
  useCallback,
  useRef,
  useEffect,
  useMemo,
} from "react";
export const ExpandableContext = createContext();
const { Provider } = ExpandableContext;

const Expandable = ({ onExpand, children, className = "", ...otherProps }) => {
  const combinedClasses = ["Expandable", className].filter(Boolean).join("");

  /**
   * State to update the expanded behaviour
   */
  const [expanded, setExpanded] = useState(false);

  /**
   * Check for mounting
   */
  const componentJustMounted = useRef(true);

  /**
   * Method for toggling the expanded state
   */
  const toggle = useCallback(
    () => setExpanded((prevExpanded) => !prevExpanded),
    []
  );

  /**
   * Function to call when the expanded state is altered tp true,
   * that is when the expansion happens.
   */
  useEffect(() => {
    if (!componentJustMounted.current) {
      onExpand(expanded);
    }
    componentJustMounted.current = false;
  }, [expanded, onExpand]);

  const value = useMemo(() => ({ expanded, toggle }), [expanded, toggle]);

  return (
    <Provider value={value}>
      <div className={combinedClasses} {...otherProps}>{children}</div>
    </Provider>
  );
};
export default Expandable;

Body.js

// Body.js
import './Body.css'
import { useContext } from 'react'
import { ExpandableContext } from './Expandable'

const Body = ({ children , className='',... otherProps}) => {
  const { expanded } = useContext(ExpandableContext);
  const combinedClassName = ['Expandable-panel', className].filter(Boolean).join('');
  return expanded ? 
  <div className ={combinedClassName} {...otherProps} >{children}</div> : null
}
export default Body

Header.js

import React, { useContext } from 'react'
import { ExpandableContext } from './Expandable'
import './Header.css';
const Header = ({className='', children, ...otherProps}) => {

  const combinedClassName = ['Expandable-trigger',className].filter(Boolean).join('');

  const { toggle } = useContext(ExpandableContext)
  return <button className={combinedClassName} {...otherProps}
  onClick={toggle}>{children}</button>
}
export default Header;

Icon.js

import { useContext } from 'react'
import { ExpandableContext } from './Expandable'

const Icon = ({ className='', ...otherProps}) => {
  const { expanded } = useContext(ExpandableContext);
  const combinedClassName = ['Expandable-icon', className].join('');
  return <span className={combinedClassName} {...otherProps}>{expanded ? '-' : '+'}</span>
}
export default Icon

You can view its behaviour at https://officialbidisha.github.io/exapandable-app/

and the github code is available at https://github.com/officialbidisha/exapandable-app

This is how compound components work. We cannot use the Expandable component without the Header, Icon and Body and vice versa. We have successfully learnt a design pattern now.

Happy learning!

React 18 - New Features & Improvement Strategies

Bidisha Das — Sun, 17 Apr 2022 22:45:22 +0000

On March 8th, the React team released the React 18 RC(Release Candidate). The latest release has brought a number of new features that would transform the coding pattern in a number of application. It brings along with it, a couple of performance improvements which I will be covering in this blog.

Concurrency

Concurrency is a property of systems where several processes are executing at the same time, and may or may not interact with each other. Too complex? Let's break it down. Let's say there is a race that is being conducted. Now, concurrency is how many people are running for a single race in a parallel track.

Concurrency is a new feature that React 18 has introduced. It is a new behind-the-scene mechanism that enables React to prepare multiple versions of the UI at the same time.

In this mechanism, unlike previous cases, React may start the rendering, pause in middle for some critical task and resume rendering again. The only thing to keep in mind is that it may also abandon in process render altogether. React guarantees that the UI appears consistent even though the render is interrupted.

This gives the capability of React to prepare screens in the background - without blocking the new thread!

Suspense for Server Side Rendering

React has brought forth the feature of Suspense in Server side rendering frameworks like Next.js, Relay, Hydrogen or Remix. React 18 introduces:
Code splitting on the server with suspense, and
Streaming rendering on the server.

Automatic Batching

Batching is the phenomenon via which React groups multiple state updates into a single re-render for better performance optimisation.

Previous to React 18, batch updates were performed for react-based event handlers. However for promises, setTimeouts, native event handlers or any other events, batch updates were not performed. React 18 performs automatic batch updates for the above mentioned cases too.

Let's understand this using a code.

setTimeout(() => {
  setCount(count => count + 1);
  setFlag(flag => !flag);
  // React will only re-render once at the end (that's batching!)
}, 1000);

Identically, the above code behaves the same as this:

fetch(/*...*/).then(() => {
  setCount(counter => counter + 1);
  setFlag(flag => !flag);
  // React will only re-render once at the end (that's batching!)
})

In case, you don't want to batch, you can use ReactDOM.flushSync() . Let's understand with a bit of code

import { flushSync } from 'react-dom'; // Note: react-dom, not react

function handleFlushesClick() {
  flushSync(() => {
    setCounter(counter => counter + 1);
  });
  // React has updated the DOM by now
  flushSync(() => {
    setFlag(flag => !flag);
  });
  // React has updated the DOM by now
}

Transitions

This feature distinguishes urgent vs non-urgent updates. An urgent update is one which needs immediate response. Urgent updates include actions like clicking, pressing, typing - things that require immediate response or where the user expects the UI to respond immediately.
No intermediate values are to be displayed on screen.

A real life example

Considering a real life example, let's think of a debounced typeahead. Now, while you type in the input, you expect the input box to reflect the values typed. However, do you expect the result to appear immediately? No right! It will debounce and then you get result. So , there is some transition time from the time you type your input till the time you get your suggestion. This time frame will be used for transition.

Typically, for best user experience, a single user input should result in both urgent and non-urgent update.

import {startTransition} from 'react';

// Urgent: Show what was typed
    setInputValue(input);`

// Mark any state updates inside as transitions
  startTransition(() => {
     // Transition: Show the autosuggestion based on the input 
        value
      setSearchQuery(input);
});

Another real-time example

const [isPending, startTransition] = useTransition()

Here the useTransition hook has 2 parameters that is destructured.

isPending : to denote if the UI update is still in transition state

startTransition: A function that executes code for transactions.

function handleClick() {
   startTransition(() => {
     setTab('comments');
   });
}

This function gets called when you want to switch from Photos tab to Comments tab.

{tab === 'photos' ? : }

During the transition phase, while the new UI is being prepared by React, the tab with the Photos UI will be now shown to the user with 80% opacity to give a smooth view of transition.

Strict Mode in React

The Strict Mode in development server brings forth a couple of interesting changes in React 18. This mode essentially provides out-of-box performance for React.

This new check will automatically unmount and remount every component, whenever a component mounts for the first time, restoring the previous state on the second mount.

The series of events during mounting now:

I. React mounts the component.

Layout effects are created.
Effects are created.

II. React simulates unmounting the component.

Layout effects are destroyed.
Effects are destroyed.

III. React simulates mounting the component with the previous state.

Layout effects are created.
Effects are created.`

During unmounting, the following events occur

I. Layout effects are destroyed and Effect effects are destroyed.

New Hooks

a. useId

useId is a new hook for generating** unique IDs on both the client and server*, while avoiding hydration mismatches. This generates an **unique string containing : which does not collide with css selectors and querySelectorAll*

You can also use userId with identifierPrefix in order to prevent collision in multi-root applications. For multiple IDs in the same component, append a suffix using the same id.

b. useDeferredValue

useDeferredValue will let you defer re-rendering a non-urgent part of the tree. Remember we talked about non-urgent rendering? It is no fixed time delay, so React will attempt the deferred render right after the first render is reflected on the screen.

c. useSyncExternalStore

useSyncExternalStore is a new hook that allows external stores to support concurrent reads by forcing updates to the store to be synchronous. It removes the need for useEffect when implementing subscriptions to external data sources.

Code snippet:

   const state = useSyncExternalStore(subscribe, getSnapshot[, getServerSnapshot]);

subscribe: function to register a callback that is called whenever the store changes.
getSnapshot: function that returns the current value of the store.
getServerSnapshot: function that returns the snapshot used during server rendering.

d. useInsertionEffect

useInsertionEffect(didUpdate);

useInsertionEffect is a new hook that allows CSS-in-JS libraries to address performance issues of injecting styles in render. This hook will run after the DOM is mutated, but before layout effects read the new layout.

This hook will help in calculating layout in sync with the concurrent re-rendering.

Conclusion

There are others small but significant updates too - for example using the createRoot() hook rather than ReactDOM.render. This method will be used to render a DOM element and umount using root.unmount()

Other than than React also have streaming Suspense support for servers using renderToPipeableStream& renderToReadableStream

React developers keeps on focusing on the enhancement and improvement and couple of bug fixes in this released version. The update is not meticulous and can be done in a morning session, itself. So what's the wait for , application developers? Let's upgrade our library and start working! Kudos to the React team!

A Developer's Journey

Bidisha Das — Fri, 01 Apr 2022 11:26:26 +0000

As I sit to write this, I need to recollect my last 4 years. Initially, I never wanted to be a developer, my passion was to become a writer. But here I am today, being a developer, a coder and understanding that every piece of code is a story.

On my first day of engineering college I was skeptical whether I would be able to cope-up with the syllabus because I was always unsure of my mathematical aptitude. But here is a story of overcoming fears. Initially, I didn't think that I would bring in decent grades, but I did. Not once, at all but eventually.

My journey of development started only in the beginning of 2019. Till then my knowledge of programming was limited to the curriculum. It was a conflict between my teammates in a project which we were preparing for placement,and a few cuss words that shattered my confidence. Though I couldn't say anything at first, I knew that this needed a reply. So I came out of that project and looking back today that was one of the best and basic step I took in last 3 years for my own growth. This didn't happen in a day. Professor Chatterjee at that time, clearly told me,"Bidisha, either you depend on her, and listen to her bullshit or come out of it and do something on your own." I am thankful that I listened to it. I am thankful to him for this reason and so many others.

But I didn't know where to start. I guess the timing was appropriate when my professor from CSE department gave me and a batchmate a task to do, a library management project. This batchmate of mine, named Meghanto was always bright and intelligent. It is still a wonder to me why he agreed to work with me, held so much patience for me. But in the whole process, we became friends. There was a point in time, whenever there was a hackathon, nobody wanted to participate with me. However, he was the first person who showed me the willingness. Not just that, there were days, I didn't understand documentation, I struggled with basic things, how to make an API call, what is a stateful and what is a stateless request. However, he stood by me. He would tell me, "Bidisha, read the goddamn documentation, or I will break your head. His famous dialog of Tinker with Code still helps me think, to this date." The amount of effort he put in me for bringing up my standard of thought process and imagination is something I will forever be grateful for. He introduced me to Vue.js. So I still call him my Evan You.

Then came my first hackathon. Throughout this whole time, behind every small,little progress we made, DC Sir (who gave us the project) always pushed us to do better. I remember asking him few days before the hackathon, "I won't be able to do it. I don't have that brain. What's the use of humiliating myself?" And he said, "Give it a try, give it. If you're not selected also, you knew you tried. The worse thing that can happen is a rejection."

Honestly, in HackwithInfy, I sat in the first round knowing I wouldn't be able to crack it. But I wanted to do it for DC Sir. Because I didn't want to let him down. I practiced hard for it with no hope to clear it. Hackerrank and Hackerearth was my place of practice. I wanted to come out of the hall and tell him, "Sir, I tried. But I won't be able to clear it. But I really really tried." I wanted to do it for the person, the only person, who had shown faith in me.

To my surprise, after solving 1.7/3 questions, I qualified my first round. My close friend Dipan, when he told me that I cleared it, I couldn't believe my ears. In this phase, my friends Reshmina, Dipan, Shreya, they did support me to a great extent, We all need our emotional support and somewhere these are the people I would always know had my back, then. All the more was I prepared to sit in my second round. And I did.

This time I practiced and practiced. It didn't matter. I felt joyous when I was able to solve something, and didn't want to give up. In the second round, I solved 2.2/3 problems and got an interview call. Eventually, with the Library Management Project I and Meghanto made using Vue.js, Spring Boot - we both cracked the HackwithInfy interview.

My second phase started during the lockdown. When I couldn't clear the Associate examination for CTS, it broke my confidence again and this time I knew projects are not enough anymore. In order to close the interview process, I needed to pass algorithms and my problem solving ability needed to be increased.

I was introduced to CodeChef. Anirban and Meganto - my close pals, had pushed me a lot, and there were days in that 10 days CodeChef Long Challenge where I was unable to solve and problem and my stars used to go down. In this phase, these people motivated me. My frontend development skills was sharpened by Debjoy - a guy who hands down has better knowledge and skills than I will ever have.

Had it not been them, I would have given up long back. There are names that I would love to mention here but am witholding - who celebrated with my success and cheered me up in my downfall.

Next, I sat for Hackathons on Hackerearth. I got calls from BNY Mellon, American Express, AutoRABIT and finally cleared AutoRABIT. They provided me with a more than average package, a good work culture and most of all a chance. I would always be thankful to AutoRABIT for hiring me. I am sure they had options but still they chose me, took a chance with me, for this I will always be grateful.

Coming to my work life, I had learnt a lot. When I initially joined, my first training project, was in Spring Boot and OlingoData. My tech lead Naresh Ananthapalli was one of the most calm, cool-headed and clear-minded developers I had seen. As a fresher, me and my teammate, Shaurya - we used to make hell lot of mistake and he always used to be patient and guide us through. At that time, a lot of times I got stuck a particular colleague had helped me in debugging. From this person I have learnt to keep good spirit when you solution does not work and have admired his coding skills.

When I was put into frontend development, I was happy because I was more inclined to that,but skeptical too. I was initially put into the modernisation team. I learnt a lot here. From my senior developer, staying in US, I have learnt the value of how to handle a team, and giving estimates -I remember giving too low estimate for a small task when he corrected me.Most of all, I have learnt how to make people feel homely and comfortable providing assurance from this person. There was another transformation I went through. I had learnt a lot from him and he had helped me improve my skills with a steep slope.

From one of my senior developer from Bulgaria, - I learnt that knowing a framework is not good enough unless you know the basics of it. It was a grilling process but I was able to cope up with it. I rememeber crying the night I was asked to develop Progress Button because I failed and made mistake so many times. I thought I am not good enough but I did.

I would like to mention my manager here. He has influenced my coding style to a great extent. I am going to put it point blank, my manager has been one of my biggest support in terms of guidance,and contribution in my career. He always motivated me, showed confidence in me when I was unable to trust myself. He put in faith in me when I was unable to focus. He never shouted at me, had been patient and understanding. I do not think I would ever come across a better human being and a manager, than him.

Out of having the curiosity to understand market standard and getting inspired by a colleague who switched - I started browsing opportunities. Only recently did I get an offer from a named product based startup. But about that, in some other post!
For now, this is it.

DEV Community: Bidisha Das

Computed and Watchers in Vue: A Deep Dive

Vue 2 Reactivity System (Brief Primer)

computed: Lazy, Cached Derivations

Purpose

Internal Behavior

Prototype Note

Arguments Are Not Allowed

Example: Basic Sum

Real-World Example: Product Price Calculation

Real-World Example: Reducing Expression Length

watch: Reactive Side Effects

Purpose

Internal Behavior

Arguments

Real-World Example: Async API on Property Change

Real-World Example: Debounced Search API

Real-World Example: Reacting to Deep Object

Real-World Example: Routing on Condition

Real-World Example: Fetch Data on Filter Change

Comparison Table

React Equivalents

computed → useMemo

watch → useEffect

Deep Watch in React (manual)

When to Use What

Use methods:

Use computed:

Use watch:

Anti-Patterns

❌ Using watch for derivation

❌ Side effects in computed

Summary

Port and Adapter Architecture in Real Life (with Java)

What is Port and Adapter Architecture?

🏠 Real-World Analogy: Home Appliances

🔁 Compared to Layered Architecture

🎯 Our Example: Task Manager App

Step 1: Define the Port

Step 2: Create the Adapter (Simulating a DB)

Step 3: Application Core Service

Step 4: Configurator

Step 5: Task Model + Main Client

✅ Benefits in Practice

📐 Testing Support

🧩 Closing Thoughts

Facebook System Design Frontend

Concurrency Limit

Creating Async Task Runner with Concurrency in JavaScript

Compound Components Pattern in React

React 18 - New Features & Improvement Strategies

Concurrency

Suspense for Server Side Rendering

Automatic Batching

Transitions

A real life example

Another real-time example

Strict Mode in React

New Hooks

a. useId

b. useDeferredValue

c. useSyncExternalStore

d. useInsertionEffect

Conclusion

A Developer's Journey

I still have a lot to learn and I hope all goes well. I will keep hustling and one day I will be there.

`computed`: Lazy, Cached Derivations

`watch`: Reactive Side Effects

`computed` → `useMemo`

`watch` → `useEffect`

Use `methods`:

Use `computed`:

Use `watch`:

❌ Using `watch` for derivation

❌ Side effects in `computed`