Skip to content

fix(frontend): resolve set-state-in-effect in SearchAutocomplete (#1063)#1077

Merged
ericsocrat merged 1 commit intomainfrom
chore/react-compiler-search-autocomplete
May 1, 2026
Merged

fix(frontend): resolve set-state-in-effect in SearchAutocomplete (#1063)#1077
ericsocrat merged 1 commit intomainfrom
chore/react-compiler-search-autocomplete

Conversation

@ericsocrat
Copy link
Copy Markdown
Owner

Phase 2 of #1063 — ninth PR, resolves 11 + 12 of 19 violations.

Two react-hooks/set-state-in-effect warnings in SearchAutocomplete.tsx resolved by adjusting state during render instead of inside useEffect:

  1. Refresh recent-searches on dropdown open — replaced [show] effect with a prevShow render-phase tracker. Added a lazy initializer so recentSearches hydrates on mount when show is already true (preserves existing test expectations around initial render).
  2. Reset activeIndex when suggestions/query mode change — replaced the multi-dep effect with a composite resetKey/prevResetKey tracker.

Pattern reference: https://react.dev/learn/you-might-not-need-an-effect#adjusting-some-state-when-a-prop-changes

Behaviour unchanged. 32/32 vitest pass, eslint and tsc clean.

Cross-references prior Phase 2 PRs: #1067, #1069, #1070, #1071, #1072, #1073, #1074, #1075, #1076.

Phase 2 of #1063 -- resolves 2 of 19 violations (running total: 12/19 across 9 PRs).

Two react-hooks/set-state-in-effect warnings in SearchAutocomplete.tsx resolved by adjusting state during render:

1. Refresh recent-searches list on dropdown open: replaced the show-dep useEffect with a prevShow render-phase tracker. Added a lazy initial-state initializer so the list is hydrated on mount when show is already true (preserves existing test contract).

2. Reset activeIndex when suggestions/query change: replaced the multi-dep useEffect with a composite resetKey + prevResetKey render-phase tracker.

Pattern: https://react.dev/learn/you-might-not-need-an-effect#adjusting-some-state-when-a-prop-changes

Behaviour unchanged. 32/32 vitest pass, eslint and tsc clean.

Cross-references: #1067, #1069, #1070, #1071, #1072, #1073, #1074, #1075, #1076.
@vercel
Copy link
Copy Markdown

vercel Bot commented May 1, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
tryvit Ready Ready Preview, Comment May 1, 2026 11:38am

Copilot AI review requested due to automatic review settings May 1, 2026 11:36
@ericsocrat ericsocrat enabled auto-merge (squash) May 1, 2026 11:36
@github-actions
Copy link
Copy Markdown

github-actions Bot commented May 1, 2026

📸 PR Screenshots

Captured 2 screenshots (1 mobile, 1 desktop) for 1 changed page(s):

  • search

📥 Download screenshots from workflow artifacts.

Captured by PR Screenshots workflow • 2026-05-01

@github-actions
Copy link
Copy Markdown

github-actions Bot commented May 1, 2026

Bundle Size Report

Metric Value
Main baseline 0 KB
This PR 0 KB
Delta +0 KB (+0%)
JS chunks 0
Hard limit 4000 KB

✅ Bundle size is within acceptable limits.

Copy link
Copy Markdown

Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull request overview

This PR continues the Phase 2 cleanup for #1063 by removing react-hooks/set-state-in-effect warnings in SearchAutocomplete via the “adjust state during render” pattern, keeping behavior consistent while making the component React-Compiler-friendly.

Changes:

  • Refreshes recentSearches on dropdown closed → open transitions using a render-phase prevShow tracker (and a lazy initializer for initial open renders).
  • Resets activeIndex when suggestion/query-mode inputs change using a render-phase resetKey/prevResetKey tracker.

Comment on lines +185 to 189
const resetKey = `${suggestions.length}|${debouncedQuery}|${isQueryMode}`;
const [prevResetKey, setPrevResetKey] = useState(resetKey);
if (resetKey !== prevResetKey) {
setPrevResetKey(resetKey);
setActiveIndex(-1);
@ericsocrat ericsocrat merged commit e23a487 into main May 1, 2026
22 checks passed
@ericsocrat ericsocrat deleted the chore/react-compiler-search-autocomplete branch May 1, 2026 11:41
ericsocrat added a commit that referenced this pull request May 1, 2026
…#1078)

Resolves 3 react-hooks/set-state-in-effect violations in src/app/app/search/page.tsx (Phase 2 of #1063):

- Mount-load effect: replaced with lazy useState initializers for recentSearches, showAvoided, viewMode (helpers already SSR-safe via globalThis.localStorage guards)

- debouncedQuery sync effect: replaced with Pattern A render-phase tracker (composite submitKey of debouncedQuery + filters)

- page reset effect: replaced with Pattern A render-phase tracker (composite pageResetKey of submittedQuery + filters)

Validated: 54/54 vitest pass, eslint clean, tsc clean. Phase 2 cumulative: 15/19 (final non-deferred multi-violation file).

Cross-refs: #1067 (Phase 1), #1069-#1077 (Phase 2 micro-PRs).

Co-authored-by: ericsocrat <ericsocrat@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants