render() — react Function Reference

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

Function javascript BabelCompiler Optimization

Entity Profile

BabelCompiler→ Optimization→ render() — react Function Reference

Dependency Diagram

graph TD
  61907123_06a7_a3fc_5b5b_c57204c2809e["render()"]
  da0e9089_1e9e_0728_86ae_6672c71000c6["render.js"]
  61907123_06a7_a3fc_5b5b_c57204c2809e -->|defined in| da0e9089_1e9e_0728_86ae_6672c71000c6
  style 61907123_06a7_a3fc_5b5b_c57204c2809e fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

fixtures/ssr/server/render.js lines 47–78

export default function render(url, res) {
  res.socket.on('error', error => {
    // Log fatal errors
    console.error('Fatal', error);
  });
  let didError = false;
  const {pipe, abort} = renderToPipeableStream(<App assets={assets} />, {
    bootstrapScripts: [assets['main.js']],
    progressiveChunkSize: 1024,
    onShellReady() {
      // If something errored before we started streaming, we set the error code appropriately.
      res.statusCode = didError ? 500 : 200;
      res.setHeader('Content-type', 'text/html');
      // To test the actual chunks taking time to load over the network, we throttle
      // the stream a bit.
      const throttledResponse = new ThrottledWritable(res);
      pipe(throttledResponse);
    },
    onShellError(x) {
      // Something errored before we could complete the shell so we emit an alternative shell.
      res.statusCode = 500;
      res.send('<!doctype><p>Error</p>');
    },
    onError(x) {
      didError = true;
      console.error(x);
    },
  });
  // Abandon and switch to client rendering after 5 seconds.
  // Try lowering this to see the client recover.
  setTimeout(abort, 5000);
}