arrow_backTech Blog
code
codeFrontend2026-01-25·7 min read

From Vue3 to React: Reflections on Switching Tech Stacks

A Vue developer's journey to React — comparing core differences, mindset shifts, and recommended learning paths.

Vue3ReactTypeScript

Why Switch?

Vue is a great framework, but for ecosystem breadth and international job market considerations, learning React systematically became necessary.

Switching stacks isn't denying the past — it's expanding future possibilities. The reactive thinking Vue taught me remains valuable in React.

To be clear: I'm not "abandoning Vue for React" but building bilateral capabilities. Vue remains dominant in the Chinese market, but React's ecosystem breadth (Next.js, React Native, Electron) and international opportunities make it essential.

Core Differences

Reactivity Model

The most fundamental difference between the two frameworks:

  • •Vue3：`ref/reactive` auto-tracks dependencies — data changes, UI updates automatically. Developers don't worry about "when to re-render"
  • •React：`useState` + manual updates — each setState triggers full component (and children) re-render. Developers must actively optimize (useMemo, useCallback, React.memo)
    • Vue's reactivity is like "automatic transmission," React's state management like "manual." Automatic is effortless; manual gives more control. Neither is objectively better.

    Template vs JSX

  • •Vue SFC：Intuitive template syntax, HTML-familiar developers onboard quickly. `v-if`, `v-for` have learning curves but are efficient once mastered
  • •React JSX：JavaScript-first, logic and UI intermixed. Ternary expressions and `.map()` replace template directives — more flexible, readability varies by person
    • 💡

    When moving from Vue to React, the biggest mindset shift: don't look for "equivalent directives." JSX is JavaScript — all control flow uses native JS syntax.

    State Management

  • •Vue：Pinia (formerly Vuex), stores are reactive — change and it updates
  • •React：Too many choices — Context, Zustand, Jotai, Redux Toolkit, Recoil… This "choice anxiety" isn't beginner-friendly

    • I ultimately chose Zustand. Reasons: clean API, no Provider wrapping needed, great TypeScript support, closest feel to Pinia.

    Phase 1: Core Concepts (1-2 weeks)

    1
    Understand the hooks mental model：Each render is a snapshot. useState doesn't "modify a variable" — it "requests a new render"
    2
    Master core hooks：useState, useEffect, useRef, useContext — these four cover 80% of scenarios
    3
    Understand re-render mechanics：Why do components re-render? When do you need useMemo?

    Phase 2: Framework Deep Dive (2-4 weeks)

    Skip CRA, start with Next.js for full-stack from day one. App Router provides routing, SSR, API Routes out of the box.

  • •Server Components：Vue has no direct equivalent — takes time to internalize
  • •Data fetching：From `onMounted + axios` to async Server Components
  • •Routing：From Vue Router's centralized config to file-system routing

    • Phase 3: Real Projects (ongoing)

    Rewriting a familiar Vue project in React is the most effective learning method. You already know the requirements and logic — just focus on "how to express this in React."

    Common Pitfalls for Vue Developers

  • •Pitfall 1：Looking for a `computed` replacement → In React, most computed values don't need useMemo — just calculate in the render function
  • •Pitfall 2：Putting complex logic in useEffect → useEffect handles synchronization side effects, not Vue's watch. useEffect abuse is the most common React beginner mistake
  • •Pitfall 3：Overusing Context for global state → Context changes cause all consumers to re-render — not suitable for frequently updating state
    • ⚠️

    useEffect is React's most easily abused hook. The official docs have a dedicated article "You Might Not Need an Effect" — highly recommended reading.

    TypeScript Is the Bridge

    TypeScript is the common language of both frameworks with the lowest migration cost. Vue3 Composition API and React Hooks TypeScript patterns are remarkably similar:

  • Props type definitions are nearly identical
  • Generics usage patterns are universal
  • Custom hooks/composables type inference follows the same logic
    • If you're already using TypeScript + Composition API in Vue3, the React learning curve will be smoother than expected.

    Conclusion

    The switch was smoother than anticipated. Core reason: modern frontend frameworks are converging on fundamentals — componentization, declarative UI, hooks/composables patterns, TypeScript.

    Both frameworks have strengths. The ability to flexibly choose based on project needs is the most valuable skill.

    💡

    Don't label yourself a "Vue developer" or "React developer." Frameworks are tools — solving problems is the goal.

    code