fix: switch observation when getter target changes

[nrps9909]

Summary

• reconcile the resolved resize-observer target after every render
• remove the listener from the previous element before observing a replacement
• preserve the existing stable-getter null-to-element behavior without re-observing unchanged targets

Problem

A stable target getter can resolve to a different element after a render. The current effect depends on the getter identity, so an element A to element B change leaves the listener attached to A and never observes B.

Testing

• regression test failed on the exact base: the listener remained attached to the first element after switching
• npm test -- tests/useResizeObserver.spec.tsx --runInBand (2 passed)
• npm test -- --runInBand (4 suites, 21 tests passed)
• npm run tsc
• npm run compile (ESM, CJS, and declarations)
• npm run lint (0 errors; 2 pre-existing unused-disable warnings in observerUtil.ts)
• git diff --check
• verified every current open PR changed-file list; no overlap with the modified hook or test

AI assistance disclosure: Codex was used to trace the lifecycle bug, implement the fix, run the exact-base regression proof and validation, audit open PR overlap, and draft this PR. All behavior and test results above were verified locally.

Summary by CodeRabbit

• Bug Fixes

  • 优化元素尺寸变化监听：当目标元素发生切换时，现可正确停止监听旧元素并开始监听新元素。
  • 禁用监听时不再继续观察目标元素，提升监听行为的稳定性。

• Tests

  • 新增测试，验证目标元素动态切换后，监听逻辑能够正确跟随新元素。

[vercel]

@nrps9909 is attempting to deploy a commit to the afc163's projects Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 205bbce0-e942-4031-8894-c32a921d0fda

📥 Commits

Reviewing files that changed from the base of the PR and between fb3863c and 82ffe88.

📒 Files selected for processing (2)

• src/useResizeObserver.ts
• tests/useResizeObserver.spec.tsx

Included review availability: Your plan provides up to 2 included reviews per hour; 1 remains after this review.

---

Walkthrough

本次变更重构 useResizeObserver 的观察目标跟踪和卸载清理逻辑。新增测试验证稳定 getter 解析到不同 DOM 元素时，观察目标会正确切换。

Changes

ResizeObserver 目标切换

Layer / File(s)	Summary
观察目标跟踪与清理 src/useResizeObserver.ts	使用 observedTargetRef 保存当前观察目标。仅当解析后的目标变化时执行 unobserve 和 observe。独立 effect 负责卸载清理。
目标切换验证 tests/useResizeObserver.spec.tsx	新增 fireEvent 导入。测试稳定 getter 在两个 DOM 元素之间切换时，观察目标从第一个元素转移到第二个元素。

Estimated code review effort: 3 (Moderate) | ~20 minutes

Merge Risk: ⚪ Minimal · up to 82ffe

The hook now switches observation from an old DOM element to its replacement without re-observing unchanged targets, with cleanup preserved. No actionable merge-blocking risk remains after normal checks and review.

Poem

小兔看着目标换，
第一个元素轻轻放。
稳定 getter 不改名，
观察连接转向新地方。
清理逻辑分开跑，
测试按钮验证忙。

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 2 functions across 2 files.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	标题准确概括了主要变更：当 getter 返回的目标元素变化时，切换 resize observation。标题简洁、具体，并与代码和测试变更一致。
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

• Fix all pre-merge checks with AI

✨ Finishing Touches 💡 1

🛠️ Fix failing CI checks 💡

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}