Quick notes and observations on various topics.
CSS Modules' `composes` keyword lets a class inherit styles from another class without duplication. Use `composes: utility-class from global` to pull in a globally defined class — the module runtime adds both class names to the element, so no JSX changes are needed and the styles stay in one place.
A closure is just a function that remembers the variables from the scope where it was defined — even after that scope has finished executing. Every time you write a callback, you're probably using one.
Unlike Sass variables that are compiled away, CSS custom properties (--my-var) exist at runtime. That means you can change them with JavaScript and the cascade will instantly re-render the affected elements — no class toggling needed.
Always return a cleanup function from useEffect when you set up subscriptions, timers, or event listeners. Without it, effects outlive their component and cause subtle memory leaks that only appear under navigation-heavy usage.
TypeScript's `any` disables all type checks. `unknown` forces you to narrow the type before use, which is almost always what you actually want when dealing with external data or error objects.
Using <button>, <nav>, <main>, and <article> instead of generic <div> elements gives screen readers and keyboard users a usable experience with zero extra JavaScript. It also tends to improve SEO.
Attaching a scroll listener on the window fires dozens of times per second on the main thread. IntersectionObserver is asynchronous, runs off the main thread, and is purpose-built for detecting when elements enter the viewport.
Cache-Control: stale-while-revalidate lets the browser serve a stale cached response instantly, then silently fetch a fresh copy in the background. Users get speed; you still get fresh data on the next visit.
If a value can be computed from existing state or props, don't put it in useState — just compute it during render. Derived state stored in state creates two sources of truth and leads to subtle sync bugs.
Animating top, left, width, or height triggers layout recalculation on every frame. Animating transform and opacity runs entirely on the GPU compositor thread, producing silky 60fps animations at almost no CPU cost.