THE LIBRARY
OF SCROLLS
Tactical mental models for modern React. Master the friction of the digital artifact without losing your mind in the render loop.
React Button Click Does Nothing - Or Fires Before You Click
Two bugs, same family. Either the click handler runs the moment the page loads and never again - or it runs on every click and does the exact same thing every time. Both come down to what you actually wrote inside onClick.
React Derived State Is Always One Step Behind - Stop Using useEffect
You synced one piece of state to another with useEffect, and it works - except it's always exactly one render late. The fix isn't a better effect. It's no effect at all.
React Input Loses Focus on Every Keystroke - The Remount Bug
You click into the field, type one character, and focus jumps out. Click back in, type another character, focus jumps out again. The input isn't losing focus - it's being destroyed and rebuilt, one keystroke at a time.
React Input Not Working - Why You Can't Type Anything
You click into the field. You type. Nothing appears. The input looks frozen - and the reason is that you told React to control it, then never told React what to do when it changes.
React List Item State Jumps to the Wrong Row - The key={index} Bug
You star the first book in the list. Then you add a new book to the top. The star doesn't stay on the book you starred - it jumps to whatever is now sitting in that same position.
React Maximum Update Depth Exceeded - Fixing the Infinite useEffect Loop
Your component renders once, then again, then again, faster and faster, until the tab freezes and the console fills up with the same warning. Somewhere in a useEffect, setState is feeding the render that triggers it.
React.memo Is Not Working - How to Actually Stop Re-renders
memo checks one thing: same reference as last time? Inline objects and functions are never the same reference twice. So memo always says no - and the child always re-renders.