Create-react-app: Lambdas are forbidden in JSX attributes due to their rendering performance impact

[peterremote1980]

i got "Lambdas are forbidden in JSX attributes due to their rendering performance impact"

but in my tsconfig.json, i already added "jsx-no-lambda": false

{
    "compilerOptions": {
        "baseUrl": ".",
        "outDir": "build/dist",
        "module": "esnext",
        "target": "es5",
        "lib": ["es6", "dom"],
        "sourceMap": true,
        "allowJs": true,
        "jsx": "react",
        "moduleResolution": "node",
        "rootDir": "src",
        "forceConsistentCasingInFileNames": true,
        "noImplicitReturns": true,
        "noImplicitThis": true,
        "noImplicitAny": true,
        "strictNullChecks": true,
        "suppressImplicitAnyIndexErrors": true,
        "noUnusedLocals": true
    },
    "rules": {
        "jsx-no-lambda": false
    },
    "exclude": [
        "node_modules",
        "build",
        "scripts",
        "acceptance-tests",
        "webpack",
        "jest",
        "src/setupTests.ts"
    ]
}

please help

[bugzpodder]

create-react-app doesn't support typescript. Can you fill out a bug template showing your configuration?

[gaearon]

You probably want to file an issue with https://github.com/wmonk/create-react-app-typescript instead.

Please note we are not supportive of this rule being enabled either.

[kimhjona]

@peterremote1980 This is something I ran into recently. You'll need to recompile your project to see those updates (npm start or yarn start again)

[maierson]

@gaearon Can you please elaborate? Is it a performance bottleneck or not? (new lambda created on every render?)

[bugzpodder]

Please refer to https://github.com/wmonk/create-react-app-typescript/issues/370 for more info.

[maierson]

@bugzpodder Precisely:

wmonk#370 - don't use lambda in jsx
gaearon - use lambda in jsx (NOT supporting rule enabled)
maierson 🤔

[gaearon]

There's nothing technically wrong with using lambdas in JSX.

There are some cases where it matters but I suggest fixing them on case-by-case basis.

The issue usually has nothing to do with function being created on render. It's about PureComponents below not being able to use a shallow comparison (because the function prop is always new).