Only clear interventions on Intervention unmount

app/classifier/components/Intervention/Intervention.jsx

@@ -14,14 +14,17 @@ 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
+     /* 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;
-  });
+  }, []);
 
   function onChange() {
     // Invert the checked value because true means do not send me messages.

app/classifier/components/Intervention/Intervention.spec.js

@@ -57,13 +57,23 @@ 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()
     });
 
     it('should call onUnmount', function () {
       expect(onUnmount).to.have.been.calledOnce
-    })
-  })
+    });
+  });
 });