refactor: remove derived state from useEffect in verify-email and app-card

[majiayu000]

Summary

Replace useState + useEffect patterns with direct computation for values that are purely derived from other state/props, following React's recommendation.

Fixes #25194

Changes

• verify-email.tsx: shouldButtonDisabled was computed inside useEffect from verificationCode and isDeleting. Replaced with a direct const computation since it's purely derived state.
• overview/app-card.tsx: isAppAccessSet was computed inside useEffect from appDetail and appAccessSubjects. Replaced with a direct const computation. Also removed the unused useEffect import.

Rationale

Per the eslint-react rule and React docs, calling useState setters directly inside useEffect for derived values causes unnecessary re-renders and adds complexity. Direct computation is simpler and more efficient.

This is an incremental PR targeting the clearest derived-state cases. More cases can be addressed in follow-up PRs.

Test plan

• All pre-commit checks pass (ESLint, TypeScript type-check, unit tests)
• The logic is equivalent: both values are computed from the same inputs with identical expressions

[gemini-code-assist]

Summary of Changes

Hello, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request refactors two React components, verify-email.tsx and app-card.tsx, to improve their performance and maintainability. It addresses the common anti-pattern of using useState and useEffect to manage state that can be directly derived from existing props or state. By switching to direct computation, the components avoid unnecessary re-renders and simplify their logic, adhering to best practices for React development.

Highlights

• Refactor Derived State: Replaced useState and useEffect patterns with direct computation for values that are purely derived from other state or props, aligning with React's recommendations for managing derived state.
• Improved Performance and Readability: Eliminated unnecessary re-renders and reduced complexity by computing derived values directly, making the components more efficient and easier to understand.
• ESLint Suppression Removal: Removed specific ESLint suppressions related to react-hooks-extra/no-direct-set-state-in-use-effect for the refactored files, as the underlying issues have been resolved.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Changelog

• web/app/account/(commonLayout)/delete-account/components/verify-email.tsx
  • Removed the useEffect import.
  • Refactored shouldButtonDisabled from a state managed by useEffect to a directly computed constant.
• web/app/components/app/overview/app-card.tsx
  • Removed the useEffect import.
  • Refactored isAppAccessSet from a state managed by useEffect to a directly computed constant.
• web/eslint-suppressions.json
  • Removed ESLint suppression for react-hooks-extra/no-direct-set-state-in-use-effect in verify-email.tsx.
  • Removed ESLint suppression for react-hooks-extra/no-direct-set-state-in-use-effect in app-card.tsx.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request successfully refactors the verify-email.tsx and app-card.tsx components by removing derived state from useEffect hooks and replacing them with direct computations. This change aligns with React best practices for managing derived state, leading to simpler, more efficient, and more readable code. The refactoring correctly identifies and addresses the cases where useState and useEffect were unnecessarily used for values that are purely dependent on other state or props. This is a positive improvement to the codebase.