React Refresh for Devs getting back to react

Hi Learners!
If you are like me who lost touch to react ecosystem in past year or so,
here are the things you might want to catch up with –

1. Functional Components are the Standard

• Class components are pretty much legacy now.
• Everything is function-based, with hooks handling state, effects, and lifecycle.

2. Hooks Evolution

• useState, useEffect, useContext — you know these.
• Newer/lesser-known ones you should catch up on:
  • useReducer → for complex state logic (Redux-lite).
  • useCallback & useMemo → performance optimizations.
  • useRef → DOM refs & mutable values.
  • useId (React 18) → generate unique IDs for accessibility, lists, forms.
  • useTransition & useDeferredValue (React 18) → concurrent rendering & smoother UX.

3. React 18 Features (important milestone)

• Automatic Batching: multiple state updates in async callbacks are batched automatically.
• Concurrent Rendering: React can interrupt rendering to keep the UI responsive.
• Streaming SSR: better server-side rendering performance.
• Suspense for Data Fetching: async rendering without “loading” spaghetti.

4. Data Fetching (New Era)

• Old: useEffect + fetch → local state.
• Now: People use React Query (TanStack Query) or SWR.
• With Next.js 13/14 (App Router), React Server Components (RSC) let you fetch data directly on the server in components (no client-side fetching needed unless dynamic).

5. Server Components (RSC)

• Major shift. Some components run only on the server, never bundled to the client.
• Benefits:
  • Zero JS shipped for server-only logic.
  • Fetch data directly in the component.

Example:

// Server Component
async function UserProfile({ id }) {
  const user = await db.user.findById(id);
  return <div>{user.name}</div>;
}

// Server Component
async function UserProfile({ id }) {
  const user = await db.user.findById(id);
  return <div>{user.name}</div>;
}

6. State Management

• Redux is still alive but less dominant.
• Zustand, Jotai, and Recoil are popular lighter alternatives.
• For most apps, Context + Reducer + React Query is enough.

7. Styling

• Old days: CSS-in-JS everywhere.
• Now: TailwindCSS dominates.
• CSS Modules & Vanilla Extract are also in.

8. Tooling

• Vite > CRA (faster bundling).
• Next.js 14 with Turbopack (blazing fast builds).
• React DevTools got upgrades for profiling concurrent rendering.

With this much things explored, you are pretty much good to get back in writing your ideas to code with ease,

Happy Building!

Best,
Anmoldeep