Do you even validate the internal structure of your props, or do you just validate at the top level?
I rarely validate the structure of my props. But when I do, I use TypeScript.
export type Params = {
foo: string;
bar?: number;
};
export const Widget = ({ foo, bar = 42 }: Params) =>
<div className={ foo }>{ bar }</div>
;
Lorefnon
Open Web Enthusiast
I do validate internal structure of props. To reduce the repetitive validation checks, when same props are being passed down around to multiple components, I create modules for prop interfaces and import that in individual components.
import {PropTypes as T} from 'react' const IFormTheme = T.shape({ colors: T.shape({ inputEntry: T.string, controlBorder: T.string, helpText: T.string }) ... }) // ... define any custom prop validators export default IFormThemeimport IFormTheme from './IFormTheme' class SomeFormControl extends Components { static propTypes = { theme: IFormTheme } ... }In some cases when minor specializations are required for the config it is useful to export an interface factory over an interface:
const IFormThemeFactory = (specializations) => { // ... restrict proptypes based on specializations return T.shape({ ... }) }I realize that this may appear to be over-engineered out of context, but can be useful when say for instance some specific theme property may not be required for all controls but be mandatory for some control.
Also having interfaces explicit enables you to use them for checking boundary conditions explictly even in production environment (eg. unreliable user input, or some third party service) where as prop validations are used only during development.