React Hooks took the web development scene by storm when they were released back in early 2019. They were the reason I gave React a second look, and also why I have loved using it ever since.

Beyond my personal experiences, React Hooks inspired a lot of other developers, articles, tutorials, and even whole UI libraries and frameworks. Among those was Vue and with its Composition API, it showcased its own vision for React Hooks’s “competitor”.

Being a long-time Vue user and React Hooks fan, I simply had to check out Vue 3 and its Composition API. And so I did and loved using it ever since - potentially even more than React Hooks.

With this in mind, after some experimenting, I’ve noticed the single biggest architectural difference between React Hooks and Vue Composition API. A difference that can be the decisive factor when it comes to which API you prefer using.

I casually call this difference “IN vs OUT”, and today would like to explain it to you. Let’s get into it!

View rendering

To understand the “IN vs OUT” difference, or rather the very meaning of it, you have to first understand, how both APIs work, especially within the bigger “rendering context” of both UI frameworks.

React

In React, Hooks can be used in function components. These, on the other hand, work like render() methods in legacy class-based components. On every re-render, the whole function gets executed, running from top to bottom… except for hooks.

import React, { useState, useEffect } from "react";

const Example = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log(`You clicked ${count} times`);
  }, [count]);

  return (

      You clicked {count} times
       setCount(count + 1)}>Click me

  );
};

#vue #react #javascript #framework