chore(render): memoize create styles

src/components/hv-date-field/field/index.tsx

@@ -1,5 +1,5 @@
 import * as Contexts from 'hyperview/src/contexts';
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { StyleSheet, TouchableWithoutFeedback, View } from 'react-native';
 import { createProps, createStyleProp } from 'hyperview/src/services';
 import FieldLabel from '../field-label';
@@ -22,13 +22,17 @@ export default (props: Props) => {
     styleAttr: 'field-style',
   });
 
-  const labelStyle: StyleSheetType = StyleSheet.flatten(
-    createStyleProp(props.element, props.stylesheets, {
-      ...props.options,
-      focused: props.focused,
-      pressed,
-      styleAttr: 'field-text-style',
-    }),
+  const labelStyle: StyleSheetType = useMemo(
+    () =>
+      StyleSheet.flatten(
+        createStyleProp(props.element, props.stylesheets, {
+          ...props.options,
+          focused: props.focused,
+          pressed,
+          styleAttr: 'field-text-style',
+        }),
+      ),
+    [props.element, props.stylesheets, props.options, props.focused, pressed],
   );
 
   return (

src/components/hv-list/index.tsx

@@ -3,7 +3,6 @@ import * as Dom from 'hyperview/src/services/dom';
 import * as Keyboard from 'hyperview/src/services/keyboard';
 import * as Logging from 'hyperview/src/services/logging';
 import * as Namespaces from 'hyperview/src/services/namespaces';
-import * as Render from 'hyperview/src/services/render';
 import type {
   DOMString,
   HvComponentOnUpdate,
@@ -20,6 +19,7 @@ import { createTestProps, getAncestorByTagName } from 'hyperview/src/services';
 import { DOMParser } from '@instawork/xmldom';
 import type { ElementRef } from 'react';
 import { FlatList } from 'hyperview/src/core/components/scroll';
+import HvElement from 'hyperview/src/core/components/hv-element';
 import { LOCAL_NAME } from 'hyperview/src/types';
 
 export default class HvList extends PureComponent<HvComponentProps, State> {
@@ -265,12 +265,13 @@ export default class HvList extends PureComponent<HvComponentProps, State> {
               removeClippedSubviews={false}
               // eslint-disable-next-line @typescript-eslint/no-explicit-any
               renderItem={({ item }: any) =>
-                item &&
-                Render.renderElement(
-                  item,
-                  this.props.stylesheets,
-                  this.onUpdate,
-                  this.props.options,
+                item && (
+                  <HvElement
+                    element={item as Element}
+                    onUpdate={this.onUpdate}
+                    options={this.props.options}
+                    stylesheets={this.props.stylesheets}
+                  />
                 )
               }
               scrollIndicatorInsets={scrollIndicatorInsets}

src/components/hv-option/index.ts → src/components/hv-option/index.tsx

@@ -1,12 +1,9 @@
 import * as Behaviors from 'hyperview/src/services/behaviors';
 import * as Namespaces from 'hyperview/src/services/namespaces';
 import * as Render from 'hyperview/src/services/render';
-import type {
-  HvComponentOnUpdate,
-  HvComponentProps,
-} from 'hyperview/src/types';
 import React, { PureComponent } from 'react';
 import { TouchableWithoutFeedback, View } from 'react-native';
+import type { HvComponentProps } from 'hyperview/src/types';
 import { LOCAL_NAME } from 'hyperview/src/types';
 import type { State } from './types';
 import { createEventHandler } from 'hyperview/src/core/hyper-ref';
@@ -82,17 +79,18 @@ export default class HvOption extends PureComponent<HvComponentProps, State> {
       outerProps.style = { flex: props.style.flex };
     }
 
+    // TODO: Replace with <HvChildren>
     return React.createElement(
       TouchableWithoutFeedback,
       outerProps,
       React.createElement(
         View,
         props,
-        ...Render.renderChildren(
+        ...Render.buildChildArray(
           this.props.element,
-          this.props.stylesheets,
-          this.props.onUpdate as HvComponentOnUpdate,
+          this.props.onUpdate,
           newOptions,
+          this.props.stylesheets,
         ),
       ),
     );

src/components/hv-picker-field/field-label/index.tsx

@@ -1,7 +1,7 @@
 import * as FontScale from 'hyperview/src/services/font-scale';
+import React, { useMemo } from 'react';
 import { StyleSheet, Text } from 'react-native';
 import type { Props } from './types';
-import React from 'react';
 import type { StyleSheet as StyleSheetType } from 'hyperview/src/types';
 import { createStyleProp } from 'hyperview/src/services';
 
@@ -14,13 +14,23 @@ export default (props: Props) => {
   const placeholderTextColor = props.element.getAttribute(
     'placeholderTextColor',
   );
-  const style: StyleSheetType = StyleSheet.flatten(
-    createStyleProp(props.element, props.stylesheets, {
-      ...props.options,
-      focused: props.focused,
-      pressed: props.pressed,
-      styleAttr: 'field-text-style',
-    }),
+  const style: StyleSheetType = useMemo(
+    () =>
+      StyleSheet.flatten(
+        createStyleProp(props.element, props.stylesheets, {
+          ...props.options,
+          focused: props.focused,
+          pressed: props.pressed,
+          styleAttr: 'field-text-style',
+        }),
+      ),
+    [
+      props.element,
+      props.stylesheets,
+      props.options,
+      props.focused,
+      props.pressed,
+    ],
   );
 
   const labelStyles: Array<StyleSheetType> = [style];