ObserveTextOnlyWarning() — react Function Reference

Architecture documentation for the ObserveTextOnlyWarning() function in TextNodesCase.js from the react codebase.

Function javascript BabelCompiler Entrypoint

Entity Profile

BabelCompiler→ Entrypoint→ ObserveTextOnlyWarning() — react Function Reference

Dependency Diagram

graph TD
  70edb9f4_61ec_c229_6b3e_75e4108070e7["ObserveTextOnlyWarning()"]
  f361f511_643d_fef8_84d3_4e38e9129616["TextNodesCase.js"]
  70edb9f4_61ec_c229_6b3e_75e4108070e7 -->|defined in| f361f511_643d_fef8_84d3_4e38e9129616
  style 70edb9f4_61ec_c229_6b3e_75e4108070e7 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

fixtures/dom/src/components/fixtures/fragment-refs/TextNodesCase.js lines 270–313

function ObserveTextOnlyWarning() {
  const fragmentRef = useRef(null);
  const [message, setMessage] = useState('');

  const tryObserve = () => {
    setMessage('Called observeUsing() - check console for warning');
    const observer = new IntersectionObserver(() => {});
    fragmentRef.current.observeUsing(observer);
  };

  return (
    <TestCase title="observeUsing - Text Only Warning">
      <TestCase.Steps>
        <li>Open the browser console</li>
        <li>Click the observeUsing button</li>
      </TestCase.Steps>
      <TestCase.ExpectedResult>
        A warning should appear in the console because IntersectionObserver
        cannot observe text nodes. The warning message should indicate that
        observeUsing() was called on a FragmentInstance with only text children.
      </TestCase.ExpectedResult>
      <Fixture>
        <Fixture.Controls>
          <button onClick={tryObserve}>
            observeUsing(IntersectionObserver)
          </button>
          {message && (
            <div style={{marginTop: '10px', color: 'orange'}}>{message}</div>
          )}
        </Fixture.Controls>
        <div
          style={{
            padding: '20px',
            backgroundColor: '#fff0f0',
            border: '1px solid #fcc',
          }}>
          <Fragment ref={fragmentRef}>
            This fragment contains only text. Text nodes cannot be observed.
          </Fragment>
        </div>
      </Fixture>
    </TestCase>
  );
}