React Review Audit

[reactreview]

⚠️ 43 warnings

Copy as prompt

Fix the following React Review diagnostics in my codebase.

## Warnings (43)

1. [warning] anchor-is-valid — src/pages/form/advanced-form/index.tsx:164
   The `a` element has `href` and `onClick`.

2. [warning] no-giant-component — src/pages/form/advanced-form/index.tsx:66
   Component "AdvancedForm" is 490 lines — consider breaking it into smaller focused components

3. [warning] no-prevent-default — src/pages/form/advanced-form/index.tsx:164
   preventDefault() on <a> onClick — use a <button> or routing component instead

4. [warning] anchor-is-valid — src/pages/list/basic-list/index.tsx:174
   Use of incorrect `href` for the 'a' element.

5. [warning] anchor-is-valid — src/pages/list/basic-list/index.tsx:232
   The `a` element has `href` and `onClick`.

6. [warning] no-prevent-default — src/pages/list/basic-list/index.tsx:232
   preventDefault() on <a> onClick — use a <button> or routing component instead

7. [warning] anchor-is-valid — src/pages/user/register-result/index.tsx:12
   Use of incorrect `href` for the 'a' element.

8. [warning] anchor-is-valid — src/pages/profile/advanced/index.tsx:153
   Use of incorrect `href` for the 'a' element.

9. [warning] anchor-is-valid — src/pages/profile/advanced/index.tsx:308
   Use of incorrect `href` for the 'a' element.

10. [warning] anchor-is-valid — src/pages/result/fail/index.tsx:25
   Use of incorrect `href` for the 'a' element.

11. [warning] anchor-is-valid — src/pages/result/fail/index.tsx:43
   Use of incorrect `href` for the 'a' element.

12. [warning] anchor-is-valid — src/pages/list/card-list/index.tsx:25
   Use of incorrect `href` for the 'a' element.

13. [warning] anchor-is-valid — src/pages/list/card-list/index.tsx:32
   Use of incorrect `href` for the 'a' element.

14. [warning] anchor-is-valid — src/pages/list/card-list/index.tsx:39
   Use of incorrect `href` for the 'a' element.

15. [warning] anchor-is-valid — src/pages/list/card-list/index.tsx:82
   Use of incorrect `href` for the 'a' element.

16. [warning] anchor-is-valid — src/pages/list/card-list/index.tsx:85
   Use of incorrect `href` for the 'a' element.

17. [warning] anchor-is-valid — src/pages/list/card-list/index.tsx:98
   Use of incorrect `href` for the 'a' element.

18. [warning] anchor-is-valid — src/pages/table-list/index.tsx:61
   The `a` element has `href` and `onClick`.

19. [warning] anchor-is-valid — src/pages/table-list/index.tsx:200
   Use of incorrect `href` for the 'a' element.

20. [warning] no-giant-component — src/pages/table-list/index.tsx:20
   Component "TableList" is 327 lines — consider breaking it into smaller focused components

21. [warning] no-prevent-default — src/pages/table-list/index.tsx:61
   preventDefault() on <a> onClick — use a <button> or routing component instead

22. [warning] anchor-is-valid — src/pages/list/search/projects/index.tsx:53
   Use of incorrect `href` for the 'a' element.

23. [warning] query-mutation-missing-invalidation — src/pages/user/register/index.tsx:88
   useMutation without a cache update — stale data may remain after the mutation. Call queryClient.invalidateQueries / setQueryData / resetQueries / refetchQueries inside onSuccess (or trigger a router refresh)

24. [warning] no-render-in-render — src/pages/user/register/index.tsx:192
   Inline render function "renderPasswordProgress()" — extract to a separate component for proper reconciliation

25. [warning] anchor-is-valid — src/pages/result/success/index.tsx:54
   Use of incorrect `href` for the 'a' element.

26. [warning] anchor-is-valid — src/pages/user/login/index.tsx:400
   Use of incorrect `href` for the 'a' element.

27. [warning] no-giant-component — src/pages/user/login/index.tsx:112
   Component "Login" is 306 lines — consider breaking it into smaller focused components

28. [warning] anchor-is-valid — src/pages/dashboard/workplace/index.tsx:121
   Use of incorrect `href` for the 'a' element.

29. [warning] anchor-is-valid — src/pages/dashboard/workplace/index.tsx:284
   Use of incorrect `href` for the 'a' element.

30. [warning] anchor-is-valid — src/components/TagSelect/index.tsx:139
   The `a` element has `href` and `onClick`.

31. [warning] no-prevent-default — src/components/TagSelect/index.tsx:139
   preventDefault() on <a> onClick — use a <button> or routing component instead

32. [warning] anchor-is-valid — src/pages/account/settings/components/security.tsx:23
   Use of incorrect `href` for the 'a' element.

33. [warning] anchor-is-valid — src/pages/account/settings/components/security.tsx:32
   Use of incorrect `href` for the 'a' element.

34. [warning] anchor-is-valid — src/pages/account/settings/components/security.tsx:41
   Use of incorrect `href` for the 'a' element.

35. [warning] anchor-is-valid — src/pages/account/settings/components/security.tsx:50
   Use of incorrect `href` for the 'a' element.

36. [warning] anchor-is-valid — src/pages/account/settings/components/security.tsx:59
   Use of incorrect `href` for the 'a' element.

37. [warning] anchor-is-valid — src/pages/account/center/components/Projects/index.tsx:39
   Use of incorrect `href` for the 'a' element.

38. [warning] rerender-lazy-state-init — src/pages/dashboard/analysis/index.tsx:32
   useState(getTimeDistance()) calls initializer on every render — use useState(() => getTimeDistance()) for lazy initialization

39. [warning] anchor-is-valid — src/pages/list/search/articles/index.tsx:183
   The `a` element has `href` and `onClick`.

40. [warning] no-prevent-default — src/pages/list/search/articles/index.tsx:183
   preventDefault() on <a> onClick — use a <button> or routing component instead

41. [warning] anchor-is-valid — src/pages/account/settings/components/binding.tsx:15
   Use of incorrect `href` for the 'a' element.

42. [warning] anchor-is-valid — src/pages/account/settings/components/binding.tsx:25
   Use of incorrect `href` for the 'a' element.

43. [warning] anchor-is-valid — src/pages/account/settings/components/binding.tsx:35
   Use of incorrect `href` for the 'a' element.

---

⚠️ Warnings (43)

The `a` element has `href` and `onClick`. _{· 32 in 16 files}

_{anchor-is-valid}

Use a button element instead of an a element.

File	Lines
src/pages/list/card-list/index.tsx	25, 32, 39, 82, 85, 98
src/pages/account/settings/components/security.tsx	23, 32, 41, 50, 59
src/pages/account/settings/components/binding.tsx	15, 25, 35
src/pages/list/basic-list/index.tsx	174, 232
src/pages/profile/advanced/index.tsx	153, 308
…and 11 more files	view on react.review

preventDefault() on <a> onClick — use a <button> or routing component instead _{· 5 in 5 files}

_{no-prevent-default}

Use <form action> (works without JS) where your framework supports it, or use a <button> instead of <a> with preventDefault

File	Lines
src/pages/form/advanced-form/index.tsx	164
src/pages/list/basic-list/index.tsx	232
src/pages/table-list/index.tsx	61
src/components/TagSelect/index.tsx	139
src/pages/list/search/articles/index.tsx	183

Component "AdvancedForm" is 490 lines — consider breaking it into smaller focused components _{· 3 in 3 files}

_{no-giant-component}

Extract logical sections into focused components: <UserHeader />, <UserActions />, etc.

File	Lines
src/pages/form/advanced-form/index.tsx	66
src/pages/table-list/index.tsx	20
src/pages/user/login/index.tsx	112

useMutation without a cache update — stale data may remain after the mutation. Call queryClient.invalidateQueries / setQueryData / resetQueries / refetchQueries inside onSuccess (or trigger a router refresh) _{· 1 in 1 file}

_{query-mutation-missing-invalidation}

Add onSuccess: () => queryClient.invalidateQueries({ queryKey: ['...'] }) so cached data stays in sync after the mutation

File	Lines
src/pages/user/register/index.tsx	88

Inline render function "renderPasswordProgress()" — extract to a separate component for proper reconciliation _{· 1 in 1 file}

_{no-render-in-render}

Extract to a named component: const ListItem = ({ item }) => <div>{item.name}</div>

File	Lines
src/pages/user/register/index.tsx	192

useState(getTimeDistance()) calls initializer on every render — use useState(() => getTimeDistance()) for lazy initialization _{· 1 in 1 file}

_{rerender-lazy-state-init}

Wrap in an arrow function so it only runs once: useState(() => expensiveComputation())

File	Lines
src/pages/dashboard/analysis/index.tsx	32

---

^{Reviewed by reactreview for commit e4d15a0. Configure here.}