If you've tried to learn React before, you've probably gone through the usual path: read the docs, watch a tutorial, maybe build a todo app. But when it comes to using hooks like useCallback, useDeferredValue, or useTransition in a real project, things start to feel unclear. That's exactly why I built React Dojo.
What is React Dojo?
React Dojo is a free, open-source learning platform built on one principle:
React is learned by practicing, not by reading.
Every concept on the platform comes with three things:
A clear, concise explanation
An interactive playground where you can run and modify code
Real coding exercises to test your understanding
No hand-holding. No shortcuts. Just you and the code.
→ react-dojo.vercel.app
What's covered?
React Dojo currently includes 27 concepts, 15 exercises, and 10 quizzes, organized into 6 categories:
🧠 State & Memory
useState · useReducer · useRef · useOptimistic · useActionState
🔄 Synchronization
useEffect · useLayoutEffect · useEffectEvent
⚡ Performance
useMemo · useCallback · memo
🌀 Concurrency
useTransition · useDeferredValue · Suspense · use
🧩 Composition
useContext · createPortal · lazy · useId · useFormStatus
🎯 Interviews
Classic React interview topics: Virtual DOM, HOC, Prop Drilling, Controlled vs Uncontrolled components, and more.
Exercises
Exercises range from basic to advanced:
Basic: Counter, Toggle, Color Picker, Stopwatch
Intermediate: Theme Switcher, Form Validation, Infinite Scroll
Advanced: Debounced Search, Drag & Drop, Lazy Modal
Each exercise is designed to push you to apply what you've learned — not just copy and paste.
Quizzes
Quizzes are organized by difficulty (Basic, Intermediate, Advanced) and cover topics like:
- React Hooks
- Performance Patterns
- Context API
- Component Lifecycle
Custom Hooks [Beta]
One of the most valuable sections is the Custom Hooks library — 15 community-contributed, reusable hooks organized by category. Each one includes a description, code, and an interactive playground.
State: useLocalStorage · usePrevious · useToggle · useCounter
DOM: useMediaQuery · useClickOutside · useWindowSize · useHover · useEventListener · useIntersectionObserver · useOnlineStatus
Async: useFetch
Utility: useDebounce · useClipboard · useInterval
You can copy the code directly, try it in the playground, and use it in your own projects. It's also open to contributions if you've built a useful hook, you can add it to the library.
Developer Directory [Beta]
One of the latest features is the Developer Directory — sign in with GitHub and join a community of React learners. You can:
- Track your learning progress
- Compare with other developers
- Earn KYU ranks as you advance
Platform Features
⌨️ Keyboard shortcuts for fast navigation
🌐 Bilingual — available in English and Spanish
📱 Mobile-friendly — 42% of our users access from mobile
🔍 Global search across all concepts and exercises
🌙 Dark mode by default
Built with
The platform is built with Next.js, TypeScript, Drizzle ORM, Neon (PostgreSQL), and Shadcn UI.
Open Source & Community
React Dojo is fully open source. The community is active and growing, with contributors from Uruguay 🇺🇾, Argentina 🇦🇷, the US 🇺🇸, Colombia 🇨🇴, and Spain 🇪🇸. If you want to contribute whether it's a new concept, an exercise, a quiz, a bug fix, or a translation — you're more than welcome.
Top comments (0)