|
|
/** * @fileoverview Prevent usage of this.state within setState * @author Rolf Erik Lekang, Jørgen Aaberg */
'use strict';
const docsUrl = require('../util/docsUrl'); const Components = require('../util/Components');
// ------------------------------------------------------------------------------
// Rule Definition
// ------------------------------------------------------------------------------
module.exports = { meta: { docs: { description: 'Reports when this.state is accessed within setState', category: 'Possible Errors', recommended: false, url: docsUrl('no-access-state-in-setstate') },
messages: { useCallback: 'Use callback in setState when referencing the previous state.' } },
create: Components.detect((context, components, utils) => { function isSetStateCall(node) { return node.type === 'CallExpression' && node.callee.property && node.callee.property.name === 'setState' && node.callee.object.type === 'ThisExpression'; }
function isFirstArgumentInSetStateCall(current, node) { if (!isSetStateCall(current)) { return false; } while (node && node.parent !== current) { node = node.parent; } return current.arguments[0] === node; }
function isClassComponent() { return !!(utils.getParentES6Component() || utils.getParentES5Component()); }
// The methods array contains all methods or functions that are using this.state
// or that are calling another method or function using this.state
const methods = []; // The vars array contains all variables that contains this.state
const vars = []; return { CallExpression(node) { if (!isClassComponent()) { return; } // Appends all the methods that are calling another
// method containing this.state to the methods array
methods.forEach((method) => { if (node.callee.name === method.methodName) { let current = node.parent; while (current.type !== 'Program') { if (current.type === 'MethodDefinition') { methods.push({ methodName: current.key.name, node: method.node }); break; } current = current.parent; } } });
// Finding all CallExpressions that is inside a setState
// to further check if they contains this.state
let current = node.parent; while (current.type !== 'Program') { if (isFirstArgumentInSetStateCall(current, node)) { const methodName = node.callee.name; methods.forEach((method) => { if (method.methodName === methodName) { context.report({ node: method.node, messageId: 'useCallback' }); } });
break; } current = current.parent; } },
MemberExpression(node) { if ( node.property.name === 'state' && node.object.type === 'ThisExpression' && isClassComponent() ) { let current = node; while (current.type !== 'Program') { // Reporting if this.state is directly within this.setState
if (isFirstArgumentInSetStateCall(current, node)) { context.report({ node, messageId: 'useCallback' }); break; }
// Storing all functions and methods that contains this.state
if (current.type === 'MethodDefinition') { methods.push({ methodName: current.key.name, node }); break; } else if (current.type === 'FunctionExpression' && current.parent.key) { methods.push({ methodName: current.parent.key.name, node }); break; }
// Storing all variables containg this.state
if (current.type === 'VariableDeclarator') { vars.push({ node, scope: context.getScope(), variableName: current.id.name }); break; }
current = current.parent; } } },
Identifier(node) { // Checks if the identifier is a variable within an object
let current = node; while (current.parent.type === 'BinaryExpression') { current = current.parent; } if ( current.parent.value === current || current.parent.object === current ) { while (current.type !== 'Program') { if (isFirstArgumentInSetStateCall(current, node)) { vars .filter((v) => v.scope === context.getScope() && v.variableName === node.name) .forEach((v) => { context.report({ node: v.node, messageId: 'useCallback' }); }); } current = current.parent; } } },
ObjectPattern(node) { const isDerivedFromThis = node.parent.init && node.parent.init.type === 'ThisExpression'; node.properties.forEach((property) => { if (property && property.key && property.key.name === 'state' && isDerivedFromThis) { vars.push({ node: property.key, scope: context.getScope(), variableName: property.key.name }); } }); } }; }) };
|