An alternative to setTimeout for managing animation state in React is to use React's state and effects along with requestAnimationFrame or a library like react-spring or framer-motion. Here's a simple explanation and example:

Using useEffect and State

You can manage animation state using React's useState and useEffect without relying on setTimeout.

import React, { useState, useEffect } from "react";

function AnimatedComponent() {
  const [isAnimating, setIsAnimating] = useState(false);

  useEffect(() => {
    if (isAnimating) {
      const timer = setTimeout(() => {
        setIsAnimating(false); // End animation after 2 seconds
      }, 2000);
      return () => clearTimeout(timer); // Cleanup timeout
    }
  }, [isAnimating]);

  return (
    <div>
      <button onClick={() => setIsAnimating(true)}>Start Animation</button>
      <div className={isAnimating ? "animate" : ""}>Animation Box</div>
    </div>
  );
}

Using Animation Libraries

Libraries like react-spring or framer-motion provide declarative and smoother animation management without handling timers directly.

Example with framer-motion:

import { motion } from "framer-motion";

function AnimatedComponent() {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 2 }} // Animation duration of 2 seconds
    >
      Animation Box
    </motion.div>
  );
}

Why Avoid setTimeout?

• It can lead to bugs if the component unmounts before the timeout ends.
• React's declarative state or animation libraries are more reliable and cleaner for managing animations.

So friends, that's all for this post. For more tech-related information, visit our website TechGrabber, where we provide the latest tech reviews and updates in Hindi Language.