Gotchas

Gotchas

Since .dom is optimized for size and not for performance nor developer friendliness, you should be aware that there are few rough edges.

This document presents some of the well-known issues of the library that are intentionally remain unsolved because:

  1. They are not obstructing the typical application development.
  2. If solved, the library footprint will exceed the 512 bytes.

Component roots cannot change

The component state is preserved on it’s root DOM element. On it’s own turn, this element is indexed by the component’s key.

This means, that once mounted, the component won’t be able to change the type of the root element, since it will be persisted in the cache.

For example:

Y29uc3QgeyBkaXYsIGEgfSA9IEg7CgpmdW5jdGlvbiBDb21wb25lbnQocHJvcHMsIHN0YXRlLCBzZXRTdGF0ZSwgbWV0YSkgewogIGNvbnN0IHJvb3QgPSBzdGF0ZS50b2dnbGUgPyAmIzM0O2VtJiMzNDsgOiAmIzM0O3N0cm9uZyYjMzQ7OwoKICByZXR1cm4gSChyb290LCAKICAgIGEoewogICAgICBocmVmOiAmIzM0O2phdmFzY3JpcHQ6OyYjMzQ7LAogICAgICBvbmNsaWNrKCkgewogICAgICAgIHNldFN0YXRlKHsKICAgICAgICAgIHRvZ2dsZTogIXN0YXRlLnRvZ2dsZQogICAgICAgIH0pCiAgICAgIH0KICAgIH0sIAogICAgc3RhdGUudG9nZ2xlCiAgICAgID8gJiMzNDtTd2l0Y2ggdG8gJmx0O3N0cm9uZyZndDsmIzM0OwogICAgICA6ICYjMzQ7U3dpdGNoIHRvICZsdDtlbSZndDsmIzM0OwogICAgKQogICkKfQoKUigKICBkaXYoCiAgICAmIzM0O1RoZSBjb21wb25lbnQgcm9vdCB3aWxsIGFsd2F5cyBiZSAmbHQ7c3Ryb25nJmd0OyAodXNlIGluc3BlY3QgdG8gdmVyaWZ5KTomIzM0OywKICAgIGRpdigKICAgICAgSChDb21wb25lbnQpCiAgICApCiAgKSwKICBkb2N1bWVudC5ib2R5Cik7
Loading interactive example...

First setState, then propagate

When in the same handler you call setState and also call a handler function that you received as property, make sure to call setState first and then call-out to the handler.

    // First call setState
    setState({ value: newValue });
    // And **then** call-out to handlers
    if (props.onChange) props.onChange();

That’s due to a limitation in the internals of the .dom engine, that could lead into invalid state updates if the parent element updates before the child element!


Previous Topic