#react 22 articles
behavior: 'smooth' is silently ignored inside a portaled overlay gotchas / spfx Jump-to-section does nothing in a modal/reader; drop the flag and set scrollTop directly Promise.all discards the soft reads it was waiting for — one failing main read leaves every picker loading forever gotchas / spfx A failing main read rejects the batch and the soft reads' results and failure flags never reach the pickers; settle each read on its own speechSynthesis.cancel() does not stop chunked reading — it queues the next chunk gotchas / spfx The utterance chain re-queues itself from onend; epoch counter bumped BEFORE cancel(), and no onEnd from a superseded chain stopPropagation in onClick does not stop the keyboard — a clickable row swallows Enter and Space of the buttons inside it gotchas / spfx A clickable row with onKeyDown also receives the Enter/Space of its inner buttons and checkboxes, so their action is cancelled (or runs twice) and the detail opens; react only when e.target === e.currentTarget window.scrollTo does nothing in an SPFx web part on a modern page gotchas / spfx The page scrolls inside a canvas element, not the window; switching views in a single-page web part leaves the user mid-page. Find the real scrolling ancestor and reset that A component from a linked package throws "Invalid hook call" in Jest — the test loaded a second copy of React gotchas / tooling Jest resolves a file:/junction package by its real path, so the package's require('react') finds a second copy; map react and react-dom to the app's copy (the SPFx build is unaffected — React is a platform component) A conditional spread hides a phantom column until SharePoint returns 400 gotchas / spfx ...(cond ? {…} : {}) bypasses the excess-property check, so a field the list doesn't have reaches the POST and 400s; two scripted sweeps find the rest A parser branch whose entry condition accepts more than its collector loop consumes will freeze the tab gotchas / spfx A branch that accepts 1) but collects only 1. spins forever on one line until out-of-memory; one shared regex, a no-progress contract and an outer backstop, each sufficient alone A shared component that avoided positioning assumptions still carried a width assumption gotchas / spfx @media never sees the narrow panel you were reused in; measure the element with ResizeObserver and switch every child together A shared component's var() fallback chain is only as good as its last link gotchas / spfx Shared UI package falls through to sans-serif in apps that never publish CSS custom properties; runtime-only, no build catches it A textarea jumps after you change its text from code and restore the selection gotchas / spfx focus() scrolls the page to the element and, in Chromium, setSelectionRange scrolls the textarea to the end of the selection; restore the selection with focus({ preventScroll }) and put scrollTop back A theme override on your app root can't reach tokens declared on :root gotchas / spfx The accent inherits, everything derived from it doesn't; substitution happens where the token is declared, portals miss the override entirely, and a colour written as a literal hex is unreachable either way An auto-save effect computed from async-loaded inputs writes garbage on mount — gate it on a loaded flag gotchas / spfx Computed-from-async auto-save fires on mount with empty inputs and persists garbage; gate on a loaded flag Minified React error #310 (and friends) — the SPFx debugging cheatsheet gotchas / spfx #310/#300/#321/#31/#185 decoded for SPFx debugging pdf.js: "Cannot use the same canvas during multiple render() operations" on resize gotchas / spfx A React effect that re-renders a PDF page on every resize starts a second render() before the first finishes; cancel the running task in cleanup and chain renders so they never overlap Portaled overlays sit outside your CSS reset — hello, phantom scrollbar gotchas / spfx Portal to body escapes the scoped reset; content-box fields overflow and grow a scrollbar position:fixed dropdowns go off-screen inside animated panels — the CSS transform trap gotchas / spfx The CSS transform containing-block trap; portal to document.body Printing from a web part gives a blank page when the print CSS hides body > * and the print layer lives inside the web part gotchas / spfx One way to print a report from an SPFx web part is to hide everything in print (body > * { display: none }, so the SharePoint suite bar, navigation and footer stay out) and show only a dedicated print layer. If that… rules-of-hooks false-positive — a complex JSX && chain flags the wrong hook gotchas / spfx A complex conditional in your render blames the wrong hook; extract it to a const. Second trigger: sheer component size — there extracting conditions doesn't help, splitting the component does. Third trigger: the… SharePoint's SPA router hijacks anchor clicks — onClick never fires gotchas / spfx navigates before React onClick runs; use buttons for in-app actions Stored XSS via SharePoint list content — React won't save you gotchas / security React doesn't block javascript: hrefs; allowlist safeHref with C0-strip at every sink Typographic quotes in JSX attributes break the parser (TS1003) gotchas / spfx Typographic quotes in attributes = TS1003; wrap as {'…'}