React Compiler lint error in webhooks.tsx blocks all PRs on main

[jhadvig]

Description

PR #17032 (CONSOLE-5463: Turn on react compiler linting rules) was merged on 2026-08-19 and enabled the react-hooks/set-state-in-effect ESLint rule. This introduced a lint error in frontend/public/components/utils/webhooks.tsx:87 that was not fixed as part of that PR.

This error causes the ci/prow/frontend job to fail for all PRs targeting main, since the frontend CI lints the entire codebase.

Error

frontend/public/components/utils/webhooks.tsx
  Line 87:  Avoid calling setState() directly within an effect  react-hooks/set-state-in-effect

The offending code calls setSecretNames(newSecretNames) inside a useEffect (lines 79-88). The state is derived from webhookTriggers and should be computed during render via useMemo instead of set in an effect.

Impact

All open PRs on main are blocked by this lint error, regardless of what files they change. Example: PR #17041 (OCPBUGS-72592) fails frontend CI despite only modifying Helm plugin files.

Fix

Replace the useEffect + setSecretNames pattern with a useMemo:

// Before (effect-based, triggers lint error):
useEffect(() => {
  const newSecretNames = /* derive from webhookTriggers */;
  setSecretNames(newSecretNames);
}, [webhookTriggers]);

// After (computed during render):
const secretNames = useMemo(() => {
  return /* derive from webhookTriggers */;
}, [webhookTriggers]);

Introduced by

• PR: CONSOLE-5463: Turn on react compiler linting rules #17032
• Jira: CONSOLE-5463

Blocked PRs (examples)

• OCPBUGS-72592: Preserve query params on namespace change in Helm install page #17041

[logonoff]

I will admit this change makes it harder to search for lint output, but this is not a bug - the PR linked has genuine ESLint errors:

/go/src/github.com/openshift/console/frontend/packages/helm-plugin/src/components/forms/install-upgrade/__tests__/HelmInstallUpgradePage.spec.tsx
  77:3  error  Error: Cannot reassign variables declared outside of the component/hook

Variable `testLocation` is declared outside of the component/hook. Reassigning this value during render is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render).

The linter will pass in CI only if there is a exact number of warnings. For any new eslint warnings you are simply expected to grep the log output and identify the new ones.

/close

[openshift-ci]

@logonoff: Closing this issue.

Details

In response to this:

I will admit this change makes it harder to search for lint output, but this is not a bug - the PR linked has genuine ESLint errors:

/go/src/github.com/openshift/console/frontend/packages/helm-plugin/src/components/forms/install-upgrade/__tests__/HelmInstallUpgradePage.spec.tsx
 77:3  error  Error: Cannot reassign variables declared outside of the component/hook

Variable `testLocation` is declared outside of the component/hook. Reassigning this value during render is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render).

The linter will pass in CI only if there is a exact number of warnings. For any new eslint warnings you are simply expected to grep the log output and identify the new ones.

/close

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository.