Fast Refresh Debug Page
Fast Refresh Stats:
Successful refreshes: 0
Full reloads required: 0
1. Basic State Test
Counter: 0
This tests basic state updates. If Fast Refresh works, the counter should persist between code edits.
2. Input State Test
Text you type here should persist between code edits if Fast Refresh is working.
3. useEffect Test
Test Component: 0
This tests if useEffect hooks are handling cleanup properly. Check browser console for logs.
4. Error Boundary Test
No errors yet. Click the button to test error handling.
5. Bad Pattern Example
This demonstrates a pattern that breaks Fast Refresh:
This component is defined inside render which is bad for Fast Refresh! It will be recreated on every render and won't maintain state.
Check console for warnings. Components defined inside render functions cause Fast Refresh to perform full reloads.
Usage Instructions:
- Interact with the components above (click buttons, type text)
- Open your code editor and make a small change to this file
- Save the file and watch how the app refreshes
- If state persists, Fast Refresh is working
- If the whole page reloads or errors appear, there's an issue
- Check the browser console (F12) for error messages