Vue Composition API vs React Hooks

article preview image

React Hooks

React Hooks were introduced at React Conf in October of 2018. Hooks solve a variety of problems in React that have encountered over five years of writing and maintaining tens of thousands of components. It was hard to reuse stateful logic between components, if you had a chance to work with React for a while before introducing Hooks, you may be familiar with patterns like render props and higher-order components that try to solve this. Those techniques required you to restructure your components when you use them, which could be tricky and make code harder to follow.

React Hooks can extract stateful logic from a component, which gives you the possibility to test it independently and reuse it when needed. Hooks allow you to reuse stateful logic without changing your component hierarchy, that makes Hooks easy to use among many components or with the community. At first, the community was rather skeptical, but since then Hooks and Function Components have become the standard way of developing React components for many teams. It also lets you split one component into smaller functions based on what pieces are related, rather than forcing a split based on lifecycle methods.

Vue Composition API

twitter screenshot

Evan You, the creator of Vue, has described the Composition API as a reactive API coupled with the ability to register lifecycle hooks using globally imported functions. The main thing is that the Composition API provides a different way to manage reactivity at all points in an application. It was introduced in Vue 3, and lets you use functional components that are stateless with mixins, with it you can define logic or functionality in a particular file and use and even re-use it in a functional component. In other words, the Composition API isn't something totally new to the language. You can think about it as exposing some of the internal functions that Vue already uses and allows us to use these functions directly in components.

Hooks in Vue 3 are basically upgraded version of mixins. It lets you pass logic from one Hook to another as well as use state in a Hook from another Hook. Similar to React, Hooks in Vue are defined in functions that result in an easier and more flexible way to define and share logic.

Vue mixins come in handy when you want to feed your component data that needs to be reused in other components. Mixins are flexible in the case of distributing reusable functionalities for Vue.js components. They can contain any component option if it has been used in that component. The idea of mixins works perfectly when working with small-scale applications. As your project gets larger, you may need to create more mixins to handle other kinds of data that will also be reused in other components. That makes a code harder to read and maintain. The Vue Composition API helps solve this issue by enabling you to define whatever function you need in a separate JavaScript file and import it wherever you need to import it to avoid naming conflicts. You can treat Vue Hooks a bit like an upgraded version of Mixins.

Code Readability

Let’s take a look at the differences between coding in React and Vue, as an example, we’ll use Click Counter from React documentation.

That’s the example using React

import {  useState }  from 'react';

function Example() { 
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked { count}  times</p>
      <button onClick={ () => setCount(count + 1)} >
        Click me
      </button>
    </div>
  );
}

And here is the same example in Vue 3

<script>
import {ref} from ‘vue’

export default {
    setup () {
        return{
            Count: ref(0)
        }
    }
}
</script>

<template>
    <p>You clicked {{count}} times </p>
    <button @click=”count += 1”>
        Click me
    </button>
</template>

As you can notice there are more lines of Vue code, while in the case of React you no longer have individual lines. In general, readability is pretty similar in both examples. The Vue code can be a bit easier to digest. In general, you can say that Vue is not so good in the case of smaller examples like:

// Vue  
setup () {
    return {
        count: ref(0)
    }
}

//React 
const [count, setCount] = useState(0);

On the other hand, that will change a little bit if you decide to add a few more pieces of state, that’s the moment when the Vue looks like the clearer option.

// Vue
setup () {
    return {
        count: ref(0),
        count2: ref(5),
        count3: ref(27)

// React
const [count, setCount] = useState(0);
const [count2, setCount] = useState(5);
const [count3, setCount] = useState(27);

As you can see Vue has a “script” tag and a “template” tag that differentiate them. In React, they save a few lines by putting it all in one function, but it is your role to remember that the setup goes in the main body of the function and the template goes in the return value (except when it is not). It’s hard to decide and almost always it will change a little bit according to actual use of React or Vue. There is one massive difference in case of Vue, check out this fragment.

// Vue
<input type=”text” v-model=”do.it” />

// React
<input
    type=”text”
    value={do.it}
    onChange={e => setName([...do, it: e.target.value)}
/>

While in this example Vue code is pretty clear React has few moving parts that make it less readable. Why is it like that? Well, Vue Team wants to avoid two-way data binding.

Conclusion

In this article, we explained some of the differences between React Hooks and Composition API. In conclusion, both of these APIs allow developers to create great breathtaking apps. The main difference is how they handle changes of state: While React forces us to keep the data immutable and update it through explicit state setters Vue allows us to simply mutate data by wrapping it into a ref.

It's worth mentioning that it’s an exciting time for both frameworks. Since the introduction of React Hooks in 2018, the community has built amazing things with Custom Hooks on the top. Vue is taking inspiration from React Hooks and adapting them in a little bit different way. We hope you learned something about the approach and philosophies of Vue and React. Both can be used to create astonishing applications, and their differences can be seen as advantages, due to other aims in frameworks philosophy.

If u want to discuss the use of React or Vue in your next project - just contact us

We don’t have clients – we have partners