useState: Prevent updating when the value hasn't changed (#392)

* fix: useState updater

* Prevent updating when the value hasn't changed

Closes #273

* Use a changeset

* Use Object.is for comparison

Co-authored-by: Mateusz Olsztyński <[email protected]>

Author: matthewp

.changeset/khaki-elephants-fold.md

@@ -0,0 +1,5 @@
+---
+"haunted": patch
+---
+
+Prevent a setState that doesn't change the state from resulting in a rerender

package-lock.json

@@ -44,6 +44,7 @@
     "@rocket/cli": "^0.9.8",
     "@rocket/launch": "^0.5.4",
     "@rocket/search": "^0.4.1",
+    "@types/mocha": "^9.1.1",
     "@web/dev-server-esbuild": "^0.3.0",
     "@web/test-runner": "^0.13.18",
     "cem-plugin-jsdoc-function": "^0.0.5",

package.json

@@ -45,7 +45,7 @@ class HauntedControllerHost implements ReactiveControllerHost {
   requestUpdate(): void {
     if (!this._updatePending) {
       this._updatePending = true;
-      microtask.then(() => this.kick(this.count + 1));
+      microtask.then(() => this.kick(this.count += 1));
     }
   }
 

src/use-controller.ts

@@ -29,12 +29,16 @@ const useState = hook(class<T> extends Hook {
   }
 
   updater(value: NewState<T>): void {
+    const [previousValue] = this.args;
     if (typeof value === 'function') {
       const updaterFn = value as (previousState?: T) => T;
-      const [previousValue] = this.args;
       value = updaterFn(previousValue);
     }
 
+    if (Object.is(previousValue, value)) {
+      return;
+    }
+
     this.makeArgs(value);
     this.state.update();
   }

src/use-state.ts

@@ -24,4 +24,29 @@ describe('useState', () => {
     await nextFrame();
     expect(span.textContent).to.equal('33');
   });
+
+  it('Updater function should only trigger rerender if state has changed', async () => {
+    const tag = 'use-state-callback-two';
+    let setter, runs = 0;
+
+    function App() {
+      runs++;
+      let [age, setAge] = useState(() => 8);
+      setter = setAge;
+      return html`<span>${age}</span>`;
+    }
+
+    customElements.define(tag, component(App));
+
+    const el = await fixture<HTMLElement>(html`<use-state-callback-two></use-state-callback-two>`);
+
+    let span = el.shadowRoot.firstElementChild;
+    expect(span.textContent).to.equal('8');
+
+    setter(8);
+
+    await nextFrame();
+
+    expect(runs).to.equal(1);
+  });
 });