I’m developing a React application that includes multiple forms with inputs where validation rules (like min
and max
values) can vary depending on certain parameters. For instance, an input might accept values in the range [0, 5], but this range can differ based on the type property of a data object.
The application server already has a dataset of validation rules for each variation of form inputs.
My question is:
Would it be a better practice to serve these min and max values from the server through an API endpoint rather than hardcoding them directly in each component?
Here’s a simplified version of my current implementation:
export function Component({ obj }) {
const maxValue = {
"TYPE_1": 5,
"TYPE_2": 10,
"TYPE_3": 15
};
return (
<FloatInput
label="Component label"
max={maxValue[obj.type]}
min={0}
name="Float input"
/>
);
}
Considerations:
- The rules may change over time, and I want to ensure they remain consistent across the application.
- I’m looking to maintain best practices in terms of scalability, maintainability, and performance.
- Would fetching these validation rules from an API be the recommended approach, or are there downsides to this method that I should consider?