pub mod no_jsx_props_bind;

declare_lint_group! { pub Nursery { name : "nursery" , rules : [self :: no_ambiguous_anchor_text :: NoAmbiguousAnchorText , self :: no_before_interactive_script_outside_document :: NoBeforeInteractiveScriptOutsideDocument , self :: no_continue :: NoContinue , self :: no_deprecated_imports :: NoDeprecatedImports , self :: no_duplicated_spread_props :: NoDuplicatedSpreadProps , self :: no_empty_source :: NoEmptySource , self :: no_equals_to_null :: NoEqualsToNull , self :: no_floating_promises :: NoFloatingPromises , self :: no_for_in :: NoForIn , self :: no_import_cycles :: NoImportCycles , self :: no_increment_decrement :: NoIncrementDecrement , self :: no_jsx_literals :: NoJsxLiterals , self :: no_jsx_props_bind :: NoJsxPropsBind , self :: no_leaked_render :: NoLeakedRender , self :: no_misused_promises :: NoMisusedPromises , self :: no_multi_assign :: NoMultiAssign , self :: no_multi_str :: NoMultiStr , self :: no_next_async_client_component :: NoNextAsyncClientComponent , self :: no_parameters_only_used_in_recursion :: NoParametersOnlyUsedInRecursion , self :: no_proto :: NoProto , self :: no_react_forward_ref :: NoReactForwardRef , self :: no_return_assign :: NoReturnAssign , self :: no_script_url :: NoScriptUrl , self :: no_shadow :: NoShadow , self :: no_sync_scripts :: NoSyncScripts , self :: no_ternary :: NoTernary , self :: no_undeclared_env_vars :: NoUndeclaredEnvVars , self :: no_unknown_attribute :: NoUnknownAttribute , self :: no_unnecessary_conditions :: NoUnnecessaryConditions , self :: no_unresolved_imports :: NoUnresolvedImports , self :: no_unused_expressions :: NoUnusedExpressions , self :: no_useless_catch_binding :: NoUselessCatchBinding , self :: no_useless_undefined :: NoUselessUndefined , self :: no_vue_data_object_declaration :: NoVueDataObjectDeclaration , self :: no_vue_duplicate_keys :: NoVueDuplicateKeys , self :: no_vue_reserved_keys :: NoVueReservedKeys , self :: no_vue_reserved_props :: NoVueReservedProps , self :: no_vue_setup_props_reactivity_loss :: NoVueSetupPropsReactivityLoss , self :: use_array_sort_compare :: UseArraySortCompare , self :: use_await_thenable :: UseAwaitThenable , self :: use_consistent_arrow_return :: UseConsistentArrowReturn , self :: use_destructuring :: UseDestructuring , self :: use_exhaustive_switch_cases :: UseExhaustiveSwitchCases , self :: use_explicit_type :: UseExplicitType , self :: use_find :: UseFind , self :: use_max_params :: UseMaxParams , self :: use_qwik_method_usage :: UseQwikMethodUsage , self :: use_qwik_valid_lexical_scope :: UseQwikValidLexicalScope , self :: use_regexp_exec :: UseRegexpExec , self :: use_sorted_classes :: UseSortedClasses , self :: use_spread :: UseSpread , self :: use_vue_consistent_define_props_declaration :: UseVueConsistentDefinePropsDeclaration , self :: use_vue_define_macros_order :: UseVueDefineMacrosOrder , self :: use_vue_multi_word_component_names :: UseVueMultiWordComponentNames ,] } }

use biome_analyze::{

Rule, RuleDiagnostic, RuleDomain, RuleSource, context::RuleContext, declare_lint_rule,

use biome_js_semantic::Binding;

use biome_js_syntax::{AnyJsExpression, JsxAttribute, binding_ext::AnyJsBindingDeclaration};

use biome_rowan::{AstNode, TextRange};

use biome_rule_options::no_jsx_props_bind::NoJsxPropsBindOptions;

use crate::services::semantic::Semantic;

declare_lint_rule! {

/// Disallow .bind(), arrow functions, or function expressions in JSX props

///

/// Using `.bind()` or creating a function inline in props creates a new function

/// on every render, changing identity and defeating memoisation,

/// which may cause unnecessary rerenders.

///

/// ### Invalid

///

/// ```jsx,expect_diagnostic

/// <Foo onClick={this._handleClick.bind(this)}></Foo>

/// ```

///

/// ```jsx,expect_diagnostic

/// <Foo onClick={() => console.log('Hello!')}></Foo>

/// ```

///

/// ```jsx,expect_diagnostic

/// <Foo onClick={function () { console.log('Hello!'); }}></Foo>

/// ```

///

/// ### Valid

///

/// ```jsx

/// <Foo onClick={this._handleClick}></Foo>

/// ```

pub NoJsxPropsBind {

version: "next",

name: "noJsxPropsBind",

language: "jsx",

recommended: false,

sources: &[RuleSource::EslintReact("jsx-no-bind").inspired()],

domains: &[RuleDomain::React],

}

enum InvalidKind {

ArrowFunction,

Function,

Bind,

pub struct NoJsxPropsBindState {

invalid_kind: InvalidKind,

attribute_range: TextRange,

fn declaration_is_global(declaration: &AnyJsBindingDeclaration) -> bool {

// TODO: This needs some work

!declaration

.syntax()

.ancestors()

.skip(1)

.any(|anc| anc.kind() == biome_js_syntax::JsSyntaxKind::JS_FUNCTION_DECLARATION)

impl Rule for NoJsxPropsBind {

type Query = Semantic<JsxAttribute>;

type State = NoJsxPropsBindState;

type Signals = Option<Self::State>;

type Options = NoJsxPropsBindOptions;

fn run(ctx: &RuleContext<Self>) -> Self::Signals {

let expression: AnyJsExpression = ctx

.query()

.initializer()?

.value()

.ok()?

.as_jsx_expression_attribute_value()?

.expression()

.ok()?;

match &expression {

AnyJsExpression::JsArrowFunctionExpression(_) => Some(NoJsxPropsBindState {

invalid_kind: InvalidKind::ArrowFunction,

attribute_range: expression.range(),

}),

AnyJsExpression::JsFunctionExpression(_) => Some(NoJsxPropsBindState {

invalid_kind: InvalidKind::Function,

attribute_range: expression.range(),

}),

AnyJsExpression::JsCallExpression(call) => {

// TODO: This will still throw a false positive on e.g. window.bind()

let is_bind = call

.callee()

.ok()

.and_then(|c| c.as_js_static_member_expression().cloned())

.and_then(|m| m.member().ok())

.and_then(|n| n.value_token().ok())

.is_some_and(|t| t.text() == "bind");

if is_bind {

Some(NoJsxPropsBindState {

invalid_kind: InvalidKind::Bind,

attribute_range: expression.range(),

})

} else {

None

}

}

AnyJsExpression::JsIdentifierExpression(identifier) => {

let model = ctx.model();

let binding: Binding = model.binding(&identifier.name().ok()?)?;

let declaration = binding.tree().declaration()?;

match &declaration {

AnyJsBindingDeclaration::JsFunctionDeclaration(_) => {

if declaration_is_global(&declaration) {

return None;

}

Some(NoJsxPropsBindState {

invalid_kind: InvalidKind::Function,

attribute_range: expression.range(),

})

}

AnyJsBindingDeclaration::JsVariableDeclarator(variable_declarator) => {

match variable_declarator.initializer()?.expression().ok()? {

AnyJsExpression::JsFunctionExpression(_)

| AnyJsExpression::JsArrowFunctionExpression(_) => {

if declaration_is_global(&declaration) {

return None;

}

Some(NoJsxPropsBindState {

invalid_kind: InvalidKind::Function,

attribute_range: expression.range(),

})

}

_ => None,

}

}

_ => None,

}

}

_ => None,

}

}

fn diagnostic(_ctx: &RuleContext<Self>, state: &Self::State) -> Option<RuleDiagnostic> {

let note = match state.invalid_kind {

InvalidKind::ArrowFunction => "JSX props should not use arrow functions",

InvalidKind::Bind => "JSX props should not use .bind()",

InvalidKind::Function => "JSX props should not use function expressions",

};

Some(

RuleDiagnostic::new(

rule_category!(),

state.attribute_range,

"This function will be recreated on every render. Pass stable function references as props to avoid unnecessary rerenders.",

)

.note(note)

.note("Consider extracting the function or wrapping it in useCallback"),

)

}

<Foo

onClick={function () {

alert("1337");

}}

/>

<Foo onClick={handleClick.bind(this)} />

<Foo onClick={this._handleClick.bind(this)} />

<Foo onClick={() => console.log("Hello!")} />

function Foo() {

function onClick() {}

return <Bar onClick={onClick}></Bar>;

function Foo() {

const onClick = () => {};

return <Bar onClick={onClick}></Bar>;

function Foo() {

const onClick = function () {};

return <Bar onClick={onClick}></Bar>;