Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@arthurgeron/eslint-plugin-react-usememo

Package Overview
Dependencies
Maintainers
1
Versions
46
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@arthurgeron/eslint-plugin-react-usememo - npm Package Compare versions

Comparing version 1.0.0--beta to 1.0.0--beta02

11

dist/index.js

@@ -297,3 +297,3 @@ 'use strict';

type: "object",
properties: { strict: { type: "boolean" } },
properties: { strict: { type: "boolean" }, checkHookReturnObject: { type: "boolean" } },
additionalProperties: false

@@ -339,3 +339,12 @@ },

ReturnStatement: function (node) {
var _a, _b, _c;
if (node.parent.parent.type === 'FunctionDeclaration' && getIsHook(node.parent.parent.id) && node.argument) {
if (node.argument.type === 'ObjectExpression') {
if ((_b = (_a = context.options) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.checkHookReturnObject) {
(_c = node.argument) === null || _c === void 0 ? void 0 : _c.properties.forEach(function (_node) {
process(_node, undefined, hookReturnExpressionData);
});
}
return;
}
process(node, node.argument, hookReturnExpressionData);

@@ -342,0 +351,0 @@ }

4

package.json
{
"name": "@arthurgeron/eslint-plugin-react-usememo",
"version": "1.0.0--beta",
"version": "1.0.0--beta02",
"description": "",

@@ -34,3 +34,3 @@ "main": "dist/index.js",

"prepare": "husky install",
"prepublish:public": "npm run build",
"prepublishOnly": "npm run build",
"publish:public": "npm publish --access public",

@@ -37,0 +37,0 @@ "deadCode": "./node_modules/.bin/ts-prune --error --ignore"

@@ -41,5 +41,7 @@ # eslint-plugin-react-usememo

- `{strict: true}`: Fails even in cases where it is difficult to determine if the value in question is a primitive (string or number) or a complex value (object, array, etc.).
- `{strict: true}`: Fails even in cases where it is difficult to determine if the value in question is a primitive (string or number) or a complex value (object, array, etc.);
- `{checkHookReturnObject: true}`: Will require Object Expressions passed in return statements (e.g. `return {someFunc}`) to also be memoised (e.g. `return useMemo(() => ({someFunc}), [someFunc])`); Disabled by default.
## **Incorrect**
### Function Components
#### **Incorrect**
```JavaScript

@@ -60,4 +62,22 @@ function Component() {

```
## **Incorrect** (class component)
#### **Correct**
```JavaScript
// Has no dynamic dependencies therefore should be static, will be declared only once.
function renderItem({ item }) {
return <Text>item.name</Text>;
}
const EMPTY_ARRAY = [];
function Component() {
const [data, setData] = useState(EMPTY_ARRAY);
// Will only render again if data changes
return (<FlatList renderItem={renderItem} data={data ?? EMPTY_ARRAY} />);
}
```
### Class Components
#### **Incorrect**
```JavaScript
class Component() {

@@ -98,22 +118,5 @@

## **Correct**
#### **Correct**
```JavaScript
// Has no dynamic dependencies therefore should be static, will be declared only once.
function renderItem({ item }) {
return <Text>item.name</Text>;
}
const EMPTY_ARRAY = [];
function Component() {
const [data, setData] = useState(EMPTY_ARRAY);
// Will only render again if data changes
return (<FlatList renderItem={renderItem} data={data ?? EMPTY_ARRAY} />);
}
```
## **Correct** (class component)
```JavaScript
// Static therefore is only declared once

@@ -155,3 +158,3 @@ const EMPTY_ARRAY = [];

```
## **Correct**
#### **Correct**
```JavaScript

@@ -172,2 +175,53 @@ const EMPTY_ARRAY = [];

```
### Hooks
Hooks return statements follow the same motto, they can and usually are used inside other hooks.
#### **Incorrect**
```JavaScript
function useData() {
let otherData = {};
function getData() {
// Doing something
}
return { getData, otherData};
}
```
#### **Incorrect** (checkHookReturnObject: true)
```JavaScript
function getData() {
// Doing something
}
function useData() {
return { getData };
}
```
#### **Correct**
```JavaScript
const otherData = {}; // Or declare inside hook with useMemo
function getData() { // Or declare inside hook with useCallback
// Doing something
}
function useData() {
return useMemo(() => ({ getData, otherData}), []); // The return object itself can be used in dependency arrays
}
```
#### **Correct** (checkHookReturnObject: true)
```JavaScript
function getData() {
// Doing something
}
function useData() {
return useMemo(() => ({ getData }), []);
}
```
## `require-memo`

@@ -198,3 +252,4 @@

- `{strict: true}`: Fails even in cases where it is difficult to determine if the value in question is a primitive (string or number) or a complex value (object, array, etc.).
- `{strict: true}`: Fails even in cases where it is difficult to determine if the value in question is a primitive (string or number) or a complex value (object,
array, etc.).

@@ -201,0 +256,0 @@ ## **Incorrect**

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc