ESLint Plugin: react-no-unsafe-timeout: Consider variable assignment as valid

packages/components/src/snackbar/index.js

@@ -24,8 +24,6 @@ function Snackbar( {
 	onRemove = noop,
 }, ref ) {
 	useEffect( () => {
-		// This rule doesn't account yet for React Hooks
-		// eslint-disable-next-line @wordpress/react-no-unsafe-timeout
 		const timeoutHandle = setTimeout( () => {
 			onRemove();
 		}, NOTICE_TIMEOUT );

packages/eslint-plugin/CHANGELOG.md

@@ -4,6 +4,7 @@
 
 - Fixed custom regular expression for the `no-restricted-syntax` rule enforcing translate function arguments. [#15839](https://github.com/WordPress/gutenberg/pull/15839).
 - Fixed arguments checking of `_nx` for the `no-restricted-syntax` rule enforcing translate function arguments. [#15839](https://github.com/WordPress/gutenberg/pull/15839).
+- Fixed false positive with `react-no-unsafe-timeout` which would wrongly flag errors when assigning `setTimeout` result to a variable (for example, in a `useEffect` hook).
 
 ## 2.2.0 (2019-05-21)
 

packages/eslint-plugin/rules/__tests__/react-no-unsafe-timeout.js

@@ -40,6 +40,18 @@ ruleTester.run( 'react-no-unsafe-timeout', rule, {
 		{
 			code: `class MyComponent extends Component { componentDidMount() { this.timeoutId = setTimeout(); } }`,
 		},
+		{
+			code: `
+function MyComponent() {
+	useEffect( () => {
+		const timeoutHandle = setTimeout( () => {} );
+
+		return () => clearTimeout( timeoutHandle );
+	}, [] );
+
+	return null;
+}`,
+		},
 	],
 	invalid: [
 		{

packages/eslint-plugin/rules/react-no-unsafe-timeout.js

@@ -48,7 +48,10 @@ module.exports = {
 
 				// If the result of a `setTimeout` call is assigned to a
 				// variable, assume the timer ID is handled by a cancellation.
-				const hasAssignment = node.parent.type === 'AssignmentExpression';
+				const hasAssignment = (
+					node.parent.type === 'AssignmentExpression' ||
+					node.parent.type === 'VariableDeclarator'
+				);
 				if ( hasAssignment ) {
 					return;
 				}