diff --git a/app/classifier/components/Intervention/Intervention.jsx b/app/classifier/components/Intervention/Intervention.jsx index ecc7a0f394..1e24bd7183 100644 --- a/app/classifier/components/Intervention/Intervention.jsx +++ b/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. 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 - }) - }) + }); + }); });