With the abundance of web frameworks available today, it’s fascinating to observe how some of them share striking similarities. In this article, we’ll talk about the similarities between two frameworkds: React and Vue.js. I’ve been working with React a long time now, but I found myself just into the Vue.js world upon transitioning to a new company. At the conclusion of this article, I’ll share my personal preference between the two frameworks. Let’s see together some similarities on their features and maybe this article help you out to make a smoother transition for those familiar with one framework and seeking to move to the other.
While React and Vue.js may diverge in various aspects, it’s remarkable how certain features align in functionality under different names. For convenience, I’ll denote React features with (R) and Vue.js features with (V).
useState (R), useRef (R) and ref (V)
In React, we use the useState hook to add a state variable to our component and we do the same in Vue.js by using refs.
// React
const [name, setName] = useState('Thomas');
// when we want to change the value
setName('Tom');
// Vue.js
const name = ref('Thomas');
// when we want to change the value
name.value = 'Tom';
Moreover, we can use refs from Vue.js the same way as the useRef hook from React when we want to access DOM elements.
// React
const inputRef = useRef(null);
// ...
return <input ref={ inputRef} />;
// Vue.js
const inputRef = ref(null);
// ...
<template>
<input ref="inputRef" />
</template>
useEffect (R) and watch (V)
I know, I know you might be thinking to hell with multiple, and maybe incorrect useEffects, but don’t worry, I’ll keep it simple here to point out the similarity, nothing else. So, there is a second parameter in the useEffect hook which is called dependencies and it’s a list of all reactive values references inside of the setup code. Basically, it watches the values inside that list, which is the thing that watch from Vue.js does.
// React
const name = useState('Thomas');
// ...
useEffect(() => {
// ...
}, [name]);
// Vue.js
const name = ref('Thomas');
watch(name, () => {
// ...
});
Children prop (R) and Slots (Vue.js)
The concept of nested components within a parent component, encapsulated as the Children prop in React, finds its counterpart in Vue.js’ Slots. Notably, Vue.js’ Slots offer the advantage of dynamic slot names.
useContext (R) and Provide/Inject (Vue.js)
Both frameworks introduce mechanisms to avoid prop drilling. The useContext hook helps you read and subscribe to the context you want. You have first to create the context with createContext and then use the context with useContext. While in Vue.js you can inject data provided by an ancestor component by using the inject() function and to provide the data by using the provide() function.
// React
const ThemeContext = createContext(null);
// ...
return (
<ThemeContext.Provider value="light">
// ...
</ThemeContext.Provider>
);
// in the component you want the data
const theme = useContext(ThemeContext);
// Vue.js
const name = ref('Thomas');
provide('name', name);
// in the component you want the data
const name = inject('name');
createPortal (R) and Teleport (V)
Naming here for both frameworks is amazing, and naming in programming is known that it’s hard. createPortal it’s just like creating a magic portal to somewhere in the DOM to throw your component. Teleport does the same job, it teleports your component to somewhere in the DOM. We usually create portals when we want to render elements on top of each other, most of the times those elements are modals.
// React
createPortal(
<p>This is just a component which I want to throw to a magic portal.</p>,
document.body
)
// Vue.js
<Teleport to="body">
<p>This is just a component which I want to throw to a magic portal.</p>
</Teleport>
I love writing frontend code and I really like both frameworks but to be honest I like React more. Maybe the reason is that I’ve been working more time with React. Nevertheless, I needed to learn Vue.js and the truth is, I wanted to learn it too. It has many advantages and many things that might make them better than React.
Also, regarding React, there are some good news from the React teams that they will do an update and it will be a major version which will be the React 19.
