Rule of hooks fixes needed (ubmrella issue) · kubernetes-sigs/headlamp#5183

(4 comments) (0 reactions) (1 assignee)TypeScript (950 forks)auto 404

frontendgood first issuekind/bugquality

Repository metrics

Stars: (6,936 stars)
PR merge metrics: (PR metrics pending)

Description

Suppressed `react-hooks` lint violations — TODO to fix properly

Each item below is a self-contained description of a suppressed violation. Each could become a standalone sub-issue. They follow the <area>: <description> commit-message convention.

`react-hooks/rules-of-hooks` violations (58 suppressions across 21 files)

`react-hooks/exhaustive-deps` violations (145 suppressions across 73 files)

`react-hooks/set-state-in-effect` violations (17 suppressions across 12 files)

`react-hooks/static-components` violations (12 suppressions across 4 files)

frontend: AppContainer: Fix react-hooks/static-components — component created during render. Move component definition outside the render function or memoize. File: frontend/src/components/App/AppContainer.tsx
frontend: ClusterNameEditor: Fix react-hooks/static-components — component created during render. File: frontend/src/components/App/Settings/ClusterNameEditor.tsx
frontend: Dialog: Fix react-hooks/static-components — component created during render. File: frontend/src/components/common/Dialog.tsx
frontend: Resource: Fix react-hooks/static-components — 7 instances of LivenessProbeItem and other components created during render. Move definitions outside the render function. File: frontend/src/components/common/Resource/Resource.tsx
frontend: Chooser: Fix react-hooks/static-components — component created during render. File: frontend/src/components/cluster/Chooser.tsx

`react-hooks/use-memo` violations (9 suppressions across 6 files)

frontend: ClusterChooserPopup: Fix react-hooks/use-memo — expensive computation should be wrapped in useMemo. File: frontend/src/components/cluster/ClusterChooserPopup.tsx
frontend: EditButton: Fix react-hooks/use-memo — computation should be memoized. File: frontend/src/components/common/Resource/EditButton.tsx
frontend: ScaleButton: Fix react-hooks/use-memo — computation should be memoized. File: frontend/src/components/common/Resource/ScaleButton.tsx
frontend: Table: Fix react-hooks/use-memo — computation should be memoized. File: frontend/src/components/common/Table/Table.tsx
frontend: GlobalSearchContent: Fix react-hooks/use-memo — multiple computations should be memoized. File: frontend/src/components/globalSearch/GlobalSearchContent.tsx
frontend: GraphSources: Fix react-hooks/use-memo — computation should be memoized. File: frontend/src/components/resourceMap/sources/GraphSources.tsx
frontend: k8s/index: Fix react-hooks/use-memo — computation should be memoized. File: frontend/src/lib/k8s/index.ts
frontend: useKubeObjectList: Fix react-hooks/use-memo — computation should be memoized. File: frontend/src/lib/k8s/api/v2/useKubeObjectList.ts

`react-hooks/immutability` violations (6 suppressions across 4 files)

frontend: Link: Fix react-hooks/immutability — ref or state value mutated directly instead of using setter. File: frontend/src/components/common/Link.tsx
frontend: LogViewer: Fix react-hooks/immutability — ref or state value mutated directly. File: frontend/src/components/common/LogViewer.tsx
frontend: EditorDialog: Fix react-hooks/immutability — ref or state value mutated directly. File: frontend/src/components/common/Resource/EditorDialog.tsx
frontend: Resource: Fix react-hooks/immutability — ref or state value mutated directly. File: frontend/src/components/common/Resource/Resource.tsx
frontend: Terminal.stories: Fix react-hooks/immutability — ref or state value mutated directly. File: frontend/src/components/common/Terminal.stories.tsx
frontend: LocaleSelect: Fix react-hooks/immutability — ref or state value mutated directly. File: frontend/src/i18n/LocaleSelect/LocaleSelect.tsx

`react-hooks/purity` violations (2 suppressions across 2 files)

frontend: ResourceTable: Fix react-hooks/purity — impure function call during render. File: frontend/src/components/common/Resource/ResourceTable.tsx
frontend: util: Fix react-hooks/purity — Math.random() called during render in useId. File: frontend/src/lib/util.ts

`react-hooks/refs` violations (4 suppressions across 1 file)

frontend: Chart: Fix react-hooks/refs — ref access pattern issue. File: frontend/src/components/common/Chart.tsx

Contributor guide

Research direction: Choose one file from the list (e.g., frontend/src/App.tsx), understand the missing dependency warning, and add the missing variable to the useEffect dependency array. Run the linter to verify.
Tech stack: typescriptreact
Domain: frontend
Issue type: Refactor
Difficulty: 2
Estimated time: 1-2 days
Activity status: Active
Clarity: Clear
Prerequisites: ReactJavaScript
Newbie friendliness: 60

Repository metrics

Description

Suppressed react-hooks lint violations — TODO to fix properly

react-hooks/rules-of-hooks violations (58 suppressions across 21 files)

react-hooks/exhaustive-deps violations (145 suppressions across 73 files)

react-hooks/set-state-in-effect violations (17 suppressions across 12 files)

react-hooks/static-components violations (12 suppressions across 4 files)

react-hooks/use-memo violations (9 suppressions across 6 files)

react-hooks/immutability violations (6 suppressions across 4 files)

react-hooks/purity violations (2 suppressions across 2 files)

react-hooks/refs violations (4 suppressions across 1 file)