App() — react Function Reference

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

Function javascript BabelCompiler Entrypoint

Entity Profile

BabelCompiler→ Entrypoint→ App() — react Function Reference

Dependency Diagram

graph TD
  2ae86346_6eed_441c_1d93_3403a66b883f["App()"]
  ffdc97e8_43a8_45ef_17c3_2459ffb053f0["App.js"]
  2ae86346_6eed_441c_1d93_3403a66b883f -->|defined in| ffdc97e8_43a8_45ef_17c3_2459ffb053f0
  style 2ae86346_6eed_441c_1d93_3403a66b883f fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

fixtures/owner-stacks/src/App.js lines 105–141

function App() {
  const [highlight, setHighlight] = useState(false);

  const toggleHighlight = () => {
    console.time('toggleHighlight');
    flushSync(() => {
      setHighlight(!highlight);
    });
    console.timeEnd('toggleHighlight');
  };

  return (
    <div className="App">
      <header className="App-header">Owner Stacks Stress Test</header>
      <div className="page">
        <div className={`content ${highlight ? 'highlight' : ''}`}>
          {loremIpsum
            .trim()
            .split('\n')
            .map((sentence, index) => (
              <TextLine
                key={index}
                sentence={sentence.trim()}
                highlight={highlight}
                lineNumber={index + 1}
              />
            ))}
        </div>
        <div className="sidebar">
          <button onClick={toggleHighlight}>
            {highlight ? 'Remove Highlight' : 'Highlight Content'}
          </button>
        </div>
      </div>
    </div>
  );
}