Hooks Folder Conventions & Test Co-location
Create a simple hooks convention (prefix use*, keep pure logic), place hooks in feature folders, and keep tests next to the units they verify.
Hooks Folder Conventions & Test Co-location is a free React Academy lesson on CoddyKit — lesson 2 of 3. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Academy learning path, one of 3 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Why hooks conventions?
Goal: Keep hooks tidy and testable.
- Prefixes: use*
- Pure logic inside hooks; UI outside
- Co-locate tests near units
Folder layout idea
- features/counter/useCounter.js
- features/counter/CounterPanel.jsx
- features/counter/useCounter.test.jsx
- ui/Button.jsx
Hook pattern: useCounter
Hooks return state + actions; keep the API small and predictable.
<div id="root"></div>Hook pattern: useToggle reuse
Small hooks are easy to reuse. Two components share the same useToggle behavior.
<div id="root"></div>Simulated test: useCounter
Keep a small test file next to the hook (e.g., useCounter.test.jsx). Here we simulate assertions.
<div id="root"></div>Tips & checklist
- Name hooks with use*
- Keep hooks pure (no DOM) and return a tiny API
- Co-locate tests next to hooks/components
Co-location basics check
Recap
Recap: Put small, pure hooks in feature folders, return simple APIs, and store tests right beside the units so they travel together during refactors.
Frequently asked questions
Is the “Hooks Folder Conventions & Test Co-location” lesson free?
Yes — the full text of “Hooks Folder Conventions & Test Co-location” is free to read here on the web, and the React Academy course includes 3 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Academy course, upgrade to CoddyKit PRO.
What will I learn in “Hooks Folder Conventions & Test Co-location”?
Create a simple hooks convention (prefix use*, keep pure logic), place hooks in feature folders, and keep tests next to the units they verify. You practise React Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start React Academy?
No prior experience is required. React Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 3, so you can start here or from the beginning and move at your own pace.
How long does the “Hooks Folder Conventions & Test Co-location” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this React Academy lesson?
Yes. Every React Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Feature Folders & UI vs Composite Components
- Hooks Folder Conventions & Test Co-location
- Refactoring Guidelines