githubnext/chopinPublic

Let's compose rich plans together

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

Mergedgithub-actions[bot]botmerged 2 commits intomainfromrefs/pull/144/head
  1. ## Effect location and classification

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

    ```tsx 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] > <details> > <summary>Firewall blocked 1 domain</summary> > > 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: > > ```yaml > network: > allowed: > - defaults > - "releaseassets.githubusercontent.com" > ``` > > See [Network Configuration](https://github.github.com/gh-aw/reference/network/) for more information. > > </details>

    > Generated by [Weekly React Effect review](https://github.com/githubnext/chopin/actions/runs/33609511949) · auto · 54.5 AIC · ⌖ 3.37 AIC · ⊞ 8.8K · [◷](https://github.com/search?q=repo%3Agithubnext%2Fchopin+%22gh-aw-workflow-id%3A+weekly-use-effect-review%22&type=pullrequests)

    <!-- gh-aw-agentic-workflow: Weekly React Effect review, engine: copilot, model: auto, id: 33609511949, workflow_id: weekly-use-effect-review, run: https://github.com/githubnext/chopin/actions/runs/33609511949 -->

    <!-- gh-aw-workflow-id: weekly-use-effect-review --> <!-- gh-aw-workflow-call-id: githubnext/chopin/weekly-use-effect-review -->

  2. MaggieAppletonready-for-review2 months ago on GitHub

  3. MaggieAppletonmerged 9882eb3a13812 months ago on GitHub

  4. MaggieAppletonclosed2 months ago on GitHub

  5. MaggieAppletonhead-ref-deleted2 months ago on GitHub