Review performance impact vs react-from-markup

[chrisvxd]

#3, #4 and #6 introduce various changes that are likely to impact performance.

Should review:

1. Injection of container node for each rehydration
2. Building of compound selector string (for loop)
3. Querying root by compound selector string instead of data attributes
4. Looping through each rehydrating component to find relevant rehydrator (find)
5. Use of .matches(options.compoundSelector) instead of .hasAttribute

Rather than reviewing each item, it might be worth smoke testing react-from-html and react-from-markup to get an "ops / second (higher is better)" type comparison.

[chrisvxd]

Time to process 10,000 rehydrations:

• react-from-markup: 853ms
• react-from-html: 1,453ms

Just ran it as a test in jest:

  it("Performance", async () => {
    const componentName: string = "myComponent";

    const rehydrator = async () => {
      return React.createElement("span", {}, "rehydrated component");
    };

    const rehydrators = { [componentName]: rehydrator };

    const fn = async () => {
      const documentElement = document.createElement("div");

      documentElement.innerHTML = `<div data-rehydratable="${componentName}"></div>`;

      await reactFromMarkupContainer(documentElement, rehydrators, {
        extra: {},
      });
    };

    const iterations = 10000;
    console.time("Function #1");
    for (let i = 0; i < iterations; i++) {
      fn();
    }
    console.timeEnd("Function #1");
  });

[chrisvxd]

Re-test using variation of above jest snippet.