I Regret Not Knowing These 7 React Secrets Before My Senior Interview

I bombed three senior React interviews in a row. The worst part? Each interviewer asked variations of the same questions—and I got them all wrong.

01 Secret #1: useEffect Is a Code Smell

The interview question that broke me: "Why do you need useEffect here?" My answer—"To fetch data when the component mounts"—was wrong. Seniors use React Query for data fetching, not useEffect.

02 Secret #2: The Double Render Is Your Friend

React 18's double render in development isn't a bug—it's a feature. React is testing if your components are pure. If your effect runs twice and breaks, you had a side effect bug that would have corrupted production data.

03 Secret #3: You're Deriving State Wrong

If you can calculate it from props or state, it shouldn't be in useState. Use useMemo to compute derived state during render—no synchronization bugs, always fresh.

04 Secret #4: The List Performance Killer

Using index as key kills performance. Sort your list? Everything re-renders. Add items at start? Everything re-renders. With 10,000 items, your app freezes. Always use stable, unique IDs.

05 Secret #5: Context API Is a Footgun

Putting everything in one context causes 200ms delays on every page. Split by concern or use Zustand. Components should subscribe only to what they need.

06 Secret #6: The Ref Pattern

Stale closures happen when your effect captures old values. The fix: use useRef to keep a mutable reference that stays fresh without re-rendering.

07 Secret #7: Server Components

In Next.js App Router, components default to Server Components. They run on the server, stream HTML, require zero client JS, and are SEO-friendly. Only use Client Components when you need browser APIs.