Skip to content

[use-effect] fix(web): replace reset Effect with render-time state adjustment in RepositoryPicker - #144

Open
github-actions[bot] wants to merge 2 commits into
mainfrom
automation/use-effect/avatar-failed-reset-a7190393254b52c2
Open

[use-effect] fix(web): replace reset Effect with render-time state adjustment in RepositoryPicker#144
github-actions[bot] wants to merge 2 commits into
mainfrom
automation/use-effect/avatar-failed-reset-a7190393254b52c2

Conversation

@github-actions

@github-actions github-actions Bot commented Sep 2, 2026

Copy link
Copy Markdown

Effect location and classification

RepositoryPicker in apps/web/src/repository-picker.tsx (around line 100)
had:

useEffect(() => setAvatarFailed(false), [current?.ownerAvatarUrl]);

This is a reset-or-adjust-state Effect: it resets local avatarFailed
state whenever the current?.ownerAvatarUrl prop changes, so a previous
onError failure for one repository's avatar doesn't leak into the next
repository shown.

Why it was incorrect

This is a textbook "adjusting state when a prop changes" case that the React
docs explicitly call out as not needing an Effect. Using useEffect here
means React renders once with stale avatarFailed state, then re-renders
after the Effect runs — an extra render pass and a flash of the fallback
avatar/initial before the reset takes effect.

Selected refactor

Replaced the Effect with the recommended "adjust state during render" pattern:
track the previous ownerAvatarUrl in a piece of state, and if it differs
from the current prop, call setAvatarFailed (and update the tracked value)
directly during render. React discards this render and immediately re-renders
with the updated state, avoiding the extra Effect-driven render/flash while
keeping the reset logic co-located with the state it adjusts.

Verification

Ran a scoped tsc --noEmit --skipLibCheck typecheck over apps/web
(bun/tsgo were unavailable in this sandbox, so the workspace's pinned
TypeScript binary was invoked directly as the closest equivalent to
bun run types): no errors were reported, including none for
repository-picker.tsx.

Warning

Firewall blocked 1 domain

The following domain was blocked by the firewall during workflow execution:

  • releaseassets.githubusercontent.com

To allow these domains, add them to the network.allowed list in your workflow frontmatter:

network:
  allowed:
    - defaults
    - "releaseassets.githubusercontent.com"

See Network Configuration for more information.

Generated by Weekly React Effect review · auto · 54.5 AIC · ⌖ 3.37 AIC · ⊞ 8.8K ·

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@MaggieAppleton
MaggieAppleton marked this pull request as ready for review September 3, 2026 07:27
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.

1 participant