Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: notification memory leak #361

Merged
merged 1 commit into from
Sep 16, 2024
Merged

fix: notification memory leak #361

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions src/NoticeList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@
const { classNames: ctxCls } = useContext(NotificationContext);

const dictRef = useRef<Record<string, HTMLDivElement>>({});
const [latestNotice, setLatestNotice] = useState<HTMLDivElement>(null);
const latestNoticeRef = useRef<HTMLDivElement>(null);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

state 换成 ref 在 concurrent 下容易出问题，应该尽量以 effect 里配对做 state 更新。

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

另外缺 test case

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ref 不会触发更新，会导致样式计算问题

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

我在motion修复了内存泄漏之后 再去测const [latestNotice, setLatestNotice] = useState(null); 好像没有泄露的问题 可能被motion那块影响到了我的判断 麻烦各位大佬测试下 给各位大佬添麻烦了😊 @afc163 @MadCcc
我回去会再去测试这块

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

那先补下上面说的那些？

const [hoverKeys, setHoverKeys] = useState<string[]>([]);

const keys = configList.map((config) => ({
Expand All @@ -72,7 +72,7 @@
// Force update latest notice
useEffect(() => {
if (stack && dictRef.current[keys[keys.length - 1]?.key]) {
setLatestNotice(dictRef.current[keys[keys.length - 1]?.key]);
latestNoticeRef.current = dictRef.current[keys[keys.length - 1]?.key];
}
}, [keys, stack]);

Expand Down Expand Up @@ -115,7 +115,7 @@
if (index > 0) {
stackStyle.height = expanded
? dictRef.current[strKey]?.offsetHeight
: latestNotice?.offsetHeight;
: latestNoticeRef.current?.offsetHeight;

// Transform
let verticalOffset = 0;
Expand All @@ -126,8 +126,8 @@
const transformY =
(expanded ? verticalOffset : index * offset) * (placement.startsWith('top') ? 1 : -1);
const scaleX =
!expanded && latestNotice?.offsetWidth && dictRef.current[strKey]?.offsetWidth
? (latestNotice?.offsetWidth - offset * 2 * (index < 3 ? index : 3)) /
!expanded && latestNoticeRef.current?.offsetWidth && dictRef.current[strKey]?.offsetWidth
? (latestNoticeRef.current?.offsetWidth - offset * 2 * (index < 3 ? index : 3)) /

Check warning on line 130 in src/NoticeList.tsx

View check run for this annotation

Codecov / codecov/patch

src/NoticeList.tsx#L130 

Added line #L130 was not covered by tests
dictRef.current[strKey]?.offsetWidth
: 1;
stackStyle.transform = `translate3d(${transformX}, ${transformY}px, 0) scaleX(${scaleX})`;
Expand Down
Loading