[fix] React state update warning on phone number verification page #668

[PRoIISHAAN]

Checklist

• I have read the OpenWISP Contributing Guidelines.
• I have manually tested the changes proposed in this pull request.
• I have written new test cases for new code and/or updated existing tests for changes to existing code.
• I have updated the documentation.

Reference to Existing Issue

Closes #668 .

Description of Changes

Initializing isComponentMounted = true in the constructor (so methods work normally when called directly in tests)
Setting isComponentMounted = false in componentWillUnmount (preventing state updates after unmount)
Checking isComponentMounted before setState calls in async methods that could complete after unmount
Removing the message event listener in componentWillUnmount

[coderabbitai]

📝 Walkthrough

Walkthrough

The Status React component now tracks its mounted state with an isComponentMounted flag set in the constructor and cleared in componentWillUnmount. Asynchronous flows (token validation, session and radius usage fetches, and error handlers) and message event handling are guarded with checks against this flag to avoid calling setState after unmount. The message event listener is also unregistered during unmount.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and specifically identifies the fix addressing React state update warnings on the phone verification page, directly matching the main changeset.
Description check	✅ Passed	The PR description includes most required sections with clear explanations of changes, though the test and documentation checklist items are unchecked, indicating incomplete coverage.
Linked Issues check	✅ Passed	The code changes directly address issue #668 by implementing the recommended solution to cancel async tasks in componentWillUnmount through the isComponentMounted guard pattern.
Out of Scope Changes check	✅ Passed	All changes are focused on the Status component and directly address the React state update warning issue without introducing unrelated modifications.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

---

📜 Recent review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between cf17109 and 8fd3c9f.

📒 Files selected for processing (1)

• client/components/status/status.js

🚧 Files skipped from review as they are similar to previous changes (1)

• client/components/status/status.js

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

• GitHub Check: Tests and Coverage
• GitHub Check: QA-Checks

_{✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.}

---

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 and usage tips.}