added debouncing to render(): (#6)

* added debouncing to render():
  - setState calls render()
  - render() only reads/writes to DOM at 60fps (even if setState called more often than that)
* updated README

README.md

@@ -566,6 +566,14 @@ Also see [examples/usage-tweenState.js](examples/usage-tweenState.js)
 
 ## Changelog
 
+**1.1.10**
+- better rendering performance: debounce the `render()` function:
+  - `setState()` can be called 1000s of times a second
+  - `setState()` also calls the render() function
+  - `render()` will only update the DOM at 60fps
+- see https://gomakethings.com/debouncing-your-javascript-events/
+- updated README
+
 **1.1.9**
 - new feature: "middleware"
   - define an array of functions as `myComponent.middleware = [ someFunc, otherFunc ]`

examples/usage-in-browser.html

@@ -163,5 +163,13 @@
   console.log('App.log')
   console.log(App.log)
 
+  // Test debouncing of render():
+  // - call setState 10,000 times, fast as possible
+  // - setState calls render() each time
+  // - render() should only try to access/update DOM at 60fps
+  for (var i = 0; i < 10000; i++) {
+    App.plus(1)
+  }
+
   </script>
 </body>

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@scottjarvis/component",
-	"version": "1.1.9",
+	"version": "1.1.10",
 	"description": "Simple component library with state management, DOM diffing, tweening, server-side rendering and more.",
 	"author": "sc0ttj",
 	"license": "MIT",

src/component.js

@@ -6,6 +6,7 @@
 
 // from https://codepen.io/tevko/pen/LzXjKE?editors=0010
 var domDiff = (target, source) => {
+  //console.log("updating DOM!")
   const worker = {
     cfg: {
       orig: target
@@ -116,6 +117,9 @@ function Component(state) {
 
   var self = this
 
+  // for debouncing render() calls
+  var timeout
+
   this.isNode =
     typeof process !== "undefined" &&
     process !== null &&
@@ -404,7 +408,13 @@ function Component(state) {
     } else {
       this.container = el
       // only interact with the DOM once every animation frame (usually 60fps)
-      requestAnimationFrame(() => {
+
+      // If there's a timer, cancel it
+      if (timeout) cancelAnimationFrame(timeout)
+
+      // Setup the new requestAnimationFrame()
+      timeout = requestAnimationFrame(() => {
+        //console.log("debounced")
         // get the container element if needed
         if (typeof el === "string") el = document.querySelector(`${el}`)
         this.container = el