dangerouslySetInnerHTML Risks

React escapes text content by default — {user.name} will not become a live <script>. dangerouslySetInnerHTML opts out and injects raw HTML. The name is the warning.

Docs: dangerouslySetInnerHTML, XSS — OWASP.

The API

function ArticleBody({ html }) {
  return <div dangerouslySetInnerHTML={{ __html: html }} />;
}

Note the shape: prop value is { __html: string }, not a bare string.

What goes wrong

If html includes attacker-controlled markup:

<img src=x onerror="steal(document.cookie)">

you execute attacker script in your origin. Stored XSS in CMS fields, markdown renderers without sanitization, and “preview” panes are classic sources.

Safer paths

Need	Prefer
User text	{text} normal children
Markdown	Trusted pipeline + sanitizer (e.g. DOMPurify) server-side
Syntax highlight	Library that emits React elements
Rich CMS	Sanitize on save and on render; CSP as defense in depth

import DOMPurify from 'dompurify';

function SafeHtml({ html }) {
  const clean = DOMPurify.sanitize(html, { USE_PROFILES: { html: true } });
  return <div dangerouslySetInnerHTML={{ __html: clean }} />;
}

Sanitize on the server when you can so clients do not become the only gate. Still set a strong Content-Security-Policy if available in your stack.

SSR and hydration

Server and client must produce the same HTML string. Sanitizer config differences between environments cause hydration mismatches or security gaps.

Interview out-loud

“dangerouslySetInnerHTML injects raw HTML and bypasses React’s escaping, so untrusted strings are XSS. I avoid it for user content, sanitize when HTML is required, prefer element-based renderers, and combine with CSP. The prop shape is {{ __html }}.”

Related on this site

• Hydration Mismatches
• JSX Under the Hood
• Security overview topics
• Testing React Components

Further reading

• dangerouslySetInnerHTML — react.dev
• OWASP XSS

Edge cases worth rehearsing

Interviewers and production incidents cluster around the same edges: first render versus update, empty and loading states, Strict Mode double setup, concurrent interruptions, and what happens when identity (key, route params, user id) changes mid-edit. Walk one concrete user journey end-to-end — open, edit, navigate away, come back — and say which state survives.

Prefer fixing data flow and ownership before reaching for memoization or micro-optimizations. Prefer event handlers over effects when a user action is the trigger. Prefer deriving values during render over mirroring props into state. Prefer stable list keys from business ids. Measure with the profiler when performance is the claim.

When you cite an API, mention one failure mode: abort on unmount, serializable props across server/client boundaries, focus restoration for dialogs, or cache invalidation after a mutation. Specific beats generic every time.

Edge cases worth rehearsing

Interviewers and production incidents cluster around the same edges: first render versus update, empty and loading states, Strict Mode double setup, concurrent interruptions, and what happens when identity (key, route params, user id) changes mid-edit. Walk one concrete user journey end-to-end — open, edit, navigate away, come back — and say which state survives.

Prefer fixing data flow and ownership before reaching for memoization or micro-optimizations. Prefer event handlers over effects when a user action is the trigger. Prefer deriving values during render over mirroring props into state. Prefer stable list keys from business ids. Measure with the profiler when performance is the claim.

When you cite an API, mention one failure mode: abort on unmount, serializable props across server/client boundaries, focus restoration for dialogs, or cache invalidation after a mutation. Specific beats generic every time.

Related guides

• useCopyToClipboard HookCopy text with navigator.clipboard, fallback execCommand, transient copied state, and permissions that fail in insecure contexts.
• useDebouncedValue HookDebounce a changing value in React without firing effects on every keystroke. Cleanup, leading vs trailing, and the stale timer that updates unmounted state.
• useEventListener HookAttach a window, document, or element listener with a stable handler ref so you do not rebind on every render. Capture option and target changes.
• useFetch With AbortControllerFetch in an effect with a signal, ignore aborted errors, and prevent the slow response from winning a race after the url changes.
• useIdle HookDetect idle users: reset a timer on input events, fire idle after timeout, and decide whether mount starts the timer immediately.