Use of FindDOMNode and Refs¶

Scope and migration¶

React 19 removed ReactDOM.findDOMNode; older applications should migrate to explicit DOM refs where imperative access is necessary. Refs themselves are supported APIs, not security vulnerabilities. The security question is what code does with the referenced element, particularly whether it inserts untrusted HTML. See the React 19 migration guide.

Prefer declarative text output¶

Assume message is an untrusted string that should appear as plain text. This example replaces the underlying unsafe output pattern rather than merely changing how the element is found.

Unsafe: assert that the string is trusted HTML.

function Message({ message }) {
  return <p dangerouslySetInnerHTML={{ __html: message }} />;
}

Safer: render the string as an ordinary React child.

function Message({ message }) {
  return <p>{message}</p>;
}

React renders string children as text. Do not subsequently replace that node's contents through innerHTML. If rich HTML is required, review sanitization and the actual trust boundary; moving the same string into a ref mutation does not solve injection.

Refs remain appropriate for focus, scrolling and integration with an imperative widget. Attach a useRef value directly to the intended DOM element and access it after React has committed the element, such as from an event handler. Keep state-driven content in rendering rather than arbitrary DOM mutation. See useRef and React's HTML insertion warning.

Regression check¶

Render <em>sample</em> as a message and verify it appears literally without an em descendant. Test keyboard focus and scrolling after any ref migration, including unmounted elements. See HTML injection and JavaScript guidance.