App() — react Function Reference

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

Function javascript CompilerCore Gating calls 2

Entity Profile

CompilerCore→ Gating→ App() — react Function Reference

Dependency Diagram

graph TD
  46e5a1e3_acd6_ae6f_020f_d6f597e4ddf3["App()"]
  f31ded42_8a32_b4aa_a69a_39adbca4b26a["App.js"]
  46e5a1e3_acd6_ae6f_020f_d6f597e4ddf3 -->|defined in| f31ded42_8a32_b4aa_a69a_39adbca4b26a
  723d4288_7eaf_5117_b346_31c476c36e94["sdkMethod()"]
  46e5a1e3_acd6_ae6f_020f_d6f597e4ddf3 -->|calls| 723d4288_7eaf_5117_b346_31c476c36e94
  a79a77ec_0010_e6e8_2c0e_79c80415d65f["getServerState()"]
  46e5a1e3_acd6_ae6f_020f_d6f597e4ddf3 -->|calls| a79a77ec_0010_e6e8_2c0e_79c80415d65f
  style 46e5a1e3_acd6_ae6f_020f_d6f597e4ddf3 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

fixtures/flight/src/App.js lines 183–252

export default async function App({prerender, noCache}) {
  const res = await fetch('http://localhost:3001/todos');
  const todos = await res.json();
  await sdkMethod('http://localhost:3001/todos');

  console.log('Expand me:', veryDeepObject);

  const dedupedChild = <ServerComponent noCache={noCache} />;
  const message = getServerState();
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>Flight</title>
      </head>
      <body>
        <Container>
          {prerender ? (
            <meta data-testid="prerendered" name="prerendered" content="true" />
          ) : (
            <meta content="when not prerendering we render this meta tag. When prerendering you will expect to see this tag and the one with data-testid=prerendered because we SSR one and hydrate the other" />
          )}
          <h1>{message}</h1>
          <React.Suspense fallback={null}>
            <div data-testid="promise-as-a-child-test">
              Promise as a child hydrates without errors: {promisedText}
            </div>
          </React.Suspense>
          <Counter incrementAction={increment} />
          <Counter2 incrementAction={increment} />
          <Counter3 incrementAction={increment} />
          <ul>
            {todos.map(todo => (
              <li key={todo.id}>{todo.text}</li>
            ))}
          </ul>
          <ShowMore>
            <p>Lorem ipsum</p>
          </ShowMore>
          <Form action={greet} />
          <div>
            <Button action={like}>Like</Button>
          </div>
          <div>
            loaded statically: <Dynamic />
          </div>
          <div>
            <GenerateImage message={message} />
          </div>
          <Client />
          <Note />
          <Foo>{dedupedChild}</Foo>
          <Bar>{Promise.resolve([dedupedChild])}</Bar>
          <Navigate />
          <ClientContext value="from server">
            <div>
              <ClientReadContext />
            </div>
          </ClientContext>
          {prerender ? null : ( // TODO: prerender is broken for large content for some reason.
            <React.Suspense fallback={null}>
              <LargeContent />
            </React.Suspense>
          )}
        </Container>
      </body>
    </html>
  );
}