Today I finally sat down and really understood why React cares so much about keys and how the whole render cycle works.

Keys are just how React keeps track of items in a list. When you map over an array, each.

Hooks must sit at top level in components. State remembers between renders, local vars reset. Effects sync external stuff like dom—layout for reads, update for state checks. Bad deps mean extra renders and slowdowns. Keeps things smooth.

React notes headache: effects sync external state like storage, but component side lags—gotta trigger renders. Layout/update effects only if deps change, wrong deps mean endless re-renders. Clean or suffer perf hell. Time to code and probably loop forever haha.

React state updater phase: queues changes → batch check → DOM commit if needed. Batching saves re-renders (React 18 auto). Profiler spots slow trees. Effects check deps on change—miss one, loop hell. Relatable debug win. Notes diagram it clear.

Node.js event loop cycle: timers (expired timeouts) → poll (I/O w/timer limit) → check (setImmediate). nextTick highest, before phases/microtasks. Microtasks separate. Notes: process 1 callback/phase fully, repeat till empty. Diagram shows queue flow.

Keep components PURE in your React App!!!
A component is expected to be a pure function by React and strict mode helps you verify it.
A function is pure when it's output is always some for the same inputs.

Learnt ESM basics: import/export modules with scoped code, native in type="module" and great for tree‑shaking. Supports top‑level await, easy polyfill packaging, and hoisted imports so modules load before running.

Node.js’s libuv event loop makes single-threaded JS feel async by cycling phases: timers → pending → idle/prepare → poll → check → close, each with its own callback queue. process.nextTick runs after the current operation but before any phase or promise microtasks, so overuse can starve the loop.