How extensively/deeply do you validate props in React?

Do you validate props in your #ReactJS components? 🕵 How deeply?  #JavaScript #WebDev

  • Also setting isRequired on a component’s props is a valuable way of declaring mandatory props.
  • I then later realised the value in doing so because if you are a fresh pair of eyes on somebody else’s code, and looking at the props on a component that you are changing, at a glance you will see the required data types and structure for that component, even if that component is 3/4 layers deep.
  • 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.
  • /IFormTheme’ class SomeFormControl extends Components { static propTypes = { theme: IFormTheme } …
  • At my company we do it the whole way down, I initially started doing this when my company’s EsLint config required it (you will get errors when linting etc.).

Do you even validate the internal structure of your props, or do you just validate at the top level?. Tagged with React Native,ReactJS.

@hashnode: Do you validate props in your #ReactJS components? 🕵 How deeply? #JavaScript #WebDev

Do you even validate the internal structure of your props, or do you just validate at the top level?

At my company we do it the whole way down, I initially started doing this when my company’s EsLint config required it (you will get errors when linting etc.). I then later realised the value in doing so because if you are a fresh pair of eyes on somebody else’s code, and looking at the props on a component that you are changing, at a glance you will see the required data types and structure for that component, even if that component is 3/4 layers deep. Also setting isRequired on a component’s props is a valuable way of declaring mandatory props.

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 IFormTheme

import 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.

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) =>

{ bar }

;

How extensively/deeply do you validate props in React?