Reactivity in Javascript

Read Time:2 Minute, 5 Second

👀 What is Reactivity?

It’s the ability of a piece of code to automatically update or re-render in response to changes in the data it is bound to.

Let’s try to understand clearly by ⏬

Reactivity in Javascript

Selling Price and Buying Price are two state variables on which the value of Profit depends.

Explanation

In the case of a Reactive System,

The profit variable will be updated upon any changes in Selling Price or Buying Price.

In the initial state, Selling price is 500 and Buying Price is 300, So the Profit will be (500-300) = 200.

When we update buying Price to 100, the Profit is recalculated automatically and updated to (500-100)=400

In the case of a non-reactive system,

Upon any changes in Selling Price or Buying Price, the profit variable will not be updated until calculateProfit() gets called again.

So, In the initial state, Selling price is 500 and Buying Price is 300, So the Profit will be (500-300) = 200.

When we update buying Price to 100, the Profit remains the same as before. (500-300) = 200


🤔 Where is the Reactivity concept used?

The reactivity concept is in the ❤️ of all modern frontend frameworks (React, Next.js, Vue.js, etc.).

Some important parts where this concept and programming practice are used –

  • useState hook of React.js

  • re-render widgets when some bounded state variable got updated


🚀🚀 Let us start building a reactive system

Start with a simple non-reactive system

Enter fullscreen mode Exit fullscreen mode

Let us begin creating a reactive system

Step 1: Create a Dependency Class

Manage the dependencies, who need to be notified when this data got updated or modified.

Enter fullscreen mode Exit fullscreen mode

Let’s see that in action

Enter fullscreen mode Exit fullscreen mode

Step 2: Play with the getter and setter

A dictionary to store initial values

Enter fullscreen mode Exit fullscreen mode

Let’s set getter and setter for the specified key

Enter fullscreen mode Exit fullscreen mode

Let’s see that in action

Enter fullscreen mode Exit fullscreen mode

Output –

Image description

Step 3: Create a watch function to make the process a little bit easy

Enter fullscreen mode Exit fullscreen mode

Step 4: Wrap up !!!

Enter fullscreen mode Exit fullscreen mode

Congratulations 🎉🎉

You may have gained an amazing concept from this blog. If you like it, please share it with your friends.

Source: https://dev.to/tanmoysarkar/reactivity-in-javascript-2833

WP Ad Inserter plugin for WordPress

Tag Cloud

Java Java Logical Programs OTP Generation in Java python Recursion youtube video ASCII Upper and Lower Case blockchain javascript graph learn to code software development Successful Software Engineers breadth first search Java Array Programs Java Programs Uncategorized android ios programming kotlin web-development django data sql cybersecurity database swiftui serverless aws swift rust react background-position gradients loader mask grid nth-child pseudo elements indieweb WordPress Print Array without brackets C++ factorial Java String Programs Final Keyword Static Variable Axie Infinity Cryptokitties NFT games tool inserting MISC Tips Codes python code python projects python3 system info python project Bigginers How to Do Integrations Payment Gateways PHP checkout page in php Implement stripe payment gateway in Step by step in PHP integrate stripe gatway in php mysql payment gateway integration in php step by step payment gateway integration in php step by step with source code payment gateway integration in website PHP Integrate Stripe Payment Gateway Tutorial PHP shopping cart checkout code shopping cart in php stripe php checkout PHP/MySQL/JSON best international payment gateway does google pay accept international payments how to accept international payments in india paytm payment gateway razorpay codeigniter github razorpay custom checkout github razorpay get payment details razorpay integration in codeigniter github razorpay international payments Razorpay payment gateway integration in CodeIgniter razorpay payment gateway integration in php code Razorpay payment gateway integration with PHP and CodeIgniter Razorpay payment gateway setup in CodeIgniter Library & Frameworks Tips & Tricks UI/UX & Front-end coding birds online html code for google sign in login with google account in PHP login with google account using javascript login with google account using javascript codeigniter login with google account using php login with google account using php source code
A Cheatsheet For Git Previous post A Cheatsheet For Git
The Ultimate guide of all 24 CSS Viewport Units Next post The Ultimate guide of all 24 CSS Viewport Units

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.