React JSON schema forms offer a promising approach for product teams: define a form once as JSON, render it anywhere, and let the schema handle validation, defaults, and conditional logic. Libraries like @rjsf/core and Uniforms excel with small to medium forms. However, when forms become dynamic, state-dependent, or large, teams encounter architectural limitations. This article dives into these issues and presents SurveyJS as a solution. SurveyJS separates business logic from rendering, introducing survey-core and survey-react-ui.

The core issue with React JSON schema forms is that they treat the schema as both structure and behavior, relying heavily on schema mutation and React re-renders. This can lead to problems with conditional logic and validation. In contrast, SurveyJS treats JSON as a declarative model, encapsulating business logic in the form engine and using React solely for rendering. This approach ensures that the schema remains static, avoiding the pitfalls of dynamic schema updates.

For instance, in RJSF, conditional fields are often implemented using dependencies or dynamically regenerated schemas. This works for simple cases but becomes problematic when external data or complex conditions are involved. React sees these changes as new form definitions, potentially resetting input state and validation. SurveyJS, on the other hand, uses runtime expressions evaluated by survey-core, ensuring that fields are never removed or recreated, and visibility is deterministic.

SurveyJS also handles validation more robustly. Rather than tying validation to React render cycles, SurveyJS treats validation as a first-class engine concern. This ensures that errors are persisted in the survey model, and cross-field or async validation are built-in. This separation of concerns allows for more readable and maintainable code, especially for complex rules.