React Review Audit

<table><tr>
<td align="center" valign="middle">⚠️ <strong>110</strong> warnings</td>
<td align="center" valign="middle"><img src="https://react.review/api/gauge?score=86" width="48" align="middle" alt="86 score"></td>
</tr></table>

<details>
<summary>Copy as prompt</summary>

```text
Fix the following React Review diagnostics in my codebase.

## Warnings (110)

1. [warning] label-has-associated-control — src/components/GlobalVarForm.tsx:50
   A form label must be associated with a control — use `htmlFor` or nest the input.

2. [warning] control-has-associated-label — src/components/GlobalVarForm.tsx:51
   A control must be associated with a text label — add visible text, `aria-label`, or `aria-labelledby`.

3. [warning] label-has-associated-control — src/components/GlobalVarForm.tsx:60
   A form label must be associated with a control — use `htmlFor` or nest the input.

4. [warning] control-has-associated-label — src/components/GlobalVarForm.tsx:61
   A control must be associated with a text label — add visible text, `aria-label`, or `aria-labelledby`.

5. [warning] button-has-type — src/components/GlobalVarForm.tsx:79
   `<button>` elements must have an explicit `type` attribute.

6. [warning] button-has-type — src/components/GlobalVarForm.tsx:82
   `<button>` elements must have an explicit `type` attribute.

7. [warning] button-has-type — src/components/GlobalVarForm.tsx:85
   `<button>` elements must have an explicit `type` attribute.

8. [warning] js-tosorted-immutable — src/utils/fuzzy.ts:41
   [...array].sort() — use array.toSorted() for immutable sorting (ES2023)

9. [warning] js-set-map-lookups — src/utils/fuzzy.ts:52
   array.includes() in a loop is O(n) per call — convert to a Set for O(1) lookups

10. [warning] prefer-useReducer — src/components/ScriptRunner.tsx:34
   Component "ScriptRunner" has 8 useState calls — consider useReducer for related state

11. [warning] button-has-type — src/components/ScriptRunner.tsx:111
   `<button>` elements must have an explicit `type` attribute.

12. [warning] button-has-type — src/components/ScriptRunner.tsx:116
   `<button>` elements must have an explicit `type` attribute.

13. [warning] button-has-type — src/components/ScriptRunner.tsx:126
   `<button>` elements must have an explicit `type` attribute.

14. [warning] button-has-type — src/components/ScriptRunner.tsx:136
   `<button>` elements must have an explicit `type` attribute.

15. [warning] no-array-index-key — src/components/ScriptRunner.tsx:144
   Array index in `key` doesn't uniquely identify the element — re-renders may use stale state.

16. [warning] no-array-index-as-key — src/components/ScriptRunner.tsx:144
   Array index "i" used as key — causes bugs when list is reordered or filtered

17. [warning] control-has-associated-label — src/components/ScriptRunner.tsx:146
   A control must be associated with a text label — add visible text, `aria-label`, or `aria-labelledby`.

18. [warning] button-has-type — src/components/ScriptRunner.tsx:152
   `<button>` elements must have an explicit `type` attribute.

19. [warning] button-has-type — src/components/ScriptRunner.tsx:176
   `<button>` elements must have an explicit `type` attribute.

20. [warning] button-has-type — src/components/ScriptRunner.tsx:186
   `<button>` elements must have an explicit `type` attribute.

21. [warning] button-has-type — src/components/ScriptRunner.tsx:197
   `<button>` elements must have an explicit `type` attribute.

22. [warning] button-has-type — src/components/ScriptRunner.tsx:203
   `<button>` elements must have an explicit `type` attribute.

23. [warning] button-has-type — src/components/ScriptRunner.tsx:210
   `<button>` elements must have an explicit `type` attribute.

24. [warning] no-array-index-key — src/components/ScriptRunner.tsx:211
   Array index in `key` doesn't uniquely identify the element — re-renders may use stale state.

25. [warning] no-array-index-as-key — src/components/ScriptRunner.tsx:211
   Array index "i" used as key — causes bugs when list is reordered or filtered

26. [warning] no-giant-component — src/components/SettingsView.tsx:11
   Component "SettingsView" is 314 lines — consider breaking it into smaller focused components

27. [warning] prefer-useReducer — src/components/SettingsView.tsx:11
   Component "SettingsView" has 9 useState calls — consider useReducer for related state

28. [warning] no-cascading-set-state — src/components/SettingsView.tsx:66
   4 setState calls in a single useEffect — consider using useReducer or deriving state

29. [warning] exhaustive-deps — src/components/SettingsView.tsx:89
   The ref value `saveTimer.current` will likely have changed by the time this effect cleanup function runs. Copy it to a variable inside the hook callback and use that variable in cleanup.

30. [warning] control-has-associated-label — src/components/SettingsView.tsx:176
   A control must be associated with a text label — add visible text, `aria-label`, or `aria-labelledby`.

31. [warning] button-has-type — src/components/SettingsView.tsx:176
   `<button>` elements must have an explicit `type` attribute.

32. [warning] button-has-type — src/components/SettingsView.tsx:198
   `<button>` elements must have an explicit `type` attribute.

33. [warning] control-has-associated-label — src/components/SettingsView.tsx:201
   A control must be associated with a text label — add visible text, `aria-label`, or `aria-labelledby`.

34. [warning] button-has-type — src/components/SettingsView.tsx:210
   `<button>` elements must have an explicit `type` attribute.

35. [warning] control-has-associated-label — src/components/SettingsView.tsx:213
   A control must be associated with a text label — add visible text, `aria-label`, or `aria-labelledby`.

36. [warning] control-has-associated-label — src/components/SettingsView.tsx:235
   A control must be associated with a text label — add visible text, `aria-label`, or `aria-labelledby`.

37. [warning] button-has-type — src/components/SettingsView.tsx:264
   `<button>` elements must have an explicit `type` attribute.

38. [warning] button-has-type — src/components/SettingsView.tsx:286
   `<button>` elements must have an explicit `type` attribute.

39. [warning] button-has-type — src/components/SettingsView.tsx:307
   `<button>` elements must have an explicit `type` attribute.

40. [warning] button-has-type — src/components/SettingsView.tsx:344
   `<button>` elements must have an explicit `type` attribute.

41. [warning] button-has-type — src/components/SettingsView.tsx:351
   `<button>` elements must have an explicit `type` attribute.

42. [warning] button-has-type — src/components/Sidebar.tsx:78
   `<button>` elements must have an explicit `type` attribute.

43. [warning] button-has-type — src/components/Sidebar.tsx:89
   `<button>` elements must have an explicit `type` attribute.

44. [warning] button-has-type — src/components/Sidebar.tsx:98
   `<button>` elements must have an explicit `type` attribute.

45. [warning] button-has-type — src/components/Sidebar.tsx:107
   `<button>` elements must have an explicit `type` attribute.

46. [warning] button-has-type — src/components/Sidebar.tsx:115
   `<button>` elements must have an explicit `type` attribute.

47. [warning] button-has-type — src/components/Sidebar.tsx:123
   `<button>` elements must have an explicit `type` attribute.

48. [warning] button-has-type — src/components/Sidebar.tsx:131
   `<button>` elements must have an explicit `type` attribute.

49. [warning] click-events-have-key-events — src/components/Sidebar.tsx:142
   Visible non-interactive elements with click handlers must have a corresponding keyboard listener (`onKeyUp`, `onKeyDown`, or `onKeyPress`).

50. [warning] no-static-element-interactions — src/components/Sidebar.tsx:142
   Static HTML elements with event handlers require a role — add `role="…"` or use a semantic HTML element instead.

51. [warning] click-events-have-key-events — src/components/Sidebar.tsx:156
   Visible non-interactive elements with click handlers must have a corresponding keyboard listener (`onKeyUp`, `onKeyDown`, or `onKeyPress`).

52. [warning] no-static-element-interactions — src/components/Sidebar.tsx:156
   Static HTML elements with event handlers require a role — add `role="…"` or use a semantic HTML element instead.

53. [warning] button-has-type — src/components/Sidebar.tsx:161
   `<button>` elements must have an explicit `type` attribute.

54. [warning] button-has-type — src/components/Sidebar.tsx:165
   `<button>` elements must have an explicit `type` attribute.

55. [warning] button-has-type — src/components/Sidebar.tsx:169
   `<button>` elements must have an explicit `type` attribute.

56. [warning] js-flatmap-filter — src/index.tsx:98
   .map().filter(Boolean) iterates twice — use .flatMap() to transform and filter in a single pass

57. [warning] button-has-type — src/index.tsx:133
   `<button>` elements must have an explicit `type` attribute.

58. [warning] control-has-associated-label — src/index.tsx:157
   A control must be associated with a text label — add visible text, `aria-label`, or `aria-labelledby`.

59. [warning] button-has-type — src/index.tsx:165
   `<button>` elements must have an explicit `type` attribute.

60. [warning] button-has-type — src/index.tsx:242
   `<button>` elements must have an explicit `type` attribute.

61. [warning] button-has-type — src/index.tsx:292
   `<button>` elements must have an explicit `type` attribute.

62. [warning] button-has-type — src/index.tsx:298
   `<button>` elements must have an explicit `type` attribute.

63. [warning] button-has-type — src/index.tsx:301
   `<button>` elements must have an explicit `type` attribute.

64. [warning] button-has-type — src/index.tsx:348
   `<button>` elements must have an explicit `type` attribute.

65. [warning] button-has-type — src/index.tsx:379
   `<button>` elements must have an explicit `type` attribute.

66. [warning] button-has-type — src/index.tsx:385
   `<button>` elements must have an explicit `type` attribute.

67. [warning] button-has-type — src/index.tsx:388
   `<button>` elements must have an explicit `type` attribute.

68. [warning] prefer-useReducer — src/components/PackagesView.tsx:10
   Component "PackagesView" has 5 useState calls — consider useReducer for related state

69. [warning] no-derived-state — src/components/PackagesView.tsx:30
   Avoid storing derived state. "packages" is only set here, and thus could be computed directly during render.

70. [warning] design-no-three-period-ellipsis — src/components/PackagesView.tsx:73
   Three-period ellipsis ("...") in JSX text — use the actual ellipsis character "…" (or `&hellip;`)

71. [warning] control-has-associated-label — src/components/PackagesView.tsx:85
   A control must be associated with a text label — add visible text, `aria-label`, or `aria-labelledby`.

72. [warning] button-has-type — src/components/PackagesView.tsx:93
   `<button>` elements must have an explicit `type` attribute.

73. [warning] click-events-have-key-events — src/components/PackagesView.tsx:107
   Visible non-interactive elements with click handlers must have a corresponding keyboard listener (`onKeyUp`, `onKeyDown`, or `onKeyPress`).

74. [warning] no-static-element-interactions — src/components/PackagesView.tsx:107
   Static HTML elements with event handlers require a role — add `role="…"` or use a semantic HTML element instead.

75. [warning] button-has-type — src/components/PackagesView.tsx:128
   `<button>` elements must have an explicit `type` attribute.

76. [warning] button-has-type — src/components/PackagesView.tsx:133
   `<button>` elements must have an explicit `type` attribute.

77. [warning] no-derived-state — src/components/PackagesView.tsx:167
   Avoid storing derived state. Compute "installed" directly during render, optionally with `useMemo` if it's expensive.

78. [warning] design-no-three-period-ellipsis — src/components/PackagesView.tsx:189
   Three-period ellipsis ("...") in JSX text — use the actual ellipsis character "…" (or `&hellip;`)

79. [warning] button-has-type — src/components/PackagesView.tsx:196
   `<button>` elements must have an explicit `type` attribute.

80. [warning] button-has-type — src/components/PackagesView.tsx:205
   `<button>` elements must have an explicit `type` attribute.

81. [warning] button-has-type — src/components/PackagesView.tsx:210
   `<button>` elements must have an explicit `type` attribute.

82. [warning] no-array-index-key — src/components/PackagesView.tsx:227
   Array index in `key` doesn't uniquely identify the element — re-renders may use stale state.

83. [warning] no-array-index-as-key — src/components/PackagesView.tsx:227
   Array index "i" used as key — causes bugs when list is reordered or filtered

84. [warning] prefer-useReducer — src/components/TriggerForm.tsx:15
   Component "TriggerForm" has 7 useState calls — consider useReducer for related state

85. [warning] button-has-type — src/components/TriggerForm.tsx:85
   `<button>` elements must have an explicit `type` attribute.

86. [warning] label-has-associated-control — src/components/TriggerForm.tsx:91
   A form label must be associated with a control — use `htmlFor` or nest the input.

87. [warning] control-has-associated-label — src/components/TriggerForm.tsx:92
   A control must be associated with a text label — add visible text, `aria-label`, or `aria-labelledby`.

88. [warning] label-has-associated-control — src/components/TriggerForm.tsx:101
   A form label must be associated with a control — use `htmlFor` or nest the input.

89. [warning] control-has-associated-label — src/components/TriggerForm.tsx:103
   A control must be associated with a text label — add visible text, `aria-label`, or `aria-labelledby`.

90. [warning] button-has-type — src/components/TriggerForm.tsx:121
   `<button>` elements must have an explicit `type` attribute.

91. [warning] label-has-associated-control — src/components/TriggerForm.tsx:137
   A form label must be associated with a control — use `htmlFor` or nest the input.

92. [warning] control-has-associated-label — src/components/TriggerForm.tsx:138
   A control must be associated with a text label — add visible text, `aria-label`, or `aria-labelledby`.

93. [warning] control-has-associated-label — src/components/TriggerForm.tsx:150
   A control must be associated with a text label — add visible text, `aria-label`, or `aria-labelledby`.

94. [warning] button-has-type — src/components/TriggerForm.tsx:164
   `<button>` elements must have an explicit `type` attribute.

95. [warning] button-has-type — src/components/TriggerForm.tsx:167
   `<button>` elements must have an explicit `type` attribute.

96. [warning] js-set-map-lookups — src/components/CodeEditor.tsx:93
   array.indexOf() in a loop is O(n) per call — convert to a Set for O(1) lookups

97. [warning] no-danger — src/components/CodeEditor.tsx:296
   Do not use `dangerouslySetInnerHTML` — it injects raw HTML and is a common XSS vector.

98. [warning] control-has-associated-label — src/components/CodeEditor.tsx:298
   A control must be associated with a text label — add visible text, `aria-label`, or `aria-labelledby`.

99. [warning] button-has-type — src/components/ScriptLangView.tsx:174
   `<button>` elements must have an explicit `type` attribute.

100. [warning] no-array-index-as-key — src/components/ScriptLangView.tsx:179
   Array index "i" used as key — causes bugs when list is reordered or filtered

101. [warning] no-array-index-key — src/components/ScriptLangView.tsx:181
   Array index in `key` doesn't uniquely identify the element — re-renders may use stale state.

102. [warning] no-initialize-state — src/components/ScriptLangView.tsx:221
   Avoid initializing state in an effect. Instead, initialize "activeSection"'s `useState()` with "undefined". For SSR hydration, prefer `useSyncExternalStore()`.

103. [warning] control-has-associated-label — src/components/ScriptLangView.tsx:252
   A control must be associated with a text label — add visible text, `aria-label`, or `aria-labelledby`.

104. [warning] button-has-type — src/components/ScriptLangView.tsx:260
   `<button>` elements must have an explicit `type` attribute.

105. [warning] button-has-type — src/components/ScriptLangView.tsx:267
   `<button>` elements must have an explicit `type` attribute.

106. [warning] no-array-index-key — src/components/ScriptLangView.tsx:300
   Array index in `key` doesn't uniquely identify the element — re-renders may use stale state.

107. [warning] no-array-index-as-key — src/components/ScriptLangView.tsx:300
   Array index "i" used as key — causes bugs when list is reordered or filtered

108. [warning] unused-dependency — package.json:0
   Unused dependency: `@codemirror/basic-setup`

109. [warning] unused-dependency — package.json:0
   Unused dependency: `@codemirror/lang-javascript`

110. [warning] unused-dependency — package.json:0
   Unused dependency: `@codemirror/theme-one-dark`
```

</details>

---

### ⚠️ Warnings (110)

<details>
<summary>`&lt;button&gt;` elements must have an explicit `type` attribute. <sub>· 54 in 8 files</sub></summary>

<sub><code>button-has-type</code></sub>

> Set `type="button"` (or `"submit"` / `"reset"`) explicitly on every `&lt;button&gt;`.

| File | Lines |
| --- | --- |
| [`src/components/ScriptRunner.tsx`](https://github.com/TrigrApp/Trigr/blob/a2de2f8d593ff7ce34bccf3919260fa7a8b211de/src/components/ScriptRunner.tsx#L111) | 111, 116, 126, 136, 152, 176, 186, 197, +2 more |
| [`src/components/Sidebar.tsx`](https://github.com/TrigrApp/Trigr/blob/a2de2f8d593ff7ce34bccf3919260fa7a8b211de/src/components/Sidebar.tsx#L78) | 78, 89, 98, 107, 115, 123, 131, 161, +2 more |
| [`src/index.tsx`](https://github.com/TrigrApp/Trigr/blob/a2de2f8d593ff7ce34bccf3919260fa7a8b211de/src/index.tsx#L133) | 133, 165, 242, 292, 298, 301, 348, 379, +2 more |
| [`src/components/SettingsView.tsx`](https://github.com/TrigrApp/Trigr/blob/a2de2f8d593ff7ce34bccf3919260fa7a8b211de/src/components/SettingsView.tsx#L176) | 176, 198, 210, 264, 286, 307, 344, 351 |
| [`src/components/PackagesView.tsx`](https://github.com/TrigrApp/Trigr/blob/a2de2f8d593ff7ce34bccf3919260fa7a8b211de/src/components/PackagesView.tsx#L93) | 93, 128, 133, 196, 205, 210 |
| _…and 3 more files_ | [view on react.review](https://react.review/repo/TrigrApp/Trigr) |

</details>

<details>
<summary>A control must be associated with a text label — add visible text, `aria-label`, or `aria-labelledby`. <sub>· 15 in 8 files</sub></summary>

<sub><code>control-has-associated-label</code></sub>

> Every interactive control must have an accessible label.

| File | Lines |
| --- | --- |
| [`src/components/SettingsView.tsx`](https://github.com/TrigrApp/Trigr/blob/a2de2f8d593ff7ce34bccf3919260fa7a8b211de/src/components/SettingsView.tsx#L176) | 176, 201, 213, 235 |
| [`src/components/TriggerForm.tsx`](https://github.com/TrigrApp/Trigr/blob/a2de2f8d593ff7ce34bccf3919260fa7a8b211de/src/components/TriggerForm.tsx#L92) | 92, 103, 138, 150 |
| [`src/components/GlobalVarForm.tsx`](https://github.com/TrigrApp/Trigr/blob/a2de2f8d593ff7ce34bccf3919260fa7a8b211de/src/components/GlobalVarForm.tsx#L51) | 51, 61 |
| [`src/components/ScriptRunner.tsx`](https://github.com/TrigrApp/Trigr/blob/a2de2f8d593ff7ce34bccf3919260fa7a8b211de/src/components/ScriptRunner.tsx#L146) | 146 |
| [`src/index.tsx`](https://github.com/TrigrApp/Trigr/blob/a2de2f8d593ff7ce34bccf3919260fa7a8b211de/src/index.tsx#L157) | 157 |
| _…and 3 more files_ | [view on react.review](https://react.review/repo/TrigrApp/Trigr) |

</details>

<details>
<summary>A form label must be associated with a control — use `htmlFor` or nest the input. <sub>· 5 in 2 files</sub></summary>

<sub><code>label-has-associated-control</code></sub>

> Associate every label with a control via `htmlFor` or by nesting the input.

| File | Lines |
| --- | --- |
| [`src/components/TriggerForm.tsx`](https://github.com/TrigrApp/Trigr/blob/a2de2f8d593ff7ce34bccf3919260fa7a8b211de/src/components/TriggerForm.tsx#L91) | 91, 101, 137 |
| [`src/components/GlobalVarForm.tsx`](https://github.com/TrigrApp/Trigr/blob/a2de2f8d593ff7ce34bccf3919260fa7a8b211de/src/components/GlobalVarForm.tsx#L50) | 50, 60 |

</details>

<details>
<summary>Array index in `key` doesn't uniquely identify the element — re-renders may use stale state. <sub>· 5 in 3 files</sub></summary>

<sub><code>no-array-index-key</code></sub>

> Use a stable, data-derived `key` instead of the array index.

| File | Lines |
| --- | --- |
| [`src/components/ScriptRunner.tsx`](https://github.com/TrigrApp/Trigr/blob/a2de2f8d593ff7ce34bccf3919260fa7a8b211de/src/components/ScriptRunner.tsx#L144) | 144, 211 |
| [`src/components/ScriptLangView.tsx`](https://github.com/TrigrApp/Trigr/blob/a2de2f8d593ff7ce34bccf3919260fa7a8b211de/src/components/ScriptLangView.tsx#L181) | 181, 300 |
| [`src/components/PackagesView.tsx`](https://github.com/TrigrApp/Trigr/blob/a2de2f8d593ff7ce34bccf3919260fa7a8b211de/src/components/PackagesView.tsx#L227) | 227 |

</details>

<details>
<summary>Array index "i" used as key — causes bugs when list is reordered or filtered <sub>· 5 in 3 files</sub></summary>

<sub><code>no-array-index-as-key</code></sub>

> Use a stable unique identifier: `key={item.id}` or `key={item.slug}` — index keys break on reorder/filter

| File | Lines |
| --- | --- |
| [`src/components/ScriptRunner.tsx`](https://github.com/TrigrApp/Trigr/blob/a2de2f8d593ff7ce34bccf3919260fa7a8b211de/src/components/ScriptRunner.tsx#L144) | 144, 211 |
| [`src/components/ScriptLangView.tsx`](https://github.com/TrigrApp/Trigr/blob/a2de2f8d593ff7ce34bccf3919260fa7a8b211de/src/components/ScriptLangView.tsx#L179) | 179, 300 |
| [`src/components/PackagesView.tsx`](https://github.com/TrigrApp/Trigr/blob/a2de2f8d593ff7ce34bccf3919260fa7a8b211de/src/components/PackagesView.tsx#L227) | 227 |

</details>

<details>
<summary>Component "ScriptRunner" has 8 useState calls — consider useReducer for related state <sub>· 4 in 4 files</sub></summary>

<sub><code>prefer-useReducer</code></sub>

> Group related state: `const [state, dispatch] = useReducer(reducer, { field1, field2, ... })`

| File | Lines |
| --- | --- |
| [`src/components/ScriptRunner.tsx`](https://github.com/TrigrApp/Trigr/blob/a2de2f8d593ff7ce34bccf3919260fa7a8b211de/src/components/ScriptRunner.tsx#L34) | 34 |
| [`src/components/SettingsView.tsx`](https://github.com/TrigrApp/Trigr/blob/a2de2f8d593ff7ce34bccf3919260fa7a8b211de/src/components/SettingsView.tsx#L11) | 11 |
| [`src/components/PackagesView.tsx`](https://github.com/TrigrApp/Trigr/blob/a2de2f8d593ff7ce34bccf3919260fa7a8b211de/src/components/PackagesView.tsx#L10) | 10 |
| [`src/components/TriggerForm.tsx`](https://github.com/TrigrApp/Trigr/blob/a2de2f8d593ff7ce34bccf3919260fa7a8b211de/src/components/TriggerForm.tsx#L15) | 15 |

</details>

<details>
<summary>Visible non-interactive elements with click handlers must have a corresponding keyboard listener (`onKeyUp`, `onKeyDown`, or `onKeyPress`). <sub>· 3 in 2 files</sub></summary>

<sub><code>click-events-have-key-events</code></sub>

> Pair `onClick` with `onKeyUp` / `onKeyDown` / `onKeyPress` for keyboard users.

| File | Lines |
| --- | --- |
| [`src/components/Sidebar.tsx`](https://github.com/TrigrApp/Trigr/blob/a2de2f8d593ff7ce34bccf3919260fa7a8b211de/src/components/Sidebar.tsx#L142) | 142, 156 |
| [`src/components/PackagesView.tsx`](https://github.com/TrigrApp/Trigr/blob/a2de2f8d593ff7ce34bccf3919260fa7a8b211de/src/components/PackagesView.tsx#L107) | 107 |

</details>

<details>
<summary>Static HTML elements with event handlers require a role — add `role="…"` or use a semantic HTML element instead. <sub>· 3 in 2 files</sub></summary>

<sub><code>no-static-element-interactions</code></sub>

> Static HTML elements with event handlers require a role, or use a semantic HTML element instead.

| File | Lines |
| --- | --- |
| [`src/components/Sidebar.tsx`](https://github.com/TrigrApp/Trigr/blob/a2de2f8d593ff7ce34bccf3919260fa7a8b211de/src/components/Sidebar.tsx#L142) | 142, 156 |
| [`src/components/PackagesView.tsx`](https://github.com/TrigrApp/Trigr/blob/a2de2f8d593ff7ce34bccf3919260fa7a8b211de/src/components/PackagesView.tsx#L107) | 107 |

</details>

<details>
<summary>Unused dependency: `@codemirror/basic-setup` <sub>· 3 in 1 file</sub></summary>

<sub><code>unused-dependency</code></sub>

> Remove the dependency from package.json if it is genuinely unused.

| File | Lines |
| --- | --- |
| [`package.json`](https://github.com/TrigrApp/Trigr/blob/a2de2f8d593ff7ce34bccf3919260fa7a8b211de/package.json#L0) | 0, 0, 0 |

</details>

<details>
<summary>array.includes() in a loop is O(n) per call — convert to a Set for O(1) lookups <sub>· 2 in 2 files</sub></summary>

<sub><code>js-set-map-lookups</code></sub>

> Use a `Set` or `Map` for repeated membership tests / keyed lookups — `Array.includes`/`find` is O(n) per call

| File | Lines |
| --- | --- |
| [`src/utils/fuzzy.ts`](https://github.com/TrigrApp/Trigr/blob/a2de2f8d593ff7ce34bccf3919260fa7a8b211de/src/utils/fuzzy.ts#L52) | 52 |
| [`src/components/CodeEditor.tsx`](https://github.com/TrigrApp/Trigr/blob/a2de2f8d593ff7ce34bccf3919260fa7a8b211de/src/components/CodeEditor.tsx#L93) | 93 |

</details>

<details>
<summary>Avoid storing derived state. "packages" is only set here, and thus could be computed directly during render. <sub>· 2 in 1 file</sub></summary>

<sub><code>no-derived-state</code></sub>

> Compute derived state inline during render (or with useMemo if expensive) instead of mirroring it into useState via a useEffect. See https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state

| File | Lines |
| --- | --- |
| [`src/components/PackagesView.tsx`](https://github.com/TrigrApp/Trigr/blob/a2de2f8d593ff7ce34bccf3919260fa7a8b211de/src/components/PackagesView.tsx#L30) | 30, 167 |

</details>

<details>
<summary>Three-period ellipsis ("...") in JSX text — use the actual ellipsis character "…" (or `&hellip;`) <sub>· 2 in 1 file</sub></summary>

<sub><code>design-no-three-period-ellipsis</code></sub>

> Use the typographic ellipsis "…" (or `&hellip;`) instead of three periods — pairs with action-with-followup labels ("Rename…", "Loading…")

| File | Lines |
| --- | --- |
| [`src/components/PackagesView.tsx`](https://github.com/TrigrApp/Trigr/blob/a2de2f8d593ff7ce34bccf3919260fa7a8b211de/src/components/PackagesView.tsx#L73) | 73, 189 |

</details>

<details>
<summary>[...array].sort() — use array.toSorted() for immutable sorting (ES2023) <sub>· 1 in 1 file</sub></summary>

<sub><code>js-tosorted-immutable</code></sub>

> Use `array.toSorted()` (ES2023) instead of `[...array].sort()` for immutable sorting without the spread allocation

| File | Lines |
| --- | --- |
| [`src/utils/fuzzy.ts`](https://github.com/TrigrApp/Trigr/blob/a2de2f8d593ff7ce34bccf3919260fa7a8b211de/src/utils/fuzzy.ts#L41) | 41 |

</details>

<details>
<summary>Component "SettingsView" is 314 lines — consider breaking it into smaller focused components <sub>· 1 in 1 file</sub></summary>

<sub><code>no-giant-component</code></sub>

> Extract logical sections into focused components: `&lt;UserHeader /&gt;`, `&lt;UserActions /&gt;`, etc.

| File | Lines |
| --- | --- |
| [`src/components/SettingsView.tsx`](https://github.com/TrigrApp/Trigr/blob/a2de2f8d593ff7ce34bccf3919260fa7a8b211de/src/components/SettingsView.tsx#L11) | 11 |

</details>

<details>
<summary>4 setState calls in a single useEffect — consider using useReducer or deriving state <sub>· 1 in 1 file</sub></summary>

<sub><code>no-cascading-set-state</code></sub>

> Combine into useReducer: `const [state, dispatch] = useReducer(reducer, initialState)`

| File | Lines |
| --- | --- |
| [`src/components/SettingsView.tsx`](https://github.com/TrigrApp/Trigr/blob/a2de2f8d593ff7ce34bccf3919260fa7a8b211de/src/components/SettingsView.tsx#L66) | 66 |

</details>

<details>
<summary>The ref value `saveTimer.current` will likely have changed by the time this effect cleanup function runs. Copy it to a variable inside the hook callback and use that variable in cleanup. <sub>· 1 in 1 file</sub></summary>

<sub><code>exhaustive-deps</code></sub>

> List every value the hook callback captures in its dependency array.

| File | Lines |
| --- | --- |
| [`src/components/SettingsView.tsx`](https://github.com/TrigrApp/Trigr/blob/a2de2f8d593ff7ce34bccf3919260fa7a8b211de/src/components/SettingsView.tsx#L89) | 89 |

</details>

<details>
<summary>.map().filter(Boolean) iterates twice — use .flatMap() to transform and filter in a single pass <sub>· 1 in 1 file</sub></summary>

<sub><code>js-flatmap-filter</code></sub>

> Use `.flatMap(item =&gt; condition ? [value] : [])` — transforms and filters in a single pass instead of creating an intermediate array

| File | Lines |
| --- | --- |
| [`src/index.tsx`](https://github.com/TrigrApp/Trigr/blob/a2de2f8d593ff7ce34bccf3919260fa7a8b211de/src/index.tsx#L98) | 98 |

</details>

<details>
<summary>Do not use `dangerouslySetInnerHTML` — it injects raw HTML and is a common XSS vector. <sub>· 1 in 1 file</sub></summary>

<sub><code>no-danger</code></sub>

> Render trusted content as React children rather than injecting raw HTML.

| File | Lines |
| --- | --- |
| [`src/components/CodeEditor.tsx`](https://github.com/TrigrApp/Trigr/blob/a2de2f8d593ff7ce34bccf3919260fa7a8b211de/src/components/CodeEditor.tsx#L296) | 296 |

</details>

<details>
<summary>Avoid initializing state in an effect. Instead, initialize "activeSection"'s `useState()` with "undefined". For SSR hydration, prefer `useSyncExternalStore()`. <sub>· 1 in 1 file</sub></summary>

<sub><code>no-initialize-state</code></sub>

> Pass the initial value directly to useState() instead of setting it from a mount-only useEffect. For SSR hydration, prefer useSyncExternalStore().

| File | Lines |
| --- | --- |
| [`src/components/ScriptLangView.tsx`](https://github.com/TrigrApp/Trigr/blob/a2de2f8d593ff7ce34bccf3919260fa7a8b211de/src/components/ScriptLangView.tsx#L221) | 221 |

</details>

---

<sup>Reviewed by [reactreview](https://react.review) for commit a2de2f8d593ff7ce34bccf3919260fa7a8b211de. Configure [here](https://react.review/dashboard).</sup>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

React Review Audit #2

⚠️ Warnings (110)

Metadata

Assignees

Labels

Type

Fields

Projects

Milestone

Relationships

Development

File	Lines
`src/components/ScriptRunner.tsx`	111, 116, 126, 136, 152, 176, 186, 197, +2 more
`src/components/Sidebar.tsx`	78, 89, 98, 107, 115, 123, 131, 161, +2 more
`src/index.tsx`	133, 165, 242, 292, 298, 301, 348, 379, +2 more
`src/components/SettingsView.tsx`	176, 198, 210, 264, 286, 307, 344, 351
`src/components/PackagesView.tsx`	93, 128, 133, 196, 205, 210
…and 3 more files	view on react.review

File	Lines
`src/components/SettingsView.tsx`	176, 201, 213, 235
`src/components/TriggerForm.tsx`	92, 103, 138, 150
`src/components/GlobalVarForm.tsx`	51, 61
`src/components/ScriptRunner.tsx`	146
`src/index.tsx`	157
…and 3 more files	view on react.review

File	Lines
`src/components/TriggerForm.tsx`	91, 101, 137
`src/components/GlobalVarForm.tsx`	50, 60

File	Lines
`src/components/ScriptRunner.tsx`	144, 211
`src/components/ScriptLangView.tsx`	181, 300
`src/components/PackagesView.tsx`	227

File	Lines
`src/components/Sidebar.tsx`	142, 156
`src/components/PackagesView.tsx`	107

Uh oh!

React Review Audit #2

Description

⚠️ Warnings (110)

Metadata

Metadata

Assignees

Labels

Type

Fields

Projects

Milestone

Relationships

Development

Issue actions