Skip to content

Fix genuine React anti-patterns flagged by lint #34

Description

@dqnykamp

When enabling the ESLint CI job, several pre-existing lint violations were silenced with eslint-disable comments. Three of these are genuine issues worth fixing properly:

1. setState inside useMemo — src/Viewer/Viewer.tsx

setErrMsg is called inside a useMemo callback as error handling for invalid activity source. This is a React anti-pattern that can cause infinite render loops. The error derivation should be restructured — for example, derive the error inline during render (outside useMemo) and use useMemo only for the pure computation.

Rule: react-hooks/set-state-in-render

2. Ref read/write during render — src/activity-viewer.tsx

lastPropSet.current is both read and written during render to track prop changes for variant index generation. Accessing/mutating refs during render is a React anti-pattern. This should be replaced with a useEffect or restructured to avoid the render-time ref mutation entirely.

Rule: react-hooks/refs

3. Untyped spy access in tests — src/test/activityStateReducer.test.ts

spy.mock.lastCall![0].message_id is accessed without typing lastCall[0], requiring file-level disables for no-unsafe-assignment, no-unsafe-member-access, and no-non-null-assertion. Casting to the appropriate message type (e.g., ReportStateMessage) would fix all three.

Rule: @typescript-eslint/no-unsafe-assignment, no-unsafe-member-access, no-non-null-assertion

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Fields

    Priority

    None yet

    Effort

    None yet

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions