What is the purpose of the `dangerouslySetInnerHTML` attribute in React?

You need to render a piece of HTML content coming from a CMS inside a React component. How would you use dangerouslySetInnerHTML to do that, and what steps would you take to ensure it’s safe?

If you forget to wrap the HTML string in an object with __html when using dangerouslySetInnerHTML, what will happen at runtime?

Your team added a new feature that displays user‑generated markdown converted to HTML using dangerouslySetInnerHTML, and you start seeing XSS bugs in production. Walk me through how you would debug and fix the issue.

When integrating a third‑party widget that requires injecting a script tag via dangerouslySetInnerHTML, what trade‑offs do you consider, and how would you mitigate potential security or performance impacts?

We have a large dashboard that renders dozens of rich text blocks using dangerouslySetInnerHTML. How would you design a reusable component that sanitizes input, minimizes re‑renders, and stays performant at scale?

Explain how you would implement a Content Security Policy and a sanitization pipeline to safely use dangerouslySetInnerHTML across multiple micro‑frontends in a monorepo.

Our organization is migrating legacy pages that heavily rely on dangerouslySetInnerHTML to a new component library. What architectural strategy would you propose to phase out the usage while maintaining security guarantees?

How would you set up a cross‑team governance model (lint rules, code reviews, automated tests) to ensure that any new use of dangerouslySetInnerHTML follows strict security standards across the entire product suite?