Handle NaN comparison in useEffect dependency array

hooks/src/index.js

@@ -236,7 +236,7 @@ export function useReducer(reducer, initialState, init) {
 						const currentValue = hookItem._value[0];
 						hookItem._value = hookItem._nextValue;
 						hookItem._nextValue = undefined;
-						if (currentValue !== hookItem._value[0]) shouldUpdate = true;
+						if (!is(currentValue, hookItem._value[0])) shouldUpdate = true;
 					}
 				});
 
@@ -493,6 +493,16 @@ function invokeEffect(hook) {
 	currentComponent = comp;
 }
 
+/**
+ * Check if two values are the same value
+ * @param {*} x
+ * @param {*} y
+ * @returns {boolean}
+ */
+function is(x, y) {
+	return (x === y && (x !== 0 || 1 / x === 1 / y)) || (x !== x && y !== y);
+}
+
 /**
  * @param {any[]} oldArgs
  * @param {any[]} newArgs
@@ -501,7 +511,7 @@ function argsChanged(oldArgs, newArgs) {
 	return (
 		!oldArgs ||
 		oldArgs.length !== newArgs.length ||
-		newArgs.some((arg, index) => arg !== oldArgs[index])
+		newArgs.some((arg, index) => !is(arg, oldArgs[index]))
 	);
 }
 

hooks/test/browser/useEffect.test.js

@@ -591,4 +591,26 @@ describe('useEffect', () => {
 		expect(calls.length).to.equal(1);
 		expect(calls).to.deep.equal(['doing effecthi']);
 	});
+
+	it('should not rerun when receiving NaN on subsequent renders', () => {
+		const calls = [];
+		const Component = ({ value }) => {
+			const [count, setCount] = useState(0);
+			useEffect(() => {
+				calls.push('doing effect' + count);
+				setCount(count + 1);
+				return () => {
+					calls.push('cleaning up' + count);
+				};
+			}, [value]);
+			return <p>{count}</p>;
+		};
+		const App = () => <Component value={NaN} />;
+
+		act(() => {
+			render(<App />, scratch);
+		});
+		expect(calls.length).to.equal(1);
+		expect(calls).to.deep.equal(['doing effect0']);
+	});
 });

hooks/test/browser/useState.test.js

@@ -371,4 +371,30 @@ describe('useState', () => {
 		rerender();
 		expect(scratch.innerHTML).to.equal('<p>hello world!!!</p>');
 	});
+
+	it('should limit rerenders when setting state to NaN', () => {
+		const calls = [];
+		const App = ({ i }) => {
+			calls.push('rendering' + i);
+			const [greeting, setGreeting] = useState(0);
+
+			if (i === 2) {
+				setGreeting(NaN);
+			}
+
+			return <p>{greeting}</p>;
+		};
+
+		act(() => {
+			render(<App i={1} />, scratch);
+		});
+		expect(calls.length).to.equal(1);
+		expect(calls).to.deep.equal(['rendering1']);
+
+		act(() => {
+			render(<App i={2} />, scratch);
+		});
+		expect(calls.length).to.equal(26);
+		expect(calls.slice(1).every(c => c === 'rendering2')).to.equal(true);
+	});
 });