Quiero establecer una animación para cada elemento creado al hacer clic en el fondo de la página de inicio del sitio web (un efecto dominó como gotas de lluvia cayendo sobre el agua) y desaparecer momentos después. Hasta ahora, la solución que encontré fue desmontar cada componente estableciendo un estado en falso, dentro de este componente secundario. Tengo la sensación de que estoy usando una práctica realmente mala y quiero corregirla.

Inicio ->

 export interface Coordenates { x: number; y: number; } const Home: React.FC = () => { const [mousePositionArray, setMoussePositionArray] = useState<Coordenates[]>([]) const handleClick = (e: React.MouseEvent<HTMLDivElement>) => { setMoussePositionArray( mousePositionArray ? prev => [...prev, { x: e.pageX, y: e.pageY }] : [{ x: e.pageX, y: e.pageY }] ) } return ( <div onClick={handleClick} style={{ width: '100vw', height: '100vh', position: 'relative' }} > {mousePositionArray.map((position, i) => ( <Ripple key={i} positionX={`${position.x}px`} positionY={`${position.y}px`} /> ))} </div> ) };

Componente ondulado ->

 interface Props { positionX: string; positionY: string; } const Ripple: React.FC<Props> = ({ positionX, positionY }) => { const [active, setActive] = useState(true); // Simulate callback on animation completion useEffect(() = { setTimeout(() => { setActive(false) }, 2000) }, []); if (!active) return null; return ( <SVG positionX={positionX} positionY={positionY} > <g className="blob" > <path className="blob-path" d="M138.4, -233.9C176.8, -217.5, 203.6, -175.3, 225.7, -132C247.9, -88.7, 265.5, -44.3, 259.5, -3.3999999999999995C253.6, 37.5, 224.2, 75, 200.5, 115.6C176.7, 156.1, 158.6, 199.7, 126.1, 222.8C93.7, 245.9, 46.8, 248.5, 1.7999999999999998, 245.3C-43.2, 242.1, -86.3, 233.2, -127.3, 215C-168.3, 196.9, -207.1, 169.4, -227.1, 132.1C-247, 94.7, -248, 47.3, -249, -0.5999999999999996C-250, -48.5, -251, -97, -229.6, -131.8C-208.2, -166.6, -164.3, -187.6, -122.3, -201.9C-80.3, -216.1, -40.2, -223.6, 4.9, -232.1C50, -240.6, 100, -250.2, 138.4, -233.9 " fill="none" stroke="#F7770F" strokeWidth='6'> </path> </g> </SVG> ) };

Imagen: Componentes renderizados apilados

GIF: componentes renderizados apilados

Resultado previsto aquí

Agradezco todas las sugerencias.