An interactive playground that pits React hooks against each other in epic battles! Watch as useEffect and useLayoutEffect go head-to-head, and discover the real-world differences between React's most misunderstood hooks through live visual comparisons.
Ever wondered what the actual difference is between useEffect and useLayoutEffect? Or struggled to understand when one hook fires versus another? React Hooks Battle Royale brings these concepts to life with side-by-side visual battles that make the abstract concrete.
Each "battle" is an interactive demonstration showing:
- Visual timing differences - See exactly when each hook executes
- Flicker comparisons - Watch how different hooks affect rendering
- Real-time counters - Track render cycles and execution order
- Interactive controls - Trigger re-renders and observe behavior
| Battle | Hook Matchup | What You'll Learn |
|---|---|---|
| Battle 1 | useEffect vs useLayoutEffect |
Timing differences in DOM updates |
| Battle 2 | (Coming soon) | State management patterns |
| Battle 3 | (Coming soon) | Memoization strategies |
| Battle 4 | (Coming soon) | Effect cleanup & dependencies |
| Battle 5 | (Coming soon) | Advanced hook compositions |
- Node.js 18+ or Bun
- npm, yarn, pnpm, or bun
# Clone the repository
git clone <your-repo-url>
cd react-hooks-battle-royale
# Install dependencies
npm install
# or
bun install# Start the dev server with hot reload
npm run dev
# or
bun run devVisit http://localhost:5173 to start battling!
# Create a production build
npm run build
# Preview the production build
npm run preview- React 19 - UI library with the latest features
- Vite - Blazing fast build tool with HMR
- React Router v7 - Client-side routing
- Framer Motion - Smooth animations for battle effects
- Tailwind CSS - Utility-first styling
- Oxlint - Fast JavaScript/TypeScript linter
react-hooks-battle-royale/
├── src/
│ ├── battles/ # Individual hook battle components
│ │ ├── Battle1.jsx # useEffect vs useLayoutEffect
│ │ ├── Battle2.jsx # (More battles coming)
│ │ └── ...
│ ├── components/ # Shared UI components
│ │ ├── Navigation.jsx
│ │ ├── LandingPage.jsx
│ │ └── BattleCard.jsx
│ ├── assets/ # Static assets
│ ├── App.jsx # Main app with routing
│ ├── main.jsx # Entry point
│ └── index.css # Global styles
├── public/ # Public static files
├── package.json
├── vite.config.js
├── tailwind.config.js
└── README.md
- Start the dev server and navigate to the landing page
- Choose a battle from the navigation menu
- Interact with the demo - click buttons, toggle states, watch the magic happen
- Read the explanations to understand what's happening under the hood
- Experiment! Modify the code to see how changes affect behavior
| Command | Description |
|---|---|
npm run dev |
Start development server with HMR |
npm run build |
Build for production |
npm run preview |
Preview production build locally |
npm run lint |
Run Oxlint for code quality checks |
Want to add more battles or improve existing ones? Contributions are welcome!
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-battle) - Commit your changes (
git commit -m 'Add amazing battle') - Push to the branch (
git push origin feature/amazing-battle) - Open a Pull Request
This project is licensed under the MIT License.
- Built with the official Vite React template
- Inspired by developers everywhere who've been confused by hook timing
- Powered by ☕ and React's excellent documentation
Ready to see hooks in action?
npm run dev and let the battles begin! ⚔️