Fix resize handler: use ref to avoid stale closure and listener churn
Register resize listener once with empty deps; track left via ref so the debounced callback always reads the current offset without re-registering on every click. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
b0eaca462f
commit
b41113f318
1 changed files with 22 additions and 1 deletions
|
|
@ -1,5 +1,5 @@
|
||||||
import { h, render } from "https://esm.sh/preact@10";
|
import { h, render } from "https://esm.sh/preact@10";
|
||||||
import { useState, useRef } from "https://esm.sh/preact@10/hooks";
|
import { useState, useEffect, useRef } from "https://esm.sh/preact@10/hooks";
|
||||||
import { html } from "https://esm.sh/htm@3/preact";
|
import { html } from "https://esm.sh/htm@3/preact";
|
||||||
|
|
||||||
const TESTIMONIALS = [
|
const TESTIMONIALS = [
|
||||||
|
|
@ -54,6 +54,27 @@ function Testimonials() {
|
||||||
setLeft(function (l) { return Math.max(-maxL, l - STEP); });
|
setLeft(function (l) { return Math.max(-maxL, l - STEP); });
|
||||||
};
|
};
|
||||||
|
|
||||||
|
var leftRef = useRef(left);
|
||||||
|
leftRef.current = left;
|
||||||
|
|
||||||
|
useEffect(function () {
|
||||||
|
var timer;
|
||||||
|
function onResize() {
|
||||||
|
clearTimeout(timer);
|
||||||
|
timer = setTimeout(function () {
|
||||||
|
var max = measureMax();
|
||||||
|
if (-leftRef.current > max) {
|
||||||
|
setLeft(-max);
|
||||||
|
}
|
||||||
|
}, 150);
|
||||||
|
}
|
||||||
|
window.addEventListener("resize", onResize);
|
||||||
|
return function () {
|
||||||
|
clearTimeout(timer);
|
||||||
|
window.removeEventListener("resize", onResize);
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
var atStart = left >= 0;
|
var atStart = left >= 0;
|
||||||
|
|
||||||
return html`
|
return html`
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue