KPC
Kevin Powell - Community•2mo ago
Faker

Purpose of "reactivity" in JS frameworks

Hello, can someone explain what is the purpose of "reactivity" in frameworks like vue or react pls. For e.g, consider this piece of code: 
<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>States in JS</title>

  </head>

  <body>

    <button class="clickMe">0</button>

    <script>

      let count = 0;

      const btn = document.querySelector(".clickMe");

      btn.addEventListener("click", () => {

        count++;

        btn.textContent = count;

      });

    </script>

  </body>

</html>
<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>States in JS</title>

  </head>

  <body>

    <button class="clickMe">0</button>

    <script>

      let count = 0;

      const btn = document.querySelector(".clickMe");

      btn.addEventListener("click", () => {

        count++;

        btn.textContent = count;

      });

    </script>

  </body>

</html>
This is reactive in the sense that count is getting updated on the UI, no?
6 Replies
Jochem
Jochem•2mo ago
I'm not sure I understand what you're asking, if you're giving the answer right under the code you shared. It's so the UI updates when variables change though I wouldn't describe your code as "reactive" in this case reactivity is usually reserved for the "automatic" way the UI updates when you change reactive variables in component frameworks in react, you'd use setCount(count + 1) and that both updates the internally stored value of count and updates the UI for you
Faker
FakerOP•2mo ago
yeah, I see, don't know why I had this confusion but in my head it was a question like: "if using this small snippet of code we can provide some reactive states, then why use frameworks" but this isn't truly reactive, I guess in this scenario it works but in other scenario there are lots of things that I would have to do which frameworks would handle that using useState() in react for e.g Also, I have the illusion that we only use frameworks to keep track of states but this is really more than that, right? Like using frameworks, some have supports to SPA, PWA etc?
ἔρως
ἔρως•2mo ago
don't forget about routing, asset management and other features
Jochem
Jochem•2mo ago
For this button it's overkill, but now make an infinite scroll for a site like blue sky It's like saying "why do we have trucks if I can carry things in my hands?"
Faker
FakerOP•2mo ago
yeahh I see, thanks !!
StefanH
StefanH•2mo ago
Older thread but to add onto this, your code here is in imperative and retained style Imperative: The code goes from top to bottom. When an event happens, that event handler is responsible for telling ui elements to change what they show Retained: The UI elements remember their own state. To update, something has to call function on that component to change The point of reactivity is to basically "derive" new state from old state. Reactivity allows you to listen to when a variable has its value updated and it doesn't matter what changed it or why. I find that this approach tends to be much easier to write, maintain and understand. It eliminates having multiple sources of truth. If you have 5 pieces of code all updating some div to change what value it shows up, how do you know what the actual truth is? Reactivity allows you to extend state easier too. If you just want to create a value that always represents the user name of an email address string, you can just listen to that email string and derive the value from it. You don't need to change the email string code and add a new function call to its onChange event or something While the web is still a retained mode ui, reactive frameworks like react allow you to write as if your ui is kind of immediate mode. You don't need to concern yourself with changing the dom manually and having multiple pieces of code all messing around with your dom, you just create a reactive value and let the dom derive its state from that automatically

Did you find this page helpful?