High-Performance List Animations

Animating lists in React can be challenging. Poor implementation leads to janky animations and degraded user experience. Let's explore performance-optimized approaches.

The Performance Problem

Re-rendering large lists with animations can cause:

• Layout thrashing
• Forced reflows
• Dropped frames
• Poor user experience

Solution 1: CSS Transitions

The simplest approach for basic animations:

const List = ({ items }) => (
  <ul className="transition-all duration-300">
    {items.map(item => (
      <li 
        key={item.id}
        className="opacity-0 animate-fade-in"
      >
        {item.name}
      </li>
    ))}
  </ul>
);

Solution 2: Framer Motion

For complex animations:

import { motion, AnimatePresence } from 'framer-motion';

const List = ({ items }) => (
  <AnimatePresence>
    {items.map(item => (
      <motion.li
        key={item.id}
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        exit={{ opacity: 0, y: -20 }}
        transition={{ duration: 0.3 }}
      >
        {item.name}
      </motion.li>
    ))}
  </AnimatePresence>
);

Optimization Tips

1. Use keys properly - Stable keys prevent unnecessary re-renders
2. Virtualize long lists - Use react-window or react-virtual
3. Use CSS transforms - They're GPU-accelerated
4. Avoid layout triggers - Don't change width/height during animation
5. useTransition for updates - React 18's concurrent features help

Conclusion

With the right tools and techniques, you can create smooth, performant list animations that enhance rather than hinder user experience.