Drills Repository
413 Drills · All Belts
Effects On The Performance Track
To reduce profiling overhead and visual clutter, React omits effects shorter than roughly 0.05ms unless they triggered updates. This filtering keeps the performance track focused on effects that meaningfully impact render timing.
Finding Rendering Performance Problems In DevTools
React Developer Tools' Profiler panel is purpose-built to measure rendering behavior, surfacing slow renders, wasted renders, and how long each component took to update. Profiler is therefore the panel built for exactly this job, tracking component render timing rather than logs, network activity, or component structure.
React Native DevTools Feature Set
React Native DevTools deeply integrates React Developer Tools functionality, including component inspection, element highlighting, and selection behavior similar to web tooling. Developers get the same component tree inspection, element highlighting, and selection workflow they already use when profiling React on the web.
useMemo Without a Dependency Array
Without a dependency array, React has no conditions for reusing the cached value, so the calculation runs on every render. This defeats the purpose of memoization entirely, since the cached value is never reused.
Hook naming and lint behavior
React's Rules of Hooks rely on the "use" naming convention to identify valid Hook call locations, since the linter treats any function starting with "use" as a Hook. Renaming the function removes that signal, so calls inside it are flagged as invalid Hook usage.
Hooks inside event handlers
Hooks are tied to React's render cycle and must execute while React is actively rendering a function component or custom Hook. Event handlers run later in response to user interaction, outside the render process, so React cannot correctly track Hook state there.
Custom Hooks calling Hooks
Custom Hooks work because they remain part of React's rendering flow and must obey the same Rules of Hooks as components. React does not grant them special behavior based on compilation or naming alone; the "use" prefix is simply a linter convention.
useState inside Server Components
Server Components run exclusively on the server and are never shipped to the browser, so they cannot use interactive APIs like useState. Interactivity must be delegated to a Client Component marked with the "use client" directive.
'use client' Directive in a Component File
The "use client" directive must appear at the very top of a file, before any imports or executable code. React and compatible bundlers treat it as a special build-time directive rather than an ordinary string literal.
Multiple renders on the same root
Calling root.render repeatedly on the same root does not necessarily rebuild the entire tree from scratch. React reconciles the new tree against the previous one, preserving matching DOM nodes and component state wherever possible.
Reusing an unmounted root
Calling root.unmount() permanently detaches that root, so it can never be reused for rendering again. A completely new root must be created with createRoot before rendering into that DOM node another time.
useRef vs useState for interval IDs
Values that must persist across renders without influencing what gets displayed belong in a ref, since updating a ref does not schedule a re-render the way updating state does. Storing the interval ID in a ref lets the Stop handler call clearInterval with the correct ID on every render, without triggering any extra renders along the way.