oxc-project/oxc · error · OxcDiagnostic

Do not define components during render.

Error message

Do not define components during render.

What it means

Emitted by report_candidate in the react no-unstable-nested-components rule when a component definition is created during another component's render — inside the parent's body, a render callback, or (when flagged) a props position. Creating components during render remounts them every render, resetting state and hurting performance.

Source

Thrown at crates/oxc_linter/src/rules/react/no_unstable_nested_components.rs:43

};

const COMPONENT_AS_PROPS_INFO: &str =
    " If you want to allow component creation in props, set `allowAsProps` option to true.";

fn no_unstable_nested_components_diagnostic(
    span: Span,
    parent_name: Option<&str>,
    is_component_in_prop: bool,
) -> OxcDiagnostic {
    let parent = parent_name.map_or(String::new(), |name| format!(" `{name}`"));
    let mut help = format!(
        "Move this component definition out of the parent component{parent} and pass data as props."
    );
    if is_component_in_prop {
        help.push_str(COMPONENT_AS_PROPS_INFO);
    }

    OxcDiagnostic::warn("Do not define components during render.").with_help(help).with_label(span)
}

#[derive(Debug, Clone, Serialize, Deserialize, JsonSchema)]
#[serde(rename_all = "camelCase", default, deny_unknown_fields)]
struct NoUnstableNestedComponentsConfig {
    /// Allow component definitions in props.
    allow_as_props: bool,
    /// Optional custom propTypes validators accepted for eslint-plugin-react compatibility.
    custom_validators: Vec<CompactStr>,
    /// Glob pattern for render-prop names that may receive inline component definitions.
    prop_name_pattern: CompactStr,
}

impl Default for NoUnstableNestedComponentsConfig {
    fn default() -> Self {
        Self {
            allow_as_props: false,
            custom_validators: Vec::new(),

View on GitHub (pinned to a3d33dda7c)

Solutions

1. Move the nested component definition outside the parent component and pass data via props
2. If the definition is intentionally inline inside props, set the allowAsProps option to true

When it happens

Trigger: Thrown at crates/oxc_linter/src/rules/react/no_unstable_nested_components.rs:43 when the library encounters an invalid state.

Common situations: See trigger scenarios.

AI-assisted analysis of oxc-project/oxc@a3d33dda7c (2026-08-20). Data as JSON: /api/errors/4d4ca0eab9bbca39. Report an issue: GitHub.