render() — react Function Reference

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

Function javascript BabelCompiler Entrypoint calls 1 called by 1

Entity Profile

BabelCompiler→ Entrypoint→ render() — react Function Reference

Dependency Diagram

graph TD
  6e024402_fbab_bcad_3b7f_7b23d116a5f0["render()"]
  72f84b20_1f9e_8954_9445_3d634de54f95["App"]
  6e024402_fbab_bcad_3b7f_7b23d116a5f0 -->|defined in| 72f84b20_1f9e_8954_9445_3d634de54f95
  717f296c_5c0e_d70a_b7a0_36f42d94b93a["runCode()"]
  717f296c_5c0e_d70a_b7a0_36f42d94b93a -->|calls| 6e024402_fbab_bcad_3b7f_7b23d116a5f0
  9d9f9693_6dff_dbe3_a8ab_701fe98fd40c["render()"]
  6e024402_fbab_bcad_3b7f_7b23d116a5f0 -->|calls| 9d9f9693_6dff_dbe3_a8ab_701fe98fd40c
  style 6e024402_fbab_bcad_3b7f_7b23d116a5f0 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

fixtures/fiber-debugger/src/App.js lines 147–257

  render() {
    const {history, currentStep, isEditing, code} = this.state;
    if (isEditing) {
      return <Editor code={code} onClose={this.handleCloseEdit} />;
    }

    const {fibers, action, stage} = history[currentStep] || {};
    let friendlyAction;
    if (fibers) {
      let wipFiber = fibers.descriptions[fibers.workInProgressID];
      let friendlyFiber = wipFiber.type || wipFiber.tag + ' #' + wipFiber.id;
      friendlyAction = `After ${action} on ${friendlyFiber}`;
    }

    return (
      <div style={{height: '100%'}}>
        {fibers && (
          <Draggable>
            <Fibers
              fibers={fibers}
              show={this.state.show}
              graphSettings={this.state.graphSettings}
            />
          </Draggable>
        )}
        <div
          style={{
            width: '100%',
            textAlign: 'center',
            position: 'fixed',
            bottom: 0,
            padding: 10,
            zIndex: 1,
            backgroundColor: '#fafafa',
            border: '1px solid #ccc',
          }}>
          <div style={{width: '50%', float: 'left'}}>
            <input
              type="range"
              style={{width: '25%'}}
              min={0}
              max={history.length - 1}
              value={currentStep}
              onChange={e =>
                this.setState({currentStep: Number(e.target.value)})
              }
            />
            <p>
              Step {currentStep}: {friendlyAction} (
              <a style={{color: 'gray'}} onClick={this.handleEdit} href="#">
                Edit
              </a>
              )
            </p>
            {stage && <p>Stage: {stage}</p>}
            {Object.keys(this.state.show).map(key => (
              <label style={{marginRight: '10px'}} key={key}>
                <input
                  type="checkbox"
                  checked={this.state.show[key]}
                  onChange={e => {
                    this.setState(({show}) => ({
                      show: {...show, [key]: !show[key]},
                    }));
                  }}
                />
                {key}
              </label>
            ))}
          </div>
          <div style={{width: '50%', float: 'right'}}>
            <h5>Graph Settings</h5>
            <p>
              <label style={{display: ''}}>
                Direction:
                <select
                  onChange={e => {
                    const rankdir = e.target.value;
                    this.setState(({graphSettings}) => ({
                      graphSettings: {...graphSettings, rankdir},
                    }));