Modern JavaScript Patterns Every Developer Should Know

JavaScript continues to evolve at a rapid pace. Let us explore the most impactful patterns and techniques that will make your code cleaner, faster, and more maintainable in 2026.

Signal-Based Reactivity

Signals have become the dominant reactivity pattern across frameworks. Here is how to implement a lightweight signal system from scratch.

class Signal {
  #value;
  #subscribers = new Set();

  constructor(initialValue) {
    this.#value = initialValue;
  }

  get value() {
    if (Signal.currentEffect) {
      this.#subscribers.add(Signal.currentEffect);
    }
    return this.#value;
  }

  set value(newValue) {
    if (Object.is(this.#value, newValue)) return;
    this.#value = newValue;
    for (const subscriber of this.#subscribers) {
      subscriber();
    }
  }

  static currentEffect = null;

  static effect(fn) {
    Signal.currentEffect = fn;
    fn();
    Signal.currentEffect = null;
  }
}

// Usage
const count = new Signal(0);
const doubled = new Signal(0);

Signal.effect(() => {
  doubled.value = count.value * 2;
  console.log(`Count: ${count.value}, Doubled: ${doubled.value}`);
});

count.value = 5; // Logs: Count: 5, Doubled: 10

Structured Concurrency with AsyncContext

// Modern async patterns with AbortController
async function fetchWithTimeout(url, timeout = 5000) {
  const controller = new AbortController();
  const timeoutId = setTimeout(() => controller.abort(), timeout);

  try {
    const response = await fetch(url, { signal: controller.signal });
    return await response.json();
  } finally {
    clearTimeout(timeoutId);
  }
}

// Parallel with error isolation
async function resilientFetch(urls) {
  const results = await Promise.allSettled(
    urls.map(url => fetchWithTimeout(url))
  );

  return results.map((result, i) => ({
    url: urls[i],
    success: result.status === "fulfilled",
    data: result.status === "fulfilled" ? result.value : null,
    error: result.status === "rejected" ? result.reason.message : null,
  }));
}