Saa asɛm yi yɛ nea SurveyJS na ɛboaa There’s a mental model dodow no ara React developers kyɛ a wɔnka ho asɛm denden da. Sɛ wɔkyerɛ sɛ nsusuwii ahorow yɛ nneɛma a ɛka bom bere nyinaa. Eyi kyerɛ sɛ stack te sɛ:
React Hook Form ma mpɔtam hɔ ɔman (minimal re-renders, ergonomic field registration, nkitahodi a ɛho hia). Zod ma validation (input correctness, hyeɛ validation, type-safe parsing). React Query ma backend: submission, san bɔ mmɔden, caching, server sync, ne nea ɛkeka ho.
Na wɔ nkrataa dodow no ara — wo login screens, wo nhyehyɛe nkratafa, wo CRUD modals — eyi yɛ adwuma yiye ankasa. Afã biara yɛ n’adwuma, wɔhyehyɛ no yiye, na wubetumi akɔ wo application no afã horow a ɛma wo nneɛma no da nsow ankasa no so. Nanso bere ne bere mu no, kratasin bi fi ase boaboa nneɛma te sɛ mmara a ɛfa sɛnea wotumi hu ade a egyina mmuae a wɔadi kan de ama so, anaasɛ gyinapɛn ahorow a wonya fi mu a ɛsen fa mfuw abiɛsa mu ano. Ebia mpo nkratafa mũ nyinaa a ɛsɛ sɛ wohuruw anaasɛ wɔkyerɛ a egyina running total so. Wode useWatch ne inline branch di conditional a edi kan no ho dwuma, a ɛyɛ papa. Afei foforo nso. Afei worekɔ superRefine sɛ encode cross-field mmara a wo Zod schema ntumi nkyerɛ wɔ ɔkwan a ɛyɛ daa so. Afei, anammɔn navigation fi ase leaking adwumayɛ ntease. Edu baabi a, wohwɛ nea woakyekye na wuhu sɛ kratasin no nyɛ UI ankasa bio. Ɛyɛ gyinaesi nhyehyɛe kɛse, na component dua no wɔ baabi a ɛbae sɛ wode siee no ara pɛ. Eyi ne baabi a misusuw sɛ adwene mu nhwɛsode a ɛfa nsusuwii ahorow ho wɔ React mu no sɛe, na nokwarem no ɛnyɛ obiara mfomso. RHF + Zod stack no ye yiye wɔ nea wɔyɛɛ no maa no no mu. Asɛm no ne sɛ yɛtaa kɔ so de di dwuma boro baabi a ne abstractions ne ɔhaw no hyia efisɛ ɔkwan foforo no hwehwɛ sɛ yɛfa ɔkwan foforo so susuw nsusuwii ahorow ho koraa. Asɛm yi fa saa ɔkwan foforo no ho. Sɛ yɛbɛkyerɛ yei a, yɛbɛkyekyere multi-step form koro no ara pɛpɛɛpɛ mprenu:
Sɛ wode React Hook Form + Zod wired kɔ React Query so ma wɔmfa nkɔma a, . Ne SurveyJS, a ɛfa fom bi ho sɛ data — JSON schema a ɛnyɛ den — sen sɛ ɛbɛyɛ component dua.
Ahwehwɛde koro no ara, tebea mu ntease koro no ara, API frɛ koro no ara wɔ awiei. Afei yɛbɛma nea etu ne nea ɛtraa hɔ no ho mfonini pɛpɛɛpɛ, na yɛde ɔkwan a mfaso wɔ so a yɛbɛfa so asi nhwɛsode a ɛsɛ sɛ wode di dwuma ho gyinae, ne bere a ɛsɛ sɛ wode di dwuma no ato hɔ. Krataa a yɛrekyekye no:
Saa kratasin yi de anammɔn 4 a ɛsen bedi dwuma: Anamɔn 1: Nsɛm a ɛkɔ akyiri
Edin a edi kan (wɔhwehwɛ), . Email (ɛhwehwɛ, ɔkwan a ɛfata).
Anamɔn 2: Nhyehyɛe
Unit bo, . Dodow, . Towtua dodow, . Nea wonya fii mu: Nkyekyɛm nketewa, . Towtua, . Ne nyinaa.
Anamɔn 3: Akontaabu & Nsɛm a Wɔde Ma
So wowɔ akontaabu bi? (Yiw/Dabi) . Sɛ Yiw → username + password a, abien no nyinaa ho hia. Sɛ Dabi → email a wɔaboaboa ano dedaw wɔ anammɔn 1 mu a.
Abotɔyam a wɔde ma (1–5) . Sɛ ≥ 4 → bisa sɛ “Dɛn na w’ani gyee ho?” Sɛ ≤ 2 → bisa sɛ “Dɛn na yebetumi atu mpɔn?”
Anamɔn 4: Hwɛ mu bio
Sɛ ne nyinaa yɛ >= 100 nkutoo a, ɛbɛda adi Nsɛm a etwa to a wɔde bɛkɔ.
Eyi nyɛ nea ɛtra so. Nanso ɛdɔɔso sɛ ɛbɛda nsonsonoe a ɛwɔ adansi mu adi. Ɔfã 1: Nneɛma a Wɔde Di Dwuma (React Hook Form + Zod) . Installation a wɔde hyɛ mu npm instɔl react-hook-form zod @hookform/resolvers @tanstack/react-asɛmmisa
Zod Nhyehyɛe a Wɔde Yɛ Adwuma Momma yɛnhyɛ aseɛ wɔ Zod schema no so, ɛfiri sɛ ɛhɔ na ɛtaa yɛ baabi a form no nsusuiɛ no si hɔ. Wɔ anammɔn mmienu a ɛdi kan no — ankorankoro nsɛm ne ahyɛdeɛ a wɔde hyɛ mu — biribiara yɛ tẽẽ: nhama a wɔhwehwɛ, nɔma a ɛwɔ minimums, ne enum. Ɔfã a ɛyɛ anigye no fi ase bere a wobɔ mmɔden sɛ wobɛda mmara a ɛwɔ tebea mu no adi no.
fa { z } fi "zod" mu;
export const formSchema = z.object ({ edin a edi kan: z.string ().min (1, "Wɔhwehwɛ"), email: z.string ().email ("Imel a ɛnteɛ"), bo: z.nɔma (). min (0), dodow: z.nɔma (). min (1), towBo: z.nɔma (), hasAccount: z.enum (["Yiw", "Dabi"]), ɔdefo din: z.string ().optional (), password: z.string ().optional (), abotɔyam: z.number ().min (1).max (5), positiveFeedback: z.string ().optional (), nkɔsoFeedback: z.string ().optional (),}).superRefine ((data, ctx) => { sɛ (data.hasAccount === "Yes") { sɛ (!data.asɛmfua din) { ctx.addIssue({ koodu: "asɛmfua", ɔkwan: ["ɔdefo din"], nkrasɛm: "Wɔhwehwɛ" }); } if (!data.asɛmfua || data.asɛmfua.tenten < 6) { ctx.addIssue({ koodu: "asɛmfua", ɔkwan: ["asɛmfua"], nkrasɛm: "Min 6 nkyerɛwde" });
if (data.satisfaction >= 4 && !data.positiveFeedback) { ctx.addIssue({ code: "amammerɛ", kwan: ["positiveFeedback"], nkra: "Yɛsrɛ wo kyɛ nea w'ani gyee ho" }); } .
sɛ (data.abotɔyam <= 2 && !data.nkɔsoFeedback) { ctx.addIssue ({ koodu: "amammerɛ", ɔkwan:["improvementFeedback"], message: "Yɛsrɛ wo ka nea ɛsɛ sɛ yɛtu mpɔn kyerɛ yɛn" }); }});
export type FormData = z.infer <ɔkwan a wɔfa so yɛ adwuma>;
Hyɛ no nsow sɛ wɔakyerɛw username ne password sɛ optional() ɛwom mpo sɛ wɔhwehwɛ wɔ tebea mu efisɛ Zod’s type-level schema kyerɛkyerɛ ade no nsusuwii mu, ɛnyɛ mmara a ɛkyerɛ bere a afuw ho hia. Ɛsɛ sɛ tebea ahwehwɛde no tra superRefine mu, a ɛkɔ so bere a wɔagye nsusuwii no atom akyi na ɛwɔ kwan kɔ ade mũ no nyinaa so. Saa ntetewmu no nyɛ sintɔ; ɛyɛ nea wɔayɛ adwinnade no ama no ara kwa: superRefine ne baabi a cross-field logic kɔ bere a wontumi nkyerɛ wɔ schema nhyehyɛe no ankasa mu. Nea ɛda nsow nso wɔ ha ne nea saa nhyehyɛe yi nkyerɛ. Enni nkratafa ho adwene biara, enni mfuw a wotumi hu wɔ beae bɛn ho adwene biara, na enni adwene biara a ɛfa akwantu ho. Ɛno nyinaa bɛtra baabi foforo. Form Component a Wɔde Di Dwuma
import { useForm, useWatch } fi "react-hook-form";fa { zodResolver } fi "@hookform/resolvers/zod";fa { useMutation } fi "@tanstack/react-query";fa { useState, useMemo } fi "react";fa { formSchema, type FormData } fi "./schema";
const STEPS = ["nsɛm a ɛkɔ akyiri", "hyɛde", "akontaabu", "nhwehwɛmu"];
type OrderPayload = FormData & { ne nyinaa: nɔma; tow: nɔma; ne nyinaa: nɔma };
export function RHFMultiStepForm () { const [anammɔn, setAnamɔn] = fa Tebea di dwuma (0);
const mutation = fa di dwumaNsakrae ({ mutationFn: async (adesoa a mfaso wɔ so: OrderPayload) => { const res = twɛn fetch ("/ api/ahyɛde", { ɔkwan: "POST", . headers: { "Nsɛm a ɛwɔ mu-Type": "application/json" }, nipadua: JSON.stringify (adesoa a mfaso wɔ so), . }); if (!res.ok) throw new Error("Wɔantumi amfa ankɔma"); san kɔ res.json (); }, . });
const { register, control, handleSubmit, formState: { mfomso }, } = useForm
return (
);}Hwɛ Pen SurveyJS-03-RHF [forked] denam sixthextinction so. Nneɛma pii rekɔ so wɔ ha, na ɛfata sɛ wobrɛ wo ho ase na woahyɛ baabi a nneɛma kowiee no nsow.
Wɔde values a wonya fi mu — subtotal, tax, total — no bu akontaa wɔ component no mu denam useWatch ne useMemo so efisɛ egyina live field values so na abɔde mu beae foforo biara nni hɔ ma wɔn. Mmara a ɛfa sɛnea wotumi hu ade a ɛfa ɔdefo din, asɛmfua, positiveFeedback, ne improvementFeedback ho no te JSX mu sɛ inline conditionals. Anamɔn-skipping logic — nhwehwɛmu krataafa no pue bere a ne nyinaa yɛ >= 100 nkutoo — wɔde ahyɛ showSubmit variable ne render tebea a ɛwɔ anammɔn 3 no mu. Navigation ankasa yɛ useState counter kɛkɛ a yɛde nsa rema akɔ soro. React Query di mmɔden a wɔsan yɛ, caching, ne invalidation ho dwuma. Fom no frɛ mutation.mutate kɛkɛ a ɛwɔ data a wɔagye atom.
Eyinom mu biara nyɛ mfomso, ankasa. Eyi da so ara yɛ idiomatic React, na component no yɛ adwuma yiye esiane sɛnea RHF yiyi re-renders nti. Nanso sɛ wode eyi ma obi a wankyerɛw na woka kyerɛ wɔn sɛ wɔnkyerɛkyerɛ mu wɔ tebea horow a nhwehwɛmu krataafa no pue mu a, ɛsɛ sɛ wɔhwehwɛ denam showSubmit, anammɔn 3 render tebea no, ne nav button logic — mmeae abiɛsa a ɛsono emu biara — de san kyekye mmara bi a anka wobetumi aka wɔ nkyerɛwde biako mu. Form no yɛ adwuma, yiw, nanso suban no nyɛ nea wobetumi ahwɛ mu ankasa sɛ nhyehyɛe. Ɛsɛ sɛ wokum no wɔ adwene mu. Nea ɛho hia sen saa no, sɛ wɔbɛsakra no a, ɛhwehwɛ sɛ wɔde mfiridwuma ho nimdeɛ de wɔn ho hyɛ mu. Tweak ketewa mpo, te sɛ nsakrae bere a nhwehwɛmu anammɔn no da adi no, kyerɛ sɛ wobɛsesa ade no, wobɛsesa validation, wobɛbue twetwe abisade, wobɛtwɛn nhwehwɛmu, na woasan de adi dwuma. Ɔfa 2: Nhyehyɛe a Wɔde Di Dwuma (NhwehwɛmuJS) . Afei momma yɛmfa schema nsi flow koro no ara. Installation a wɔde hyɛ mu npm install nhwehwɛmu-core nhwehwɛmu-react-ui @tanstack/react-query
survey-coreMIT-licensed platform-independent runtime engine a ɛma SurveyJS’s form rendering ahoɔden — ɔfã a yɛdwene ho wɔ ha. Ɛfa JSON schema, kyekye emu nhwɛsoɔ firi mu, na ɛdi biribiara a anka ɛbɛtena wo React fã no mu ho dwuma: ɛsɔ visibility expressions, computing derived values, hwɛ krataafa tebea so, tracking validation, ne gyinaesie deɛ “complete” kyerɛ a wɔde ama nkratafa a wɔkyerɛɛ ankasa.
survey-react-uiUI / rendering layer a ɛka saa model no bata React ho. Ɛyɛ
Wɔbom ma wo kwan a ɛyɛ adwuma koraa, a ɛwɔ nkratafa pii no runtime a wonkyerɛw line biako a ɛfa control flow ho. Schema format no ankasa yɛ, sɛnea yɛadi kan aka no, JSON kɛkɛ — DSL anaa biribiara a ɛyɛ ne de biara nni hɔ. Wubetumi de ahyɛ mu, de afi fael bi mu, agye afi API mu, anaasɛ wode asie database kɔla mu na wode nsu ahyɛ mu bere a woreyɛ no. Ɔkwan Korɔ no ara, Sɛ Data Here’s the same form, saa bere yi wɔada no adi sɛ JSON ade. Schema no kyerɛkyerɛ biribiara mu: nhyehyeɛ, validation, visibility rules, derived calculations, page navigation — na ɛde ma Model a ɛsɔ hwɛ wɔ runtime mu. Sɛnea ɛno te ne nyinaa ni:
export const surveySchema = { title: "Order Flow", showProgressBar: "atifi", nkratafa: [ { din: "nsɛm a ɛkɔ akyiri", elements: [ { type: "nkyerɛwee", din: "Edin a edi kan", isRequired: nokware }, { type: "nkyerɛwee", din: "email", inputType: "email", isRequired: nokware, validators: [{ type: "email", nkyerɛwee: "Email a ɛnteɛ" }] } ] }, { din: "ɔhyehyɛ", elements: [ { type: "nsɛm", din: "bo", inputType: "nɔma", defaultValue: 0 }, { type: "nkyerɛwee", din: "dodow", inputType: "nɔma", defaultValue: 1 }, { type: "dropdown",din: "taxRate", defaultValue: 0.1, paw: [ { bo: 0.05, nkyerɛwee: "5%" }, { bo: 0.1, nkyerɛwee: "10%" }, { bo: 0.15, nkyerɛwee: "15%" } ] }, { type: "nkyerɛkyerɛmu", din: "subtotal", asɛmfua: "{bo} {dodow}" }, { type: "nsɛmfua", din: "tow", asɛmfua: "{subtotal} {taxRate}" }, { type: "nsɛmfua", din: "total", asɛmfua: "{subtotal} + {tax}" } ] }, { din: "akontaabu", elements: [ { type: "radiogroup", din: "hasAccount", paw: ["Yiw", "Dabi"] }, { type: "text", din: "ɔdefo din", visibleIf: "{hasAccount} = 'Yiw'", isRequired: nokware }, { type: "nkyerɛwee", din: "asɛmfua", inputType: "asɛmfua", visibleIf: "{hasAccount} = 'Yiw'", isRequired: nokware, validators: [{ type: "nkyerɛwee", minLength: 6, text: "Ɛyɛ nkyerɛwde 6 mu" }] }, { type: "rating", din: "abotɔyam", rateMin: 1, rateMax: 5 }, { type: "nsɛm a wɔka", din: "positiveFeedback", visibleIf: "{abotɔyam} >= 4" }, { type: "nsɛm a wɔka", din: "nkɔsoFeedback", visibleIf: "{abotɔyam} <= 2" } ] }, { din: "nhwehwɛmu", visibleIf: "{ne nyinaa} >= 100", nneɛma: [] } ]};
Fa eyi toto RHF nkyerɛase no ho kakra.
SuperRefine block a na ɛhwehwɛ sɛ wɔde di dwuma ne asɛmfua a wɔde di dwuma wɔ tebea bi mu no ayera. visibleIf: "{hasAccount} = 'Yiw'" a wɔaka abom ne isRequired: true di nsɛm abien no nyinaa ho dwuma bom, wɔ afuw no ankasa so, baabi a wobɛhwɛ kwan sɛ wubehu. useWatch + useMemo nkɔnsɔnkɔnsɔn a ɛbu subtotal, tax, ne total no, wɔde expression fields mmiɛnsa a ɛkyerɛ wɔn ho wɔn ho din asi ananmu. Nhwehwɛmu krataafa tebea no, a wɔ RHF nkyerɛase no mu no na wotumi san yɛ denam hwehwɛ a wɔde hwehwɛ denam showSubmit, anammɔn 3 render baa dwumadibea no so nkutoo so. Na awiei koraa no, nav button logic no yɛ visibleIf agyapade biako wɔ krataafa ade no so.
Ntease koro no ara na ɛwɔ hɔ. Ɛyɛ kɛkɛ sɛ schema no ma no baabi a ɔbɛtena baabi a ɛda adi wɔ baabi a atew ne ho, sen sɛ ɛbɛtrɛw wɔ component no mu. Afei nso, hyɛ no nsow sɛ schema no de type: ‘expression’ di dwuma ma subtotal, tow, ne total. Nkyerɛkyerɛmu yɛ akenkan nkutoo na wɔde di dwuma titiriw de kyerɛ gyinapɛn ahorow a wɔabu ho akontaa. SurveyJS nso boa type: 'html' ma static content, nanso wɔ calculated values ho no, expression yɛ paw a ɛfata. Afei ma React afã no. Nkyerɛase Ne Nsɛm a Wɔde Hyehyɛ Ɛnyɛ den koraa. Wire onComplete kɔ wo API so saa ara — via useMutation anaa plain fetch:
import { useState, useEffect, useRef } from "react";import { useMutation } from "@tanstack/react-query";import { Model } fi "nhwehwɛmu-core";fa { Nhwehwɛmu } fi "nhwehwɛmu-react-ui";fa "nhwehwɛmu-core/nhwehwɛmu-core.css" ba;
export function SurveyForm () { const [nhwɛso] = useState (() => Model foforo (nhwehwɛmuSchema));
const mutation = fa di dwumaNsakrae ({ mutationFn: async (data) => { const res = twɛn fetch ("/ api/ahyɛde", { ɔkwan: "POST", . headers: { "Nsɛm a ɛwɔ mu-Type": "application/json" }, nipadua: JSON.stringify (data), . }); if (!res.ok) throw new Error("Wɔantumi amfa ankɔma"); san kɔ res.json (); }, . });
const mutationRef = fa di dwumaRef (nsakrae); mutationRef.current = nkwaadɔm mu nsakrae; useEffect (() => { const handler = (ɔsomafo) => mutationRef.current.mutate (ɔsomafo.data); model.onComplete.add (handler); san () => model.onComplete.yi (ɔdemafo); }, [model]); // ref kwati sɛ ɔbɛsan akyerɛw handler render biara (mutation ade identity nsakrae) .
san kɔ (
<>
Hwɛ Pen SurveyJS-03-SurveyJS [forked] denam sixthextinction so.
onComplete fires bere a ɔdefo no adu kratafa a etwa to a wotumi hu no awiei. Enti sɛ total ntwa 100 da na wohuruw review krataafa no a, ɛda so ara to gya yiye efisɛ SurveyJS hwehwɛ visibility ansa na asi nea “kratafa a etwa to” kyerɛ ho gyinae. Afei, sender.data kura mmuaeɛ nyinaa ka ho ne botaeɛ a wɔabu ho akontaa (subtotal, tax, total) sɛ first-class fields, enti API payload no ne deɛ RHF version no boaboaa ano nsa wɔ onSubmit mu no yɛ pɛ. NomutationRef pattern yɛ ade koro no ara a wobɛkɔ baabiara a wuhia stable event handler wɔ value a ɛsakra wɔ render biara so — biribiara SurveyJS-specific fa ho.
React fã no nni adwumayɛ mu ntease biara bio koraa. UseWatch biara nni hɔ, JSX a ɛwɔ tebea biara nni hɔ, anammɔn akontaabu biara nni hɔ, useMemo nkɔnsɔnkɔnsɔn biara nni hɔ, superRefine biara nni hɔ. React reyɛ nea ɛyɛ papa ankasa: rendering component na wiring no akɔ API frɛ so. Dɛn na Tu fii React mu?
Adwennwene RHF Stack a Wɔde Yɛ Nneɛma NhwehwɛmuJS Nneɛma a wotumi hu JSX nkorabata ahorow wotumi huSɛ Gyinapɛn ahorow a wonya fi mu fa di dwumaWatch / fa di dwumaMemo asɛm a wɔka kyerɛ Mmara a ɛfa cross-field ho superRefine no yiye Schema tebea horow Navigation a wɔde fa kwan so anammɔn tebea Kratafa a wotumi huSɛ Mmara beae a ɛwɔ Wɔakyekyɛ wɔ fael ahorow mu Centralized wɔ schema no mu
Nea ɛtra React mu ne nhyehyɛe, styling, submission wiring, ne app integration, a ɛkyerɛ sɛ, nneɛma a wɔayɛ React ama ankasa. Biribiara a aka no kɔɔ schema no mu, na esiane sɛ schema no yɛ JSON ade ara kwa nti, wobetumi de asie wɔ database mu, wɔayɛ no version a ɛnyɛ wo application code no, anaasɛ wɔbɛsesa denam emu nnwinnade so a enhia sɛ wɔde di dwuma. Product manager a ɛsɛ sɛ ɔsesa threshold a ɛkanyan review page no betumi ayɛ saa a ɔrenka component no. Ɛno yɛ adwumayɛ mu nsonsonoe a ntease wom ma akuw a form suban taa dannan na ɛnyɛ bere nyinaa na mfiridwumayɛfo na wɔka. Bere Bɛn na Ɛsɛ sɛ Yɛde Ɔkwan Biara Di Dwuma? Mmara pa bi a ɛyɛ adwuma ma me ni: fa no sɛ wobɛpopa kratasin no koraa. Dɛn na anka wobɛhwere?
Sɛ ɛyɛ screens a, wopɛ sɛ component-driven forms. Sɛ ɛyɛ adwumayɛ mu nteaseɛ, te sɛ thresholds, branching rules, ne conditional requirements a encode gyinaesie ankasa a, wopɛ schema engine.
Saa ara nso na sɛ nsakraeɛ a ɛreba wo kwan so no fa labels, fields, ne layout ho kɛseɛ a, RHF bɛsom wo yie. Sɛ ɛfa tebea horow, nea ebefi mu aba, ne mmara a ebia ɛho behia sɛ wo ops anaa mmara kuw no yɛ nsakrae wɔ Yawda awia a wɔmfa tekiti nkɔ a, schema model a ɛwɔ SurveyJS no ne nea ɛfata sen biara. Saa akwan abien yi ne wɔn ho wɔn ho nhyia ankasa. Wɔdi ɔhaw ahodoɔ ahodoɔ ho dwuma, na mfomsoɔ a ɛfata sɛ wɔkwati ne sɛ wɔmfa abstraction no nhyia ne nteaseɛ no mu duru — sɛ wɔbɛfa mmara nhyehyɛeɛ bi sɛ ade a ɛka ho ɛfiri sɛ ɛno ne adwinnadeɛ a wonim no yie, anaasɛ wɔbɛduru nhyehyɛeɛ engine bi so ɛfiri sɛ krataa bi nyini kɔɔ anammɔn mmiɛnsa na ɛnya conditional field. Ɔkwan a yɛhyɛɛ da sii wɔ ha no te bɛn ɔhye no, ɛyɛ den araa ma ɛda nsonsonoe no adi nanso ɛnyɛ nea ɛboro so araa ma ntotoho no te nka sɛ wɔayɛ no basabasa. Ebia nkyerɛwde ankasa dodow no ara a ayɛ den wɔ wo codebase no mu no te bɛn saa hye koro no ara, na asɛmmisa no taa yɛ sɛ ebia obi abɔ nea wɔyɛ ankasa din kɛkɛ anaa. Fa React Hook Form + Zod di dwuma bere a:
Nkrataa ahorow no yɛ nea ɛfa CRUD ho; Logic yɛ shallow na UI-driven; Mfiridwumayɛfo na wɔwɔ nneyɛe nyinaa; Backend da so ara yɛ nokware fibea.
Fa SurveyJS di dwuma bere a:
Nkrataa kyerɛw adwumayɛ ho gyinaesi ahorow; Mmara ahorow no dannan a ɛnyɛ UI; Ɛsɛ sɛ ntease yɛ nea wotumi hu, wotumi te ho akontaa, anaasɛ wɔyɛ no nkyerɛase; Wɔn a wɔnyɛ mfiridwumayɛfo nya nneyɛe so nkɛntɛnso; Ɛsɛ sɛ ɔkwan koro no ara tu mmirika fa frontends pii so.
