From 0d9f2ee61ec65f10cca71b4a7ca15c78a7ce0487 Mon Sep 17 00:00:00 2001
From: Jim O'Donnell <jim@zooniverse.org>
Date: Tue, 21 May 2019 11:50:24 +0100
Subject: [PATCH 1/3] Intervention: ignore prop changes in useEffect Ignore
 prop changes in useEffect, so that cleanup only runs when the Intervention
 component unmounts.

---
 app/classifier/components/Intervention/Intervention.jsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/app/classifier/components/Intervention/Intervention.jsx b/app/classifier/components/Intervention/Intervention.jsx
index ecc7a0f394..1797329b60 100644
--- a/app/classifier/components/Intervention/Intervention.jsx
+++ b/app/classifier/components/Intervention/Intervention.jsx
@@ -14,14 +14,15 @@ const StyledInterventionMessage = styled.div`
   }
 `;
 
-function Intervention({ onUnmount, intervention, user }) {
+function Intervention(props) {
+  const { onUnmount, intervention, user } = props;
   const { message } = intervention;
   const checkbox = React.createRef();
 
   useEffect(() => {
     // the return value of an effect will be called to clean up after the component
     return onUnmount;
-  });
+  }, []);
 
   function onChange() {
     // Invert the checked value because true means do not send me messages.

From 30b94b16b2900a514b6da3ea2d8926cb8ef7a5f0 Mon Sep 17 00:00:00 2001
From: Jim O'Donnell <jim@zooniverse.org>
Date: Tue, 21 May 2019 11:59:55 +0100
Subject: [PATCH 2/3] Test Intervention props change Expect that the current
 message will not be cleared on props change.

---
 .../components/Intervention/Intervention.spec.js   | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/app/classifier/components/Intervention/Intervention.spec.js b/app/classifier/components/Intervention/Intervention.spec.js
index 7fcb107e90..a9cb08b45b 100644
--- a/app/classifier/components/Intervention/Intervention.spec.js
+++ b/app/classifier/components/Intervention/Intervention.spec.js
@@ -57,6 +57,16 @@ describe('Intervention', function () {
     })
   });
 
+  describe('on props change', function () {
+    before(function () {
+      wrapper.setProps({ intervention: {message: 'Hello' } });
+    });
+
+    it('should not call onUnmount', function () {
+      expect(onUnmount).to.have.not.been.called
+    });
+  });
+
   describe('on unmount', function () {
     before(function () {
       wrapper.unmount()
@@ -64,6 +74,6 @@ describe('Intervention', function () {
 
     it('should call onUnmount', function () {
       expect(onUnmount).to.have.been.calledOnce
-    })
-  })
+    });
+  });
 });

From 4da31db43a52c1902e7801755cb27b8e4055a356 Mon Sep 17 00:00:00 2001
From: Jim O'Donnell <jim@eatyourgreens.org.uk>
Date: Tue, 21 May 2019 13:30:24 +0100
Subject: [PATCH 3/3] Add a comment explaining useEffect

Co-Authored-By: Campbell Allen <campbell.allen@gmail.com>
---
 app/classifier/components/Intervention/Intervention.jsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/app/classifier/components/Intervention/Intervention.jsx b/app/classifier/components/Intervention/Intervention.jsx
index 1797329b60..1e24bd7183 100644
--- a/app/classifier/components/Intervention/Intervention.jsx
+++ b/app/classifier/components/Intervention/Intervention.jsx
@@ -20,7 +20,9 @@ function Intervention(props) {
   const checkbox = React.createRef();
 
   useEffect(() => {
-    // the return value of an effect will be called to clean up after the component
+     /* the return value of an effect will be called to clean up after the component.
+     Passing an empty array ([]) as a second argument tells React that your effect doesn’t depend on any values from props or state
+     so it never needs to re-run, https://reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects */
     return onUnmount;
   }, []);