Функция очистки React useEffect не отменяет изменения, вызванные строгим режимом React в разработке

Эта проблема связана с тем, что React намеренно перемонтирует ваши компоненты в разработке, чтобы найти ошибки.

Я знаю, что могу отключить строгий режим, но React не рекомендует это делать. Я просто ищу рекомендуемый подход, чтобы это исправить.

Я пытаюсь создать открытый модальный компонент, который закрывается либо при нажатии кнопки закрытия, либо при нажатии пользователем за пределами модального содержимого.

Итак, чтобы реализовать закрытие модального окна внешним щелчком, я использую перехватчик useEffect, и я хочу, чтобы его функция обратного вызова запускалась только при изменении состояния isModalPopedUp и не запускалась при первоначальном рендеринге компонента. Для этого я использую специальный хук:

import { useRef } from "react";

import { useEffect } from "react";

// This custom hook sets if a useEffect callback runs at initial render or not
export default function useDidMountEffect(argObject = {}) {
    /* 
    argObject = {
        runOnInitialRender: boolean,
        callback: () => void,
        dependencies: any[] // array of dependencies for useEffect
    }
    */
    const didMountRef = useRef(argObject.runOnInitialRender);

    // useEffect to run
    useEffect(() => {
        if (didMountRef.current) {
            // callback will run on first render if argObject.runOnInitialRender is true
            argObject.callback();
        } else {
            // callback will now run on dependencies change
            didMountRef.current = true;
        }
    }, argObject.dependencies); // only run if dependencies change
}

Что касается модального компонента, я разделил его на два компонента: родительский-модальный, который обрабатывает логику состояния:

import { useEffect, useState } from "react";
import Modal from "./modal";
import useDidMountEffect from "./useDidMountHook";
import "./modal.css";

export default function ModalParent() {
    const [isModalPopedUp, setIsModalPopedUp] = useState(false);

    function handleToggleModalPopup() {
        setIsModalPopedUp((prevState) => !prevState);
    }

    function handleOnClose() {
        setIsModalPopedUp(false);
    }

    function handleOutsideModalClick(event) {
        !event.target.classList.contains("modal-content") && handleOnClose();
    }

    // add event listener for outside modal click using the useDidMountEffect hook
    useDidMountEffect({
        runOnInitialRender: false,
        callback: () => {
            // add event listener when modal is shown
            if (isModalPopedUp) {
                document.addEventListener("click", handleOutsideModalClick);
            } else {
                // remove event listener when modal is closed
                document.removeEventListener("click", handleOutsideModalClick);
            }

            // return a cleanup function that removes the event listener when component unmounts
            return () => {
                document.removeEventListener("click", handleOutsideModalClick);
            };
        },
        dependencies: [isModalPopedUp], // only re-run the effect when isModalPopedUp changes
    });

    return (
        <div>
            <button
                onClick = {() => {
                    handleToggleModalPopup();
                }}>
                Open Modal Popup
            </button>
            {isModalPopedUp && (
                <Modal
                    header = {<h1>Customised Header</h1>}
                    footer = {<h1>Customised Footer</h1>}
                    onClose = {handleOnClose}
                    body = {<div>Customised Body</div>}
                />
            )}
        </div>
    );
}

и основной модальный компонент:

export default function Modal({ id, header, body, footer, onClose }) {
    return (
        <div id = {id || "modal"} className = "modal">
            <div className = "modal-content">
                <div className = "header">
                    <span onClick = {onClose} className = "close-modal-icon">
                        &times; {/* an X icon */}
                    </span>
                    <div>{header ? header : "Header"}</div>
                </div>
                <div className = "body">
                    {body ? (
                        body
                    ) : (
                        <div>
                            <p>This is our Modal body</p>
                        </div>
                    )}
                </div>
                <div className = "footer">
                    {footer ? footer : <h2>footer</h2>}
                </div>
            </div>
        </div>
    );
}

Итак, проблема в том, что React перемонтирует родительский компонент после первоначального рендеринга, выполняя обратный вызов для useDidMountEffect, чтобы немедленно добавить прослушиватель событий щелчка к элементу document без изменения состояния isModalPopedUp на true при нажатии кнопки «открыть модальное».

Таким образом, при нажатии на кнопку «открыть модальное окно» isModalPopedUp переключается на true, но затем сразу же меняется на false из-за преждевременного добавления прослушивателя событий щелчка в документ. Таким образом, в конечном итоге модальное окно невозможно открыть, нажав кнопку «Открыть модальное окно».

React.dev предлагает простое решение, используя функцию очистки, возвращаемую обратным вызовом useEffect, чтобы отменить изменения после перемонтирования:

Обычно ответом является реализация функции очистки. Функция очистки должна остановить или отменить все действия Эффекта. Эмпирическое правило заключается в том, что пользователь не должен иметь возможности различать эффект, запускаемый один раз (как в рабочей среде), и последовательность настройки → очистки → настройки (как вы видите при разработке).

Моя функция очистки удаляет прослушиватель событий щелчка из элемента document, но это все равно не решает проблему.

Для оформления модального окна я использую:

/** @format */

.modal {
    position: fixed;
    z-index: 1;
    padding-top: 2rem;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #b19b9b;
    color: black;
    overflow: auto;
    padding-bottom: 2rem;
}

.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid red;
    width: 80%;
    animation-name: animateModal;
    animation-duration: 0.5s;
    animation-timing-function: ease-in-out;
}

.close-modal-icon {
    cursor: pointer;
    font-size: 40px;
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    font-weight: bold;
}

.header {
    padding: 4px 10px;
    background-color: #5cb85c;
    color: white;
}

.body {
    padding: 2px 16px;
    height: 200px;
}

.footer {
    padding: 4px 16px;
    background-color: #5cb85c;
    color: white;
}

@keyframes animateModal {
    from {
        top: -200px;
        opacity: 0;
    }

    to {
        top: 0;
        opacity: 1;
    }
}