Bug: react-hooks/static-components false positive

[retyui]

eslint-plugin-react-hooks: 7.0.1

Steps To Reproduce

1.Create react app
2. Add this eslint-plugin-react-hooks plugin
3. Lint the next code

import { FeatureRemovalBuildTime } from '@xxx/build-time-tools/FeatureRemovalBuildTime';
import { PlatformSwitchBuildTime } from '@xxx/build-time-tools/PlatformSwitchBuildTime';
import { isMyFeature } from '@xxx/config/exporter';
import ErrorMessageMT from './ErrorMessageMT';
import ErrorMessageBase from './ErrorMessageBase';

import type { ErrorMessageProps } from './types';

const ErrorMessage = (props: ErrorMessageProps) => {
  'use memo';

  const ErrorMessageView = PlatformSwitchBuildTime.select({
    anyMT:
      FeatureRemovalBuildTime.isMyFeature && isMyFeature()
        ? ErrorMessageMT
        : ErrorMessageBase,
    default: ErrorMessageBase,
  });

  return <ErrorMessageView {...props} />; // Error: react-hooks/static-components
};

export default ErrorMessage;

The current behavior

Eslint will complain that ErrorMessageView was created during the render

The expected behavior

But all values inside if check are stable and valid as in this example: https://react.dev/reference/eslint-plugin-react-hooks/lints/static-components#valid

[guillaumebrunerie]

You are calling the function PlatformSwitchBuildTime.select, I don't see how the React compiler could guess what this function does. This function could very well create a new function during render.

[retyui]

@guillaumebrunerie PlatformSwitchBuildTime.select it is extend ver. of Platform.select https://reactnative.dev/docs/platform#select
really popular pattern in React Native world

[MorikawaSouma]

👋 这确实是一个已知的
eact-hooks/static-components\ 误报问题。

问题分析

你的代码使用 \PlatformSwitchBuildTime.select\ 在构建时选择组件，这是一个非常常见的 React Native 模式。但 eslint-plugin-react-hooks 无法静态分析这个函数的行为，它保守地认为这可能是在 render 期间创建新组件。

与官方示例的区别

官方文档中的有效示例：
\\ sx
function Component() {
const Component = someCondition ? A : B;
return ;
}
\\

lint 规则可以静态分析三元表达式，但无法分析 \Platform.select()\ 这种函数调用的返回值稳定性。

临时解决方案

1. 使用三元表达式替代（如果平台数量少）：
   \\ sx
   const ErrorMessageView = Platform.OS === 'android'
   ? ErrorMessageMT
   : ErrorMessageBase;
   \\

2. 在组件外部定义（推荐）：
   \\ sx
   const ErrorMessageView = PlatformSwitchBuildTime.select({
   anyMT: FeatureRemovalBuildTime.isMyFeature && isMyFeature()
   ? ErrorMessageMT
   : ErrorMessageBase,
   default: ErrorMessageBase,
   });

const ErrorMessage = (props: ErrorMessageProps) => {
return <ErrorMessageView {...props} />;
};
\\

3. 禁用特定行的规则：
   \\ sx
   // eslint-disable-next-line react-hooks/static-components
   const ErrorMessageView = PlatformSwitchBuildTime.select({...});
   \\

根本修复建议

eslint-plugin-react-hooks 需要增加对 React Native \Platform.select\ 模式的识别，将其视为稳定的选择器（类似于三元表达式）。这需要在规则中添加特殊的判断逻辑。

Related: #35982, #35997