In solidjs table cells, validation can be slow

[Quan]

I have a 150-line table that uses a checksum that causes my input to be slow

  const Render = (props: { row: Row; index: Accessor<number> }) => {
    const [prev, setPrev] = createSignal(props.row.name);
    /** 文本状态, 0,未更改， 1，更改但未保存, 2更改并保存 */
    const [status, setStatus] = createSignal(0);
    return (
      <form.Field
        index={props.index()}
        validators={{
          onChange({ value }) {
            const row = value as Row;
            if (props.row.name === row.name) {
              return false;
            }
            if (row.name) return false;
            return "名字不能为空";
          },
        }}
        children={(field) => {
          const value = () => field().state.value as Row;
          const label = () => {
            if (field().state.meta.errors.length) {
              return field().state.meta.errors;
            }
            if (status() === 1) {
              return "尚未保存,聚焦状态按下回车键保存";
            }
            if (status() === 2) {
              return "保存成功";
            }
            return "回车键保存";
          };
          createEffect(() => {
            console.log("错我", label());
          });
          useEvents(events, {
            on: {
              name: "save",
              listener: () => {
                if (field().state.meta.errors.length) return;
                if (status() === 0) return;
                setPrev(props.row.name);
                setRows(props.index(), "name", value().name);
                setStatus(2);
                field().handleBlur();
              },
            },
          });
          return (
            <Stack direction="row" spacing={2}>
              <TextField
                style={{
                  width: "100%",
                }}
                size="small"
                error={!!field().state.meta.errors.length || status() === 1}
                value={value().name}
                onChange={(e) => {
                  field().setValue({
                    name: e.target.value,
                  });
                  field().handleChange({
                    name: e.target.value,
                  });
                }}
                onBlur={() => {
                  setStatus(props.row.name === value().name ? 0 : 1);
                }}
                label={label()}
                onKeyDown={(e) => {
                  if (e.key === "Enter") {
                    setPrev(props.row.name);
                    setRows(props.index(), "name", value().name);
                    field().handleBlur();
                    setStatus(2);
                  }
                }}
                focused={status() === 2 || undefined}
                color={status() === 2 ? "success" : "primary"}
              />
              <Show when={status() === 2}>
                <Button
                  onMouseDown={(e) => {
                    e.preventDefault();
                  }}
                  onClick={() => {
                    setRows(props.index(), "name", prev());
                    field().setValue({
                      name: prev(),
                    });
                  }}
                  style={{ "flex-shrink": 0 }}
                >
                  撤销上次提交
                </Button>
              </Show>
            </Stack>
          );
        }}
      />
    );
  };

As follows, when I try to verify the data while entering the changes, it is very slow：

onChange={(e) => {
   field().setValue({
      name: e.target.value,
   });
  //  This will cause the cell to fully rerender
   field().handleChange({
     name: e.target.value,
   });
 }}

[Quan]

validateAllFields is also slow, and validators work poorly under solidjs

         <Button
            variant="contained"
            onClick={async () => {
              const res = await form.validateAllFields("submit");
              console.log("res", res);
              if (res.length) return;
              events.emit("save");
            }}
          >
            提交已更改
          </Button>

[Corbin Crutchley]

Truthfully, without performance heuristics, "slow" is too ambiguous. Moreover, "Valdiators work poorly under solidjs" isn't enough information to go off of.

Closing as a result of each, but happy to investigate further if more specifics are supplied (and a minimal reproduction is opened)