114: Sebastian De Deyne - React for Vue Developers

What It Covers

Sebastian De Deyne explains React concepts from a Vue developer perspective, comparing framework philosophies, implementation patterns for computed properties, events, slots, and transitions, while highlighting React's simpler API surface area versus Vue's feature-rich approach.

Key Questions Answered

• •Framework Philosophy: React optimizes for simplicity with minimal API surface (props and components), while Vue optimizes for ease with specialized features like computed properties, methods, and data sections. React requires more JavaScript knowledge but less framework-specific learning compared to Vue's configuration-based approach.
• •Computed Properties Implementation: React handles computed values through plain JavaScript variables for simple cases or the useMemo hook for performance optimization. Unlike Vue's automatic dependency tracking, React requires explicit dependency arrays, making the computation logic visible and controllable rather than magical behind-the-scenes reactivity.
• •Events as Props Pattern: React eliminates custom events entirely by passing callback functions as props prefixed with "on" (onClick, onChange). This collapses Vue's three separate concepts (props, events, slots) into one unified prop system, reducing framework-specific knowledge while maintaining identical functionality through standard JavaScript patterns.
• •Slots via Children Prop: React passes default slot content through a children prop automatically, handles named slots by passing JSX directly in props, and implements scoped slots using functions that return JSX. This approach makes lazy evaluation explicit rather than hidden behind Vue's slot scope attribute syntax.
• •Renderless Component Ecosystem: React's ecosystem emphasizes renderless component libraries that provide logic without opinionated styling, giving developers total control. Vue lacks equivalent libraries because building renderless components requires writing render functions with the h function, which contradicts Vue's template-first philosophy and remains unfamiliar to most developers.