RedCodeTex's profile picture. Full Stack Software Engineer | TS, React, Node.js, Go, C++, SQL

RedCodeTex

@RedCodeTex

Full Stack Software Engineer | TS, React, Node.js, Go, C++, SQL

Stop overusing useCallback and useMemo - they're not magic performance bullets

Stop overusing useCallback and useMemo - they're not magic performance bullets When to actually use them: - Expensive computations - Preventing child re renders - Dependency arrays in other hooks When Not to use them: - Primitive values - Simple operations

RedCodeTex's tweet image. Stop overusing useCallback and useMemo - they're not magic performance bullets

When to actually use them: 
- Expensive computations 
- Preventing child re renders 
- Dependency arrays in other hooks
When Not to use them: 

- Primitive values 
- Simple operations


PlanetScale just brought Postgres to the table. Let the real game begin

PlanetScale now supports Postgres.



React optimization

React optimization: React.memo + strategic keys for expensive re-renders When child components do heavy computation, this pattern helps React skip renders: ✓ React.memo + child keys ✗ Wrapper keys only Only helps with expensive renders - profile first #ReactJS #Performance

RedCodeTex's tweet image. React optimization: React.memo + strategic keys for expensive re-renders
When child components do heavy computation, this pattern helps React skip renders:

✓ React.memo + child keys 
✗ Wrapper keys only

Only helps with expensive renders - profile first
#ReactJS #Performance


React optimization: React.memo + strategic keys for expensive re-renders When child components do heavy computation, this pattern helps React skip renders: ✓ React.memo + child keys ✗ Wrapper keys only Only helps with expensive renders - profile first #ReactJS #Performance

RedCodeTex's tweet image. React optimization: React.memo + strategic keys for expensive re-renders
When child components do heavy computation, this pattern helps React skip renders:

✓ React.memo + child keys 
✗ Wrapper keys only

Only helps with expensive renders - profile first
#ReactJS #Performance

TanStack Form: Type-safe React forms

TanStack Form: Type-safe React forms in 5kb - Zero jank with surgical re-renders - Compile-time type safety with schema validation - Flexible field-level validation API Smart dirty/touched state tracking Lightweight yet powerful form management for modern React apps. @tan_stack

RedCodeTex's tweet image. TanStack Form: Type-safe React forms in 5kb

- Zero jank with surgical re-renders
- Compile-time type safety with schema validation
- Flexible field-level validation API Smart dirty/touched state tracking

Lightweight yet powerful form management for modern React apps.
@tan_stack


React concurrency with startTransition

Master React concurrency with startTransition, keep your UI fluid even under heavy load Why it’s essential: • Prioritize user input (typing, clicks) over costly renders • Avoid janky freezes during data-heavy tasks • Ship seamless loading feedback with almost zero boilerplate

RedCodeTex's tweet image. Master React concurrency with startTransition, keep your UI fluid even under heavy load

Why it’s essential:
• Prioritize user input (typing, clicks) over costly renders
• Avoid janky freezes during data-heavy tasks
• Ship seamless loading feedback with almost zero boilerplate


Master React concurrency with startTransition, keep your UI fluid even under heavy load Why it’s essential: • Prioritize user input (typing, clicks) over costly renders • Avoid janky freezes during data-heavy tasks • Ship seamless loading feedback with almost zero boilerplate

RedCodeTex's tweet image. Master React concurrency with startTransition, keep your UI fluid even under heavy load

Why it’s essential:
• Prioritize user input (typing, clicks) over costly renders
• Avoid janky freezes during data-heavy tasks
• Ship seamless loading feedback with almost zero boilerplate

Virtualize huge lists with @tanstack/react-virtual’s useVirtualizer hook so you only render what’s in view for instant, jank-free scrolling. #ReactJS #TanStack #WebPerf #WebDevTips

Render huge lists smoothly with @tan_stack /react-virtual’s useVirtualizer Hook, it virtualizes your list by only rendering visible items. Why it matters • Instant, jank-free scrolling on thousands of items • Lean DOM for blazing speed • Handles dynamic item sizes with ease.

RedCodeTex's tweet image. Render huge lists smoothly with @tan_stack /react-virtual’s useVirtualizer Hook, it virtualizes your list by only rendering visible items.

Why it matters

• Instant, jank-free scrolling on thousands of items
• Lean DOM for blazing speed
• Handles dynamic item sizes with ease.


Virtualize huge lists with @tanstack/react-virtual’s useVirtualizer hook so you only render what’s in view for instant, jank-free scrolling.

Render huge lists smoothly with @tan_stack /react-virtual’s useVirtualizer Hook, it virtualizes your list by only rendering visible items. Why it matters • Instant, jank-free scrolling on thousands of items • Lean DOM for blazing speed • Handles dynamic item sizes with ease.

RedCodeTex's tweet image. Render huge lists smoothly with @tan_stack /react-virtual’s useVirtualizer Hook, it virtualizes your list by only rendering visible items.

Why it matters

• Instant, jank-free scrolling on thousands of items
• Lean DOM for blazing speed
• Handles dynamic item sizes with ease.


Keyboard Shortcuts ⌨️

Level‑up UX with keyboard shortcuts: add Cmd/Ctrl + K to open a command palette (or any feature) in your React app. Why it matters • Power‑user flow feels instant • Great for accessibility, no mouse required #ReactJS #UX #WebDevTips Code snippet in the first comment 👇



Keyboard Shortcuts ⌨️

Level‑up UX with keyboard shortcuts: add Cmd/Ctrl + K to open a command palette (or any feature) in your React app. Why it matters • Power‑user flow feels instant • Great for accessibility, no mouse required #ReactJS #UX #WebDevTips Code snippet in the first comment 👇



React Router’s <ScrollRestoration /> component

To make your UX smoother, you’ll definitely want to save each route’s scroll position, it’s simple but makes all the difference. React Router’s <ScrollRestoration />: • Saves scroll position per route • Restores on Back/Forward navigation Code snippet in the first comment 👇



United States Trends

Loading...

Something went wrong.


Something went wrong.