render() — react Function Reference

Architecture documentation for the render() function in index.js from the react codebase.

Function javascript BabelCompiler Optimization calls 1

Entity Profile

BabelCompiler→ Optimization→ render() — react Function Reference

Dependency Diagram

graph TD
  3046f26d_ce04_8fae_41aa_a44766d5a1b4["render()"]
  12df9732_87ba_98e4_95e0_1c5d6b17d94b["TextInputFixtures"]
  3046f26d_ce04_8fae_41aa_a44766d5a1b4 -->|defined in| 12df9732_87ba_98e4_95e0_1c5d6b17d94b
  0a7f3ff6_eb00_3efc_0b36_1b443da3b09e["render()"]
  3046f26d_ce04_8fae_41aa_a44766d5a1b4 -->|calls| 0a7f3ff6_eb00_3efc_0b36_1b443da3b09e
  style 3046f26d_ce04_8fae_41aa_a44766d5a1b4 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

fixtures/dom/src/components/fixtures/suspense/index.js lines 110–320

  render() {
    return (
      <FixtureSet
        title="Suspense"
        description="Preserving the state of timed-out children">
        <p>
          Clicking "Hide" will hide the fixture context using{' '}
          <code>display: none</code> for 0.5 seconds, then restore. This is the
          built-in behavior for timed-out children. Each fixture tests whether
          the state of the DOM is preserved. Clicking "Remove" will remove the
          fixture content from the DOM for 0.5 seconds, then restore. This is{' '}
          <strong>not</strong> how timed-out children are hidden, but is
          included for comparison purposes.
        </p>
        <div className="footnote">
          As a shortcut, you can use Command + Enter (or Control + Enter on
          Windows, Linux) to "Hide" all the fixtures, or Command + / to "Remove"
          them.
        </div>
        <TestCase title="Text selection where entire range times out">
          <TestCase.Steps>
            <li>Use your cursor to select the text below.</li>
            <li>Click "Hide" or "Remove".</li>
          </TestCase.Steps>

          <TestCase.ExpectedResult>
            Text selection is preserved when hiding, but not when removing.
          </TestCase.ExpectedResult>

          <Fixture>
            <SuspendyTree>
              Select this entire sentence (and only this sentence).
            </SuspendyTree>
          </Fixture>
        </TestCase>
        <TestCase title="Text selection that extends outside timed-out subtree">
          <TestCase.Steps>
            <li>
              Use your cursor to select a range that includes both the text and
              the "Go" button.
            </li>
            <li>Click "Hide" or "Remove".</li>
          </TestCase.Steps>

          <TestCase.ExpectedResult>
            Text selection is preserved when hiding, but not when removing.
          </TestCase.ExpectedResult>

          <Fixture>
            <SuspendyTree>
              Select a range that includes both this sentence and the "Go"
              button.
            </SuspendyTree>
          </Fixture>
        </TestCase>
        <TestCase title="Focus">
          <TestCase.Steps>
            <li>
              Use your cursor to select a range that includes both the text and
              the "Go" button.
            </li>
            <li>
              Instead of clicking "Go", which switches focus, press Command +
              Enter (or Control + Enter on Windows, Linux).
            </li>
          </TestCase.Steps>

          <TestCase.ExpectedResult>
            The ideal behavior is that the focus would not be lost, but
            currently it is (both when hiding and removing).
          </TestCase.ExpectedResult>

          <Fixture>
            <SuspendyTree>
              <button>Focus me</button>
            </SuspendyTree>
          </Fixture>
        </TestCase>
        <TestCase title="Uncontrolled form input">
          <TestCase.Steps>
            <li>Type something ("Hello") into the text input.</li>