Turn on warnings for React Compiler ESLint rule

[ravicious]

I propose that we enable the React Compiler ESLint rule to emit warnings so that we can spot problematic patterns when writing new code. Let's create #dev-temp-react-compiler to discuss warnings that pose problems or are otherwise hard to deal with.

React Compiler

I think that we should aim to enable React Compiler at some point, either on parts of the codebase or the whole project. Ryan reported mixed results when enabling it on TAG. The details of the Compiler rollout are still something to be discussed, however despite potential problems, in my opinion these two things are true:

1. React Compiler is the future of React:

   • The Stable Release will mark the beginning of a new foundation for React, and all apps and libraries will be strongly recommended to use the compiler and ESLint plugin.

2. Writing code that can be optimized by the Compiler will result in better overall quality of code.

The ESLint rule

Many parts of the app in their current state won't be optimized because they're breaking the rules of React. React Compiler is in RC but it's near stable. In the meantime, we can start addressing issues in our code to make the compiler more effective when enabled.

I propose that we enable the React Compiler ESLint rule to emit warnings so that we can spot problematic patterns when writing new code. Many of those might surprise us or be patterns that we've learned to accept, see my question about useRef from a couple of months ago for an example. To help with that, we can create #temp-dev-react-compiler channel to discuss warnings that pose problems.

From the React Compiler docs:

React Compiler includes an ESLint rule that helps identify code that can't be optimized. When the ESLint rule reports an error, it means the compiler will skip optimizing that specific component or hook. This is safe: the compiler will continue optimizing other parts of your codebase. You don't need to fix all violations immediately. Address them at your own pace to gradually increase the number of optimized components.

The ESLint rule will:

• Identify violations of the Rules of React
• Show which components can't be optimized
• Provide helpful error messages for fixing issues

List of warnings reported by the react-hooks/react-compiler rule

web/packages/shared/components/FieldCheckbox/FieldCheckbox.test.tsx
  56:5  warning  Unexpected reassignment of a variable which was defined outside of the component. Components and hooks should be pure and side-effect free, but variable reassignment is a form of side-effect. If this variable is used in rendering, use useState instead. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)  react-hooks/react-compiler

web/packages/shared/components/TextSelectCopy/TextSelectCopy.tsx
  36:30  warning  Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)  react-hooks/react-compiler

web/packages/shared/components/Validation/Validation.test.tsx
   93:5  warning  Unexpected reassignment of a variable which was defined outside of the component. Components and hooks should be pure and side-effect free, but variable reassignment is a form of side-effect. If this variable is used in rendering, use useState instead. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)  react-hooks/react-compiler
  129:5  warning  Unexpected reassignment of a variable which was defined outside of the component. Components and hooks should be pure and side-effect free, but variable reassignment is a form of side-effect. If this variable is used in rendering, use useState instead. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)  react-hooks/react-compiler

web/packages/shared/hooks/useRefAutoFocus/useRefAutoFocus.test.tsx
  92:3  warning  Mutating a value returned from a function whose return value should not be mutated  react-hooks/react-compiler

web/packages/teleport/src/AuthConnectors/AuthConnectorEditor/GitHubConnectorEditor.tsx
  73:5  warning  React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior  react-hooks/react-compiler

web/packages/teleport/src/AuthConnectors/AuthConnectors.tsx
  121:5  warning  React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior  react-hooks/react-compiler

web/packages/teleport/src/Console/DocumentSsh/Terminal/Terminal.tsx
   95:5  warning  React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior  react-hooks/react-compiler

web/packages/teleport/src/Console/consoleContextProvider.tsx
  39:3  warning  Writing to a variable defined outside a component or hook is not allowed. Consider using an effect  react-hooks/react-compiler

web/packages/teleport/src/Console/useTabRouting.ts
  62:7  warning  Mutating a value returned from a function whose return value should not be mutated                                                                                                                                                                     react-hooks/react-compiler

web/packages/teleport/src/Discover/AwsMangementConsole/CreateAppAccess/CreateAppAccess.story.tsx
  52:3  warning  Writing to a variable defined outside a component or hook is not allowed. Consider using an effect  react-hooks/react-compiler

web/packages/teleport/src/Discover/Database/EnrollRdsDatabase/EnrollRdsDatabase.story.tsx
  77:3  warning  Writing to a variable defined outside a component or hook is not allowed. Consider using an effect  react-hooks/react-compiler

web/packages/teleport/src/Discover/Database/IamPolicy/useIamPolicy.ts
  39:5  warning  React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior  react-hooks/react-compiler

web/packages/teleport/src/Discover/Database/MutualTls/useMutualTls.ts
  68:5  warning  React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior  react-hooks/react-compiler

web/packages/teleport/src/Discover/Fixtures/fixtures.tsx
  68:5  warning  Mutating component props or hook arguments is not allowed. Consider using a local variable instead  react-hooks/react-compiler

web/packages/teleport/src/Discover/Kubernetes/EnrollEKSCluster/EnrollEksCluster.story.tsx
  119:3  warning  Writing to a variable defined outside a component or hook is not allowed. Consider using an effect  react-hooks/react-compiler

web/packages/teleport/src/Discover/SelectResource/SelectResource.tsx
  190:5  warning  React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior  react-hooks/react-compiler

web/packages/teleport/src/Discover/Server/DiscoveryConfigSsm/DiscoveryConfigSsm.story.tsx
   54:3  warning  Writing to a variable defined outside a component or hook is not allowed. Consider using an effect  react-hooks/react-compiler
   95:3  warning  Writing to a variable defined outside a component or hook is not allowed. Consider using an effect  react-hooks/react-compiler
  110:3  warning  Writing to a variable defined outside a component or hook is not allowed. Consider using an effect  react-hooks/react-compiler

web/packages/teleport/src/Discover/Shared/useJoinTokenSuspender.ts
  78:5  warning  Unexpected reassignment of a variable which was defined outside of the component. Components and hooks should be pure and side-effect free, but variable reassignment is a form of side-effect. If this variable is used in rendering, use useState instead. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)  react-hooks/react-compiler

web/packages/teleport/src/Integrations/Enroll/AwsOidc/useAwsOidcIntegration.tsx
  82:5  warning  React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior  react-hooks/react-compiler

web/packages/teleport/src/JoinTokens/JoinTokens.tsx
  139:5  warning  React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior  react-hooks/react-compiler

web/packages/teleport/src/JoinTokens/UpsertJoinTokenDialog.tsx
  249:5  warning  React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior  react-hooks/react-compiler

web/packages/teleport/src/LocksV2/NewLock/NewLock.tsx
  174:25  warning  Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)  react-hooks/react-compiler

web/packages/teleport/src/Login/Login.story.tsx
  54:3  warning  Writing to a variable defined outside a component or hook is not allowed. Consider using an effect  react-hooks/react-compiler

web/packages/teleport/src/Main/Main.tsx
  113:7  warning  Mutating a value returned from a function whose return value should not be mutated                                                                react-hooks/react-compiler

web/packages/teleport/src/Notifications/Notification.tsx
  70:49  warning  Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)  react-hooks/react-compiler
  82:55  warning  Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)  react-hooks/react-compiler
  95:61  warning  Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)  react-hooks/react-compiler

web/packages/teleport/src/Player/Xterm/Xterm.tsx
  80:5  warning  React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior  react-hooks/react-compiler

web/packages/teleport/src/Roles/RoleEditor/RoleEditorAdapter.tsx
  79:5   warning  Expected the first argument to be an inline function expression                                                   react-hooks/react-compiler

web/packages/teleport/src/Roles/Roles.tsx
  253:10  warning  Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values  react-hooks/react-compiler
  253:10  warning  Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values  react-hooks/react-compiler
  270:9   warning  Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values  react-hooks/react-compiler

web/packages/teleport/src/useTeleport.ts
  30:11  warning  Writing to a variable defined outside a component or hook is not allowed. Consider using an effect  react-hooks/react-compiler

web/packages/teleterm/src/ui/AccessRequestCheckout/useAccessRequestCheckout.ts
   54:3  warning  Hooks must be the same function on every render, but this value may change over time to a different function. See https://react.dev/reference/rules/react-calls-components-and-hooks#dont-dynamically-use-hooks                                                      react-hooks/react-compiler

web/packages/teleterm/src/ui/AccessRequests/SelectorMenu.story.tsx
  188:3   warning  Mutating component props or hook arguments is not allowed. Consider using a local variable instead                                                                                                                                                                         react-hooks/react-compiler

web/packages/teleterm/src/ui/ConnectMyComputer/DocumentConnectMyComputer/Status.story.tsx
  233:3  warning  Mutating component props or hook arguments is not allowed. Consider using a local variable instead  react-hooks/react-compiler

web/packages/teleterm/src/ui/DocumentAccessRequests/NewRequest/NewRequest.tsx
  44:3  warning  Hooks must be the same function on every render, but this value may change over time to a different function. See https://react.dev/reference/rules/react-calls-components-and-hooks#dont-dynamically-use-hooks  react-hooks/react-compiler

web/packages/teleterm/src/ui/DocumentAccessRequests/ReviewAccessRequest/useReviewAccessRequest.ts
  46:3  warning  Hooks must be the same function on every render, but this value may change over time to a different function. See https://react.dev/reference/rules/react-calls-components-and-hooks#dont-dynamically-use-hooks  react-hooks/react-compiler

web/packages/teleterm/src/ui/DocumentAccessRequests/useAccessRequests.tsx
  39:3  warning  Hooks must be the same function on every render, but this value may change over time to a different function. See https://react.dev/reference/rules/react-calls-components-and-hooks#dont-dynamically-use-hooks  react-hooks/react-compiler

web/packages/teleterm/src/ui/DocumentCluster/DocumentCluster.story.tsx
  253:5  warning  Reassigning a variable after render has completed can cause inconsistent behavior on subsequent renders. Consider using state instead  react-hooks/react-compiler

web/packages/teleterm/src/ui/DocumentCluster/DocumentCluster.tsx
  42:3  warning  Hooks must be the same function on every render, but this value may change over time to a different function. See https://react.dev/reference/rules/react-calls-components-and-hooks#dont-dynamically-use-hooks  react-hooks/react-compiler

web/packages/teleterm/src/ui/DocumentGateway/useGateway.ts
  174:5  warning  React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior  react-hooks/react-compiler

web/packages/teleterm/src/ui/DocumentGatewayCliClient/DocumentGatewayCliClient.tsx
   48:3  warning  Hooks must be the same function on every render, but this value may change over time to a different function. See https://react.dev/reference/rules/react-calls-components-and-hooks#dont-dynamically-use-hooks                                         react-hooks/react-compiler
  101:5  warning  React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior  react-hooks/react-compiler

web/packages/teleterm/src/ui/DocumentGatewayKube/DocumentGatewayKube.tsx
  78:5  warning  React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior  react-hooks/react-compiler

web/packages/teleterm/src/ui/Documents/DocumentsRenderer.tsx
   82:6   warning  Expected the dependency list to be an array of simple expressions (e.g. `x`, `x.y.z`, `x?.y?.z`)                                        react-hooks/react-compiler

web/packages/teleterm/src/ui/ModalsHost/ModalsHost.tsx
  40:5  warning  Hooks must be the same function on every render, but this value may change over time to a different function. See https://react.dev/reference/rules/react-calls-components-and-hooks#dont-dynamically-use-hooks  react-hooks/react-compiler

web/packages/teleterm/src/ui/Search/SearchBar.tsx
  72:3  warning  Hooks must be the same function on every render, but this value may change over time to a different function. See https://react.dev/reference/rules/react-calls-components-and-hooks#dont-dynamically-use-hooks  react-hooks/react-compiler

web/packages/teleterm/src/ui/Search/pickers/ActionPicker.tsx
    72:3   warning  Hooks must be the same function on every render, but this value may change over time to a different function. See https://react.dev/reference/rules/react-calls-components-and-hooks#dont-dynamically-use-hooks  react-hooks/react-compiler

web/packages/teleterm/src/ui/Search/pickers/ParameterPicker.tsx
  64:5  warning  React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior  react-hooks/react-compiler

web/packages/teleterm/src/ui/StatusBar/ShareFeedback/useShareFeedback.ts
  37:3  warning  Hooks must be the same function on every render, but this value may change over time to a different function. See https://react.dev/reference/rules/react-calls-components-and-hooks#dont-dynamically-use-hooks  react-hooks/react-compiler

web/packages/teleterm/src/ui/TopBar/Clusters/useClusters.ts
  28:3  warning  Hooks must be the same function on every render, but this value may change over time to a different function. See https://react.dev/reference/rules/react-calls-components-and-hooks#dont-dynamically-use-hooks  react-hooks/react-compiler

web/packages/teleterm/src/ui/TopBar/Connections/Connections.tsx
  34:3  warning  Hooks must be the same function on every render, but this value may change over time to a different function. See https://react.dev/reference/rules/react-calls-components-and-hooks#dont-dynamically-use-hooks  react-hooks/react-compiler

web/packages/teleterm/src/ui/TopBar/Connections/ConnectionsSliderStep.tsx
  32:3  warning  Hooks must be the same function on every render, but this value may change over time to a different function. See https://react.dev/reference/rules/react-calls-components-and-hooks#dont-dynamically-use-hooks  react-hooks/react-compiler

web/packages/teleterm/src/ui/TopBar/Identity/useIdentity.ts
  32:3  warning  Hooks must be the same function on every render, but this value may change over time to a different function. See https://react.dev/reference/rules/react-calls-components-and-hooks#dont-dynamically-use-hooks  react-hooks/react-compiler

web/packages/teleterm/src/ui/appContextProvider.tsx
  37:5  warning  Writing to a variable defined outside a component or hook is not allowed. Consider using an effect  react-hooks/react-compiler

web/packages/teleterm/src/ui/components/Notifcations/NotificationsHost.tsx
  26:3  warning  Hooks must be the same function on every render, but this value may change over time to a different function. See https://react.dev/reference/rules/react-calls-components-and-hooks#dont-dynamically-use-hooks  react-hooks/react-compiler

e/web/teleport/src/AccessListManagement/AccessListManagementContext.tsx
  170:5  warning  React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior  react-hooks/react-compiler

e/web/teleport/src/AccessListManagement/AccessLists/AccessLists.tsx
  129:5   warning  React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior  react-hooks/react-compiler
  754:5   warning  React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior  react-hooks/react-compiler

e/web/teleport/src/AccessListManagement/CreateAccessList/CreateAccessList.tsx
   98:5   warning  React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior  react-hooks/react-compiler
  115:5   warning  React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior  react-hooks/react-compiler

e/web/teleport/src/AccessListManagement/ViewEditAccessList/ReviewAccessList/ReviewAccessList.tsx
  125:11  warning  Mutating component props or hook arguments is not allowed. Consider using a local variable instead  react-hooks/react-compiler

e/web/teleport/src/AccessListManagement/ViewEditAccessList/ViewEditAccessList.tsx
  151:5   warning  React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior  react-hooks/react-compiler
  183:5   warning  React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior  react-hooks/react-compiler
  192:5   warning  React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior  react-hooks/react-compiler

e/web/teleport/src/AccessMonitoring/Timeframe.story.tsx
  33:3  warning  Writing to a variable defined outside a component or hook is not allowed. Consider using an effect  react-hooks/react-compiler
  42:3  warning  Writing to a variable defined outside a component or hook is not allowed. Consider using an effect  react-hooks/react-compiler

e/web/teleport/src/AuthConnectors/AuthConnectorEditor/AuthConnectorEditor.tsx
  59:5  warning  React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior  react-hooks/react-compiler

e/web/teleport/src/AuthConnectors/AuthConnectors.tsx
  108:5   warning  React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior  react-hooks/react-compiler

e/web/teleport/src/DeviceTrust/DeviceTrust.story.tsx
  33:3  warning  Writing to a variable defined outside a component or hook is not allowed. Consider using an effect  react-hooks/react-compiler
  49:3  warning  Writing to a variable defined outside a component or hook is not allowed. Consider using an effect  react-hooks/react-compiler
  80:3  warning  Writing to a variable defined outside a component or hook is not allowed. Consider using an effect  react-hooks/react-compiler
  97:3  warning  Writing to a variable defined outside a component or hook is not allowed. Consider using an effect  react-hooks/react-compiler

e/web/teleport/src/Discover/SamlApplication/GcpWorkforce/AddWorkforcePool/AddWorkforcePool.story.tsx
  38:3  warning  Writing to a variable defined outside a component or hook is not allowed. Consider using an effect  react-hooks/react-compiler

e/web/teleport/src/Integrations/IntegrationEnroll/ExternalAuditStorage/ExternalAuditStorage.tsx
  52:9  warning  Mutating a value returned from a function whose return value should not be mutated                                                               react-hooks/react-compiler

e/web/teleport/src/Integrations/IntegrationEnroll/IntegrationPick/IntegrationPick.tsx
  121:5   warning  React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior  react-hooks/react-compiler

e/web/teleport/src/Integrations/IntegrationEnroll/PluginEnroll/MultiStep/Okta/PluginEnrollOkta.story.tsx
  299:3  warning  Mutating component props or hook arguments is not allowed. Consider using a local variable instead  react-hooks/react-compiler

e/web/teleport/src/Integrations/IntegrationEnroll/PluginEnroll/MultiStep/PluginEnrollSuccess.tsx
  31:5  warning  React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior  react-hooks/react-compiler

e/web/teleport/src/Integrations/IntegrationEnroll/PluginEnroll/MultiStep/usePlugin.tsx
  84:5  warning  React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior  react-hooks/react-compiler

e/web/teleport/src/Integrations/IntegrationEnroll/PluginEnroll/PluginEnrollOauth.tsx
  103:5  warning  React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior  react-hooks/react-compiler

e/web/teleport/src/Integrations/IntegrationEnroll/PluginEnroll/PluginEnrollSingleStep.tsx
  58:5  warning  React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior  react-hooks/react-compiler

e/web/teleport/src/InviteCollaborators/InviteCollaboratorsForm.test.tsx
   99:7  warning  Unexpected reassignment of a variable which was defined outside of the component. Components and hooks should be pure and side-effect free, but variable reassignment is a form of side-effect. If this variable is used in rendering, use useState instead. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)  react-hooks/react-compiler
  123:7  warning  Unexpected reassignment of a variable which was defined outside of the component. Components and hooks should be pure and side-effect free, but variable reassignment is a form of side-effect. If this variable is used in rendering, use useState instead. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)  react-hooks/react-compiler
  152:7  warning  Unexpected reassignment of a variable which was defined outside of the component. Components and hooks should be pure and side-effect free, but variable reassignment is a form of side-effect. If this variable is used in rendering, use useState instead. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)  react-hooks/react-compiler
  180:7  warning  Unexpected reassignment of a variable which was defined outside of the component. Components and hooks should be pure and side-effect free, but variable reassignment is a form of side-effect. If this variable is used in rendering, use useState instead. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)  react-hooks/react-compiler

e/web/teleport/src/Login/Login.tsx
  10:3  warning  Mutating a value returned from a function whose return value should not be mutated  react-hooks/react-compiler

e/web/teleport/src/SAMLIdPLogin/SAMLIdPLogin.story.tsx
  23:3  warning  Writing to a variable defined outside a component or hook is not allowed. Consider using an effect  react-hooks/react-compiler

e/web/teleport/src/SamlApplication/MicrosoftEntraId/AddEntraSpToTeleport/AddEntraSpToTeleport.story.tsx
  25:3  warning  Writing to a variable defined outside a component or hook is not allowed. Consider using an effect  react-hooks/react-compiler

e/web/teleport/src/SamlApplication/components/AttributeMapping.test.tsx
  15:5  warning  Unexpected reassignment of a variable which was defined outside of the component. Components and hooks should be pure and side-effect free, but variable reassignment is a form of side-effect. If this variable is used in rendering, use useState instead. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)  react-hooks/react-compiler

e/web/teleport/src/SamlApplication/components/ConfigureServiceProvider.test.tsx
  397:9  warning  Unexpected reassignment of a variable which was defined outside of the component. Components and hooks should be pure and side-effect free, but variable reassignment is a form of side-effect. If this variable is used in rendering, use useState instead. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)  react-hooks/react-compiler

e/web/teleport/src/Support/Support.story.tsx
  20:3  warning  Writing to a variable defined outside a component or hook is not allowed. Consider using an effect  react-hooks/react-compiler
  40:3  warning  Writing to a variable defined outside a component or hook is not allowed. Consider using an effect  react-hooks/react-compiler

e/web/teleport/src/UnifiedResources/UnifiedResourcesE.story.tsx
  33:3  warning  Writing to a variable defined outside a component or hook is not allowed. Consider using an effect  react-hooks/react-compiler
  44:3  warning  Writing to a variable defined outside a component or hook is not allowed. Consider using an effect  react-hooks/react-compiler
  54:3  warning  Writing to a variable defined outside a component or hook is not allowed. Consider using an effect  react-hooks/react-compiler

[gzdunek]

🚀

[backport-bot-workflows]

@ravicious See the table below for backport results.

Branch	Result
branch/v18	Failed