{"record":{"id":"b085c4d1fd7948b0","repo":"react-navigation/react-navigation","slug":"looks-like-you-re-passing-an-inline-function-for","errorCode":null,"errorMessage":"Looks like you're passing an inline function for 'component' prop for the screen '${name}' (e.g. component={() => <SomeComponent />}). Passing an inline function will cause the component state to be lost on re-render and cause perf issues since it's re-created every render. You can pass the function as children to 'Screen' instead to achieve the desired behaviour.","messagePattern":"Looks like you're passing an inline function for 'component' prop for the screen '(.+?)' \\(e\\.g\\. component=(.+?)\\)\\. Passing an inline function will cause the component state to be lost on re-render and cause perf issues since it's re-created every render\\. You can pass the function as children to 'Screen' instead to achieve the desired behaviour\\.","errorType":"console","errorClass":null,"httpStatus":null,"severity":"warning","filePath":"packages/core/src/useNavigationBuilder.tsx","lineNumber":270,"sourceCode":"\n        if (component !== undefined && !isValidElementType(component)) {\n          throw new Error(\n            `Got an invalid value for 'component' prop for the screen '${name}'. It must be a valid React Component.`\n          );\n        }\n\n        if (getComponent !== undefined && typeof getComponent !== 'function') {\n          throw new Error(\n            `Got an invalid value for 'getComponent' prop for the screen '${name}'. It must be a function returning a React Component.`\n          );\n        }\n\n        if (typeof component === 'function') {\n          if (component.name === 'component') {\n            // Inline anonymous functions passed in the `component` prop will have the name of the prop\n            // It's relatively safe to assume that it's not a component since it should also have PascalCase name\n            // We won't catch all scenarios here, but this should catch a good chunk of incorrect use.\n            console.warn(\n              `Looks like you're passing an inline function for 'component' prop for the screen '${name}' (e.g. component={() => <SomeComponent />}). Passing an inline function will cause the component state to be lost on re-render and cause perf issues since it's re-created every render. You can pass the function as children to 'Screen' instead to achieve the desired behaviour.`\n            );\n          } else if (/^[a-z]/.test(component.name)) {\n            console.warn(\n              `Got a component with the name '${component.name}' for the screen '${name}'. React Components must start with an uppercase letter. If you're passing a regular function and not a component, pass it as children to 'Screen' instead. Otherwise capitalize your component's name.`\n            );\n          }\n        }\n      } else {\n        throw new Error(\n          `Couldn't find a 'component', 'getComponent' or 'children' prop for the screen '${name}'. This can happen if you passed 'undefined'. You likely forgot to export your component from the file it's defined in, or mixed up default import and named import when importing.`\n        );\n      }\n    });\n  }\n\n  return configs;\n};","sourceCodeStart":252,"sourceCodeEnd":288,"githubUrl":"https://github.com/react-navigation/react-navigation/blob/ab1319d6bbf05eae8dc25e33cbf4dc56494e0f0c/packages/core/src/useNavigationBuilder.tsx#L252-L288","documentation":"getRouteConfigsFromChildren inspects each Screen's component prop. If the function's name is literally 'component' — the tell-tale name of an inline arrow function assigned to the component prop — the library warns that a new component type is created every render, so React will unmount/remount the screen and lose its state. It suggests passing the component as children to Screen instead. This is a console.warn, not a throw.","triggerScenarios":"Writing <Stack.Screen name=\"Home\" component={() => <HomeScreen />} /> — an inline arrow/anonymous function for the component prop — during navigator configuration.","commonSituations":"Defining screens inline inside a render function, often to close over props or state; quick prototyping with arrow components; defining a navigator component body without memoizing screen components defined inline as const-less arrow functions.","solutions":["Pass the component as children: <Stack.Screen name=\"Home\">{() => <HomeScreen />}</Stack.Screen> or better <Stack.Screen name=\"Home\"><HomeScreen /></Stack.Screen>.","Reference a top-level/hoisted component directly: component={HomeScreen} instead of component={() => <HomeScreen />} — keep it defined outside the render.","If you must pass props, use children with a callback <Screen>{(props) => <HomeScreen {...props} extra={x} />}</Screen>, or hoist props via context so the component identity is stable."],"exampleFix":"// before\n<Stack.Screen name=\"Home\" component={() => <HomeScreen />} />\n\n// after\n<Stack.Screen name=\"Home\" component={HomeScreen} />\n// or with props/state\n<Stack.Screen name=\"Home\">{(props) => <HomeScreen {...props} />}</Stack.Screen>","handlingStrategy":"type-guard","validationCode":"function assertStableComponent(component: unknown): void {\n  if (typeof component === 'function' && component.name === 'component') {\n    throw new Error('Pass a hoisted component or children to Screen instead of an inline arrow for `component`.');\n  }\n}","typeGuard":"function isInlineArrow(fn: Function): boolean {\n  return fn.name === 'component' || fn.name === ''; // inline props are named after the prop\n}","tryCatchPattern":null,"preventionTips":["Always reference hoisted components: component={MyScreen}, never component={() => <MyScreen />}.","Define screen components at module scope, outside the navigator's render body.","Use Screen children ({(props) => ...}) when you need to pass extra props.","Run the app in dev mode and fix any console.warn from useNavigationBuilder immediately."],"tags":["react","navigation","performance","state-loss"],"backgroundTag":"inline-component-prop","analyzedSha":"ab1319d6bbf05eae8dc25e33cbf4dc56494e0f0c","analyzedAt":"2026-08-31T14:46:19.520Z","schemaVersion":2},"datasetVersion":"2026-08-31T19:17:28.585Z"}