Repository: freeCodeCamp/freeCodeCamp
File: client/src/components/Donation/donation-modal.tsx (TypeScript)

Code before:
        action: `Displayed ${
          recentlyClaimedBlock !== null ? 'Block' : 'Progress'
        } Donation Modal`
      });
    }
  }, [show, recentlyClaimedBlock, executeGA]);

  useEffect(() => {
    if (show) setCtaNumber(getctaNumberBetween1To10());
  }, [show]);

  useEffect(() => {
    if (showMultiTier) {
      setShowDonateForm(false);
      setDonationAmount(defaultTierAmount);
    }
  }, [showMultiTier]);

  const handleModalHide = () => {
    // If modal is open on a SuperBlock page
    if (isLocationSuperBlock(location)) {
      goToAnchor('claim-cert-block');
    }
  };

  function ModalHeader() {
    return (
      <div className=' text-center block-modal-text'>
        <Row>
          {!closeLabel && (
            <Col sm={10} smOffset={1} xs={12}>
              {recentlyClaimedBlock !== null && (
                <b>
                  {t('donate.nicely-done', {
                    block: t(
                      `intro:${recentlyClaimedBlock.superBlock}.blocks.${recentlyClaimedBlock.block}.title`
                    )
                  })}
                </b>
              )}
              {showMultiTier ? (
                <h2>{t('donate.help-us-develop')}</h2>
              ) : (
                <b>{t(`donate.progress-modal-cta-${ctaNumber}`)}</b>
              )}
            </Col>
          )}
        </Row>
        <Spacer size='small' />
      </div>
    );

Review comment (suggestion):
We should also move the sub-components out of `DonateModal` and let them be standalone components.

Nested components are not recommended as every time the parent component (`DonateModal`) re-renders, the nested components are redefined / re-initialized, which is wasteful as React has to build the entire DOM tree again.

There is an ESLint rule for this, btw: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-unstable-nested-components.md 🙂 

Code after:
}: {
  loadElementsIndividually: boolean;
  donationAmount: DonationAmount;
  setDonationAmount: React.Dispatch<React.SetStateAction<DonationAmount>>;
  setShowDonateForm: React.Dispatch<React.SetStateAction<boolean>>;
}) {
  const { t } = useTranslation();
  return (
    <Row className={'donate-btn-group'}>
      <Col
        xs={12}
        {...(loadElementsIndividually && {
          className: 'two-seconds-delay-fade-in'
        })}
      >
        <b>
          {t('donate.confirm-monthly', {
            usd: formattedAmountLabel(donationAmount)
          })}
        </b>
        <Spacer size='small' />
        <Tabs
          className={'donate-btn-group'}
          defaultValue={donationAmount.toString()}
        >
          <TabsList className='nav-lists'>
            {subscriptionAmounts.map(value => (
              <TabsTrigger
                key={value}
                value={value.toString()}
                onClick={() => setDonationAmount(value)}
              >
                ${formattedAmountLabel(value)}
              </TabsTrigger>
            ))}
          </TabsList>
          <Spacer size='small' />
          {subscriptionAmounts.map(value => {
            const usd = formattedAmountLabel(donationAmount);
            const hours = convertToTimeContributed(donationAmount);
            const donationDescription = t('donate.your-donation-2', {
              usd,
              hours
            });

            return (
              <TabsContent
                key={value}
                className='tab-content'
                value={value.toString()}
              >