Как в React при размонтировании компонента отложить этот процесс на некоторое время?

Question

У меня есть компонент, когда он размонтируется, я хочу этот процесс сделать с некоторой задержкой, как это осуществить? Типа такого, но чтобы без бесконечного цикла

 useEffect(() => {
   return () => { 
       while(true) { }
   }
 );

Answer 1

Чем такой вариант плох?

import { useState, useEffect } from "react";

function CollapsibleComponent() {
  const [isVisible, setIsVisible] = useState(true);
  const [shouldRender, setShouldRender] = useState(true);

  const closeWithAnimation = () => {
    setIsVisible(false); // Запускаем анимацию (max-height: 0)
    
    // Ждём окончания анимации (например, 300ms)
    setTimeout(() => {
      setShouldRender(false); // Удаляем из DOM
    }, 300);
  };

  if (!shouldRender) return null; // Компонент удалён из DOM

  return (
    <div>
      Контент, который нужно анимировать
      <button onClick={closeWithAnimation}>Закрыть</button>
    </div>
  );
}

Под любой компонент даже внешний

import { useState } from "react";
import Grundy from "Grundy";

function WrappedComponent() {
  const [shouldRender, setShouldRender] = useState(true);
  const [isVisible, setIsVisible] = useState(true);

  const closeWithAnimation = () => {
    setIsVisible(false);
    setTimeout(() => setShouldRender(false), 300);
  };

  if (!shouldRender) return null;

  return (
    <div style={{
      transition: "opacity 300ms, max-height 300ms",
      opacity: isVisible ? 1 : 0,
      maxHeight: isVisible ? "1000px" : "0px",
      overflow: "hidden"
    }}>
      <Grundy />
      <button onClick={closeWithAnimation}>Закрыть</button>
    </div>
  );
}

БЛОГ НА HUSL

Как в React при размонтировании компонента отложить этот процесс на некоторое время?

Ответы (1 шт):