Custom Host Node RFC

[sebmarkbage]

This is just an idea and not likely to land any time soon.

Summary

This is an alternative idea to useMutationEffect that was originally part of the hooks RFC but since removed.

Basic example

import {createManualDOMNode} from "react-dom";
let CustomDOMNode = createManualDOMNode(props => {
  // create
  let node = document.createElement('div');
  node.style.color = props.color;
  return node;
}, (props, node) => {
  // update
  node.style.color = props.color;
}, (props, node) => {
  // clean up
});

function Component(props) {
  return <div><CustomDOMNode color={props.color} /></div>;
}

Rendered text

[Andarist]

What about memoization? Or rather firing update callbacks only when inputs has changed? To some extent it can be done inside the update callback itself, but it's hard (impossible?) to store some previous state in order to do the comparison.

[jameswomack]

What about memoization? Or rather firing update callbacks only when inputs has changed? To some extent it can be done inside the update callback itself, but it's hard (impossible?) to store some previous state in order to do the comparison.

@Andarist do you mean "impossible" to do self-contained—or strictly impossible? Is it not possible to use a collection-type instance to memoize in a closure around the result of createManualDOMNode (e.g. due to some arcane detail of the Hooks API)?

[Andarist]

With HOC approach we lose access to the component's closure (unless we do some hoops to create that HOC with useMemo or smth), with hook approach we'd have to store previous values on the ref or node and do custom inputs check in the updater (instead of relaying on the input array and react doing that work for us like when dealing with all the other hooks)

So to sum up - it's possible, just cumbersome

[msand]

You could probably use a weakmap to store state related to the nodes as well, without storing anything on the node/ref

[facebook-github-bot]

Hi @sebmarkbage!

Thank you for your pull request.

We require contributors to sign our Contributor License Agreement, and yours needs attention.

You currently have a record in our system, but the CLA is no longer valid, and will need to be resubmitted.

Process

In order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA.

Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with CLA signed. The tagging process may take up to 1 hour after signing. Please give it that time before contacting us about it.

If you have received this in error or have any questions, please contact us at cla@fb.com. Thanks!

[facebook-github-bot]

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Meta Open Source project. Thanks!