search

palantir / tslint-react

:orange_book: Lint rules related to React & JSX for TSLint.
Apache License 2.0
749 stars 76 forks source link

Add React Performance checks for array-literal and object-literal props. #159

Closed darthtrevino closed 5 years ago

darthtrevino commented 6 years ago

In the same vein as the jsx-no-lambda rule, any dynamic expression, such as array or object expressions, can cause downstream components that adhere to the pure interface to re-render. Array and property literals created in the render() cycle will not have reference equality across renders, which may lead to unnecessary re-renderings.

This PR is a bit of a WIP, but might be good enough for a first pass. Here are some things we could check for in addition to basic literals in properties: -[ ] Inspect spread-props for dynamic object/array/lambda expressions -[ ] Inspect render() methods for dynamic object/array/lambda expressions -[ ] If an component has a prop type that isn't a primitive or a function, emit a warning about implementing shouldComponentUpdate

palantirtech commented 6 years ago

Thanks for your interest in palantir/tslint-react, @darthtrevino! Before we can accept your pull request, you need to sign our contributor license agreement - just visit https://cla.palantir.com/ and follow the instructions. Once you sign, I'll automatically update this pull request.

darthtrevino commented 6 years ago

I've published the new rules under tslint-react-perf. The source is at the source is [here]: https://github.com/darthtrevino/tslint-react-perf). If/when the rules are there adopted by tslint-react, I'll deprecate the project.

It's evolved a bit since the PR (it checks spread attrs and ternary operators), so I've added implementations of the no-lambda and no-bind rules here as well

adidahiya commented 5 years ago

Closing due to inactivity and age. See #210