form rerenders optimized

app/src/ui/components/form/json-schema-form/FieldWrapper.tsx

@@ -1,19 +1,18 @@
 import { Popover } from "@mantine/core";
 import { IconBug } from "@tabler/icons-react";
-import type { JsonError } from "json-schema-library";
-import type { JSONSchema } from "json-schema-to-ts";
+import type { JsonSchema } from "json-schema-library";
 import { Children, type ReactElement, type ReactNode, cloneElement, isValidElement } from "react";
 import { IconButton } from "ui/components/buttons/IconButton";
 import { JsonViewer } from "ui/components/code/JsonViewer";
 import * as Formy from "ui/components/form/Formy";
+import { useFormError } from "ui/components/form/json-schema-form/Form";
 import { getLabel } from "./utils";
 
 export type FieldwrapperProps = {
-   pointer: string;
+   name: string;
    label?: string | false;
    required?: boolean;
-   errors?: JsonError[];
-   schema?: Exclude<JSONSchema, boolean>;
+   schema?: JsonSchema;
    debug?: object | boolean;
    wrapper?: "group" | "fieldset";
    hidden?: boolean;
@@ -21,21 +20,20 @@ export type FieldwrapperProps = {
 };
 
 export function FieldWrapper({
-   pointer,
+   name,
    label: _label,
    required,
-   errors = [],
    schema,
    debug,
    wrapper,
    hidden,
    children
 }: FieldwrapperProps) {
+   const errors = useFormError(name, { strict: true });
    const examples = schema?.examples || [];
-   const examplesId = `${pointer}-examples`;
+   const examplesId = `${name}-examples`;
    const description = schema?.description;
-   const label =
-      typeof _label !== "undefined" ? _label : schema ? getLabel(pointer, schema) : pointer;
+   const label = typeof _label !== "undefined" ? _label : schema ? getLabel(name, schema) : name;
 
    return (
       <Formy.Group
@@ -54,7 +52,7 @@ export function FieldWrapper({
                      <JsonViewer
                         json={{
                            ...(typeof debug === "object" ? debug : {}),
-                           pointer,
+                           name,
                            required,
                            schema,
                            errors
@@ -70,7 +68,7 @@ export function FieldWrapper({
          {label && (
             <Formy.Label
                as={wrapper === "fieldset" ? "legend" : "label"}
-               htmlFor={pointer}
+               htmlFor={name}
                className="self-start"
             >
                {label} {required && <span className="font-medium opacity-30">*</span>}