react/packages/react-dom
Sebastian Markbåge eeabb7312f
Refactor DOM Bindings Completely Off of DOMProperty Meta Programming (#26546)
There are four places we have special cases based off the DOMProperty
config:

1) DEV-only: ReactDOMUnknownPropertyHook warns for passing booleans to
non-boolean attributes. We just need a simple list of all properties
that are affected by that. We could probably move this in under setProp
instead and have it covered by that list.
2) DEV-only: Hydration. This just needs to read the value from an
attribute and compare it to what we'd expect to see if it was rendered
on the client. This could use some simplification/unification of the
code but I decided to just keep it simple and duplicated since code size
isn't an issue.
3) DOMServerFormatConfig pushAttribute: This just maps the special case
to how to emit it as a HTML attribute.
4) ReactDOMComponent setProp: This just maps the special case to how to
emit it as setAttribute or removeAttribute.

Basically we just have to remember to keep pushAttribute and setProp
aligned. There's only one long switch in prod per environment.

This just turns it all to a giant simple switch statement with string
cases. This is in theory the most optimizable since syntactically all
the information for a hash table is there. However, unfortunately we
know that most VMs don't optimize this very well and instead just turn
them into a bunch of ifs. JSC is best. We can minimize the cost by just
moving common attribute to the beginning of the list.

If we shipped this, maybe VMs will get it together to start optimizing
this case but there's a chicken and egg problem here and the game theory
reality is that we probably don't want to regress. Therefore, I intend
to do a follow up after landing this which reintroduces an object
indirection for simple property aliases. That should be enough to make
the remaining cases palatable. I'll also extract the most common
attributes to the beginning or separate ifs.

Ran attribute-behavior fixture and the table is the same.
2023-04-04 11:05:56 -04:00
..
npm Add Edge Server Builds for workerd / edge-light (#26116) 2023-02-07 15:10:01 -05:00
src Refactor DOM Bindings Completely Off of DOMProperty Meta Programming (#26546) 2023-04-04 11:05:56 -04:00
README.md chore: update new docs links for react-dom (#26456) 2023-03-22 12:55:06 +01:00
client.js [Codemod] Update copyright header to Meta (#25315) 2022-10-18 11:19:24 -04:00
index.classic.fb.js Revert "Remove hydrate entry point from www builds" (#26413) 2023-03-16 14:01:20 -04:00
index.experimental.js [Float][Fizz][Fiber] implement preconnect and prefetchDNS float methods (#26237) 2023-02-25 11:04:51 -08:00
index.js Remove unstable_flushControlled (#26397) 2023-03-15 16:13:54 -04:00
index.modern.fb.js Remove unstable_flushControlled (#26397) 2023-03-15 16:13:54 -04:00
index.stable.js [Float][Fizz][Fiber] implement preconnect and prefetchDNS float methods (#26237) 2023-02-25 11:04:51 -08:00
package.json Add missing `"react-dom/server.bun"` entry in package.json `"exports"` (#26402) 2023-03-15 22:09:49 -04:00
server-rendering-stub.js Add preconnect and prefetchDNS to rendering-stub (#26265) 2023-02-28 17:27:16 -05:00
server.browser.js [Codemod] Update copyright header to Meta (#25315) 2022-10-18 11:19:24 -04:00
server.bun.js Add Bun streaming server renderer (#25597) 2022-11-17 13:15:56 -08:00
server.edge.js Add Edge Server Builds for workerd / edge-light (#26116) 2023-02-07 15:10:01 -05:00
server.js [Codemod] Update copyright header to Meta (#25315) 2022-10-18 11:19:24 -04:00
server.node.js [Codemod] Update copyright header to Meta (#25315) 2022-10-18 11:19:24 -04:00
static.browser.js [Codemod] Update copyright header to Meta (#25315) 2022-10-18 11:19:24 -04:00
static.edge.js Add Edge Server Builds for workerd / edge-light (#26116) 2023-02-07 15:10:01 -05:00
static.js [Codemod] Update copyright header to Meta (#25315) 2022-10-18 11:19:24 -04:00
static.node.js [Codemod] Update copyright header to Meta (#25315) 2022-10-18 11:19:24 -04:00
test-utils.js [Codemod] Update copyright header to Meta (#25315) 2022-10-18 11:19:24 -04:00
unstable_server-external-runtime.js [ServerRenderer] Move fizz external runtime implementation to react-dom-bindings (#25617) 2022-11-03 11:15:29 -04:00
unstable_testing.classic.fb.js Remove Reconciler fork (2/2) (#25775) 2022-12-01 23:19:13 -05:00
unstable_testing.experimental.js Remove Reconciler fork (2/2) (#25775) 2022-12-01 23:19:13 -05:00
unstable_testing.js Remove Reconciler fork (2/2) (#25775) 2022-12-01 23:19:13 -05:00
unstable_testing.modern.fb.js Remove Reconciler fork (2/2) (#25775) 2022-12-01 23:19:13 -05:00
unstable_testing.stable.js [Codemod] Update copyright header to Meta (#25315) 2022-10-18 11:19:24 -04:00

README.md

react-dom

This package serves as the entry point to the DOM and server renderers for React. It is intended to be paired with the generic React package, which is shipped as react to npm.

Installation

npm install react react-dom

Usage

In the browser

import { createRoot } from 'react-dom/client';

function App() {
  return <div>Hello World</div>;
}

const root = createRoot(document.getElementById('root'));
root.render(<App />);

On the server

import { renderToPipeableStream } from 'react-dom/server';

function App() {
  return <div>Hello World</div>;
}

function handleRequest(res) {
  // ... in your server handler ...
  const stream = renderToPipeableStream(<App />, {
    onShellReady() {
      res.statusCode = 200;
      res.setHeader('Content-type', 'text/html');
      stream.pipe(res);
    },
    // ...
  });
}

API

react-dom

See https://react.dev/reference/react-dom

react-dom/client

See https://react.dev/reference/react-dom/client

react-dom/server

See https://react.dev/reference/react-dom/server