fix(client): ensure unmount effect has most recent values (#43282)

* ensure unmount effect has most recent values

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
This commit is contained in:
awu43
2021-08-26 16:03:11 -07:00
committed by GitHub
parent 67ee31cbfc
commit 58ed9330bf

View File

@ -1,5 +1,5 @@
import { Row, Col, Button, Grid } from '@freecodecamp/react-bootstrap'; import { Row, Col, Button, Grid } from '@freecodecamp/react-bootstrap';
import React, { useEffect } from 'react'; import React, { useEffect, useRef } from 'react';
import Helmet from 'react-helmet'; import Helmet from 'react-helmet';
import { TFunction, withTranslation } from 'react-i18next'; import { TFunction, withTranslation } from 'react-i18next';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
@ -36,6 +36,13 @@ function AcceptPrivacyTerms({
acceptedPrivacyTerms, acceptedPrivacyTerms,
t t
}: AcceptPrivacyTermsProps) { }: AcceptPrivacyTermsProps) {
const acceptedPrivacyRef = useRef(acceptedPrivacyTerms);
const acceptTermsRef = useRef(acceptTerms);
useEffect(() => {
acceptedPrivacyRef.current = acceptedPrivacyTerms;
acceptTermsRef.current = acceptTerms;
});
useEffect(() => { useEffect(() => {
return () => { return () => {
// if a user navigates away from here we should set acceptedPrivacyTerms // if a user navigates away from here we should set acceptedPrivacyTerms
@ -43,14 +50,10 @@ function AcceptPrivacyTerms({
// preferences (hence the null payload) // preferences (hence the null payload)
// This makes sure that the user has to opt in to Quincy's emails and that // This makes sure that the user has to opt in to Quincy's emails and that
// they are only asked twice // they are only asked twice
if (!acceptedPrivacyTerms) { if (!acceptedPrivacyRef.current) {
acceptTerms(null); acceptTermsRef.current(null);
} }
}; };
// We're ignoring all dependencies, since this effect must only run once
// (when the user leaves the page).
// TODO: figure out how to useCallback to only run this effect once.
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []); }, []);
function onClick(isWeeklyEmailAccepted: boolean) { function onClick(isWeeklyEmailAccepted: boolean) {