Instagram story viewer> @useless_engineer.dev> Posts
Useless Engineer(@useless_engineer.dev)'s profile avatar HD Profile

Useless Engineer

@useless_engineer.dev

1.2K
followers
1460
following
Professional bug creator πŸ›
Shipping bugs by day β˜€οΈ, fixing yours at night πŸŒ™
Templates & guides for devs who get it.
#Typescript | #React
POSTS STORIES REELS TAGGED
current is declared once, outside the loop β€” every pass mutates that same object. Each closure captures the reference to current, not the value it held at push time. By the time any callback runs, current.value is whatever the loop left it at β€” every callback sees the same final number. Declaring the object fresh inside the loop gives each closure its own copy. Or copy the primitive out at push time, so there's nothing left to mutate. πŸ”– #javascript #react #typescript #igviral #fypγ‚·β€οΈπŸ’žβ€οΈ by @useless_engineer.dev
0
a day ago
Download
P136: Object.keys always returns string[], never (keyof T)[]. It's deliberate β€” an object typed as T could have extra properties at runtime, so TypeScript can't soundly narrow the result. Indexing with one of those keys fails type-checking, even though the key is genuinely valid. Cast once inside a small keysOf helper and every caller gets (keyof T)[] back, no repeated casting. Object.entries takes the same cast when you need the value too. πŸ”– save slide 5. #typescript #react #javascript by @useless_engineer.dev
0
2 days ago
Download
x is a mutable binding, so TypeScript can't prove it stays non-null by the time a closure like setTimeout runs β€” something could reassign it first. Inside that closure, TypeScript widens x back to its original type, even though if (x) just checked it. Copy the narrowed value into a new const before the closure β€” it can't be reassigned, so the narrowing holds. Or pass the value in as the callback's own argument. πŸ”– save slide 5. #typescript #react #javascript by @useless_engineer.dev
0
3 days ago
Download
P134: ! is a compile-time-only assertion β€” it erases null/undefined from the type, not from the actual value. If a DOM element doesn't exist, or .find() matches nothing, the runtime value is still null after the !. The crash lands on the first property access, with no context why. An if check narrows the type for real, letting you handle "not found" instead of crashing. Or use ?. with ?? when a missing value is actually fine. πŸ”– save slide 5. #typescript #react #javascript #webdev by @useless_engineer.dev
2
4 days ago
Download
as compiles away β€” zero runtime checks, just a compile-time promise the compiler trusts completely. If the API response doesn't match the asserted type, nothing catches it. The crash happens wherever the field is finally read, far from where the bad data came in. A Zod schema's parse() checks every field at runtime and throws right at the boundary. safeParse() does the same without throwing, so you can show a fallback. πŸ”– save slide 5. #typescript #javascript #webdev by @useless_engineer.dev
0
5 days ago
Download
P132: useState's argument is only read on the first render β€” every call after that is ignored. When the parent re-renders with a new value prop, React doesn't call useState(value) again; nothing tells local state to catch up, so it silently drifts from what the parent now holds. A useEffect keyed on value can push the prop into state on change. Better yet, skip the duplicate state, or force a fresh instance with key={value}. πŸ”– save slide 5. #react #typescript #javascript by @useless_engineer.dev
0
6 days ago
Download
{ category: 'books' } creates a brand-new object every render, even when the contents never change. React's dependency check is Object.is β€” reference equality, not deep β€” so the effect re-fires regardless of whether anything changed. useMemo keeps the same reference across renders, as long as its deps stay the same. Or skip the object and depend on the primitives inside it β€” strings and numbers compare by value. πŸ”– save slide 5. #react #typescript #javascript #cleancode by @useless_engineer.dev
0
8 days ago
Download
P130: setState schedules a re-render, it doesn't mutate the variable right now. count in your function is still the value from the render that created this closure β€” reading it right after setCount(count + 1), or calling it twice, gives the same stale number both times. setCount(prev => prev + 1) gets React's current value when it applies, so queued calls stack correctly. Need the new value? useEffect runs after the render that has it. πŸ”– save slide 5. #react #typescript #javascript by @useless_engineer.dev
0
9 days ago
Download
null/undefined skips type validation in loose JS β€” nothing stops disabled={user?.isBlocked} from reaching the component when user is null. A plain button coerces that fine, but native and third-party components often strict-check it, or chain disabled && styles.disabledStyle, returning null, not a boolean β€” crashing instead of disabling. Coerce at the call site with !!value, and in TS, type the prop as a strict boolean. πŸ”– save slide 5. #react #typescript #javascript #cleancode by @useless_engineer.dev
0
10 days ago
Download
P128: setInterval inside useEffect with empty deps runs once β€” its callback closes over state from that single render. State keeps updating, but the interval callback never sees anything but the value it captured at mount. setCount(c => c + 1) reads React's current state instead of the closure. Need the latest value for more than setState? Keep a ref in sync and read ref.current. πŸ”– save slide 5. #reactnative #react #typescript #javascript #cleancode by @useless_engineer.dev
2
11 days ago
Download
A rejected promise with no .catch() doesn't throw where you'd notice β€” it just gets reported as "unhandled." In dev tools that's a console warning. In production, nobody's watching for it, while the user stares at a spinner that never resolves. Handle every promise at its call site β€” try/catch around each await. Then add a global unhandledrejection listener as the net for whatever still slips through. πŸ”– save slide 5. #javascript #react #typescript #webdev #cleancode by @useless_engineer.dev
2
12 days ago
Download
P126: Promise.all() is fail-fast by design: the instant any one promise in the batch rejects, the whole thing rejects. The fulfilled results from every other promise are simply discarded β€” your catch block only ever sees that one rejection, with zero information about what actually succeeded. Promise.allSettled() waits for every promise to settle, fulfilled or rejected, and returns a status per entry instead of short-circuiting. #javascript #react #typescript #cleancode by @useless_engineer.dev
1
13 days ago
Download

Download All

Save the photos and videos currently loaded on this page.

0Photos
0Videos
Ready to download 0 / 0

Keep this tab open until your download is ready.
back to up