r/reactjs

I made a small VS Code extension that always puts React Props First in JSX and TSX components autocomplete, aka IntelliSense.

When a component extends DOM props, the props I usually want first, like `variant`, `size`, or `loading`, can get buried under inherited attributes like `disabled`, `onClick`, and `aria-label`.

React Props First changes the ordering in JSX/TSX autocomplete so component specific props are ranked before inherited DOM/ARIA props.

I thought that somebody may find it useful, so I'm leaving it here!

VS Code Marketplace:
GitHub:

Kept seeing the same advice everywhere: wrap things in useMemo, useCallback everything, React.memo all the things.

Then i profiled an app I'd "optimized" this way, the memoization overhead was costing more than the renders it was preventing

with the react compiler now auto-memoizing at build time, most manual useMemo/useCallback is becoming dead weight.

wrote up what actually fixes react performance in practice:

1. state colocation: move state closer to where it's used. this one change beats every useMemo in your codebase. seriously.

2. the children pattern: pass children from above so they don't re-render when parent state changes. zero memoization needed.

3. useTransition: mark non-urgent updates as transitions. input stays responsive, heavy renders happen in background.

4. useDeferredValue: same idea but for values from props you don't control. smarter than debouncing.

5. code splitting: lazy() + Suspense for routes and heavy components. don't lazy-load a button though.

6. profile before optimizing: react devtools profiler, chrome performance tab, core web vitals. if you haven't measured it, don't optimize it.

also covered 5 performance bugs i keep finding in production codebases:

1. components defined inside other components (full remount every render, not re-render)

2. useEffect chains causing cascade re-renders

3. context providers sitting too high in the tree

4. unstable keys (Math.random() as key is surprisingly common)

5. object/array literals in JSX props breaking React.memo

the useEffect chain one is probably the most common. three effects that depend on each other = three render cycles for one user action.

what's the worst react perf bug you've had to track down?