{"componentChunkName":"component---src-templates-blog-js","path":"/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html","result":{"data":{"markdownRemark":{"html":"

Many of the questions we got following the public launch of React revolved around props, specifically that people wanted to do validation and to make sure their components had sensible defaults.

\n

Validation

\n

Oftentimes you want to validate your props before you use them. Perhaps you want to ensure they are a specific type. Or maybe you want to restrict your prop to specific values. Or maybe you want to make a specific prop required. This was always possible — you could have written validations in your render or componentWillReceiveProps functions, but that gets clunky fast.

\n

React v0.4 will provide a nice easy way for you to use built-in validators, or to even write your own.

\n
React.createClass({\n  propTypes: {\n    // An optional string prop named \"description\".\n    description: React.PropTypes.string,\n\n    // A required enum prop named \"category\".\n    category: React.PropTypes.oneOf(['News','Photos']).isRequired,\n\n    // A prop named \"dialog\" that requires an instance of Dialog.\n    dialog: React.PropTypes.instanceOf(Dialog).isRequired\n  },\n  ...\n});
\n

Default Values

\n

One common pattern we’ve seen with our React code is to do something like this:

\n
React.createClass({\n  render: function() {\n    var value = this.props.value || 'default value';\n    return <div>{value}</div>;\n  }\n});
\n

Do this for a few props across a few components and now you have a lot of redundant code. Starting with React v0.4, you can provide default values in a declarative way:

\n
React.createClass({\n  getDefaultProps: function() {\n    return {\n      value: 'default value'\n    };\n  }\n  ...\n});
\n

We will use the cached result of this function before each render. We also perform all validations before each render to ensure that you have all of the data you need in the right form before you try to use it.

\n
\n

Both of these features are entirely optional. We’ve found them to be increasingly valuable at Facebook as our applications grow and evolve, and we hope others find them useful as well.

","excerpt":"Many of the questions we got following the public launch of React revolved around , specifically that people wanted to do validation and to make sure their components had sensible defaults. Validation Oftentimes you want to validate your before you use them. Perhaps you want to ensure they are a specific type. Or maybe you want to restrict your prop to specific values. Or maybe you want to make a specific prop required. This was always possible — you could have written validations in your or…","frontmatter":{"title":"New in React v0.4: Prop Validation and Default Values","next":null,"prev":null,"author":[{"frontmatter":{"name":"Paul O’Shannessy","url":"https://twitter.com/zpao"}}]},"fields":{"date":"July 11, 2013","path":"content/blog/2013-07-11-react-v0-4-prop-validation-and-default-values.md","slug":"/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html"}},"allMarkdownRemark":{"edges":[{"node":{"frontmatter":{"title":"Introducing the New JSX Transform"},"fields":{"slug":"/blog/2020/09/22/introducing-the-new-jsx-transform.html"}}},{"node":{"frontmatter":{"title":"React v17.0 Release Candidate: No New Features"},"fields":{"slug":"/blog/2020/08/10/react-v17-rc.html"}}},{"node":{"frontmatter":{"title":"React v16.13.0"},"fields":{"slug":"/blog/2020/02/26/react-v16.13.0.html"}}},{"node":{"frontmatter":{"title":"Building Great User Experiences with Concurrent Mode and Suspense"},"fields":{"slug":"/blog/2019/11/06/building-great-user-experiences-with-concurrent-mode-and-suspense.html"}}},{"node":{"frontmatter":{"title":"Preparing for the Future with React Prereleases"},"fields":{"slug":"/blog/2019/10/22/react-release-channels.html"}}},{"node":{"frontmatter":{"title":"Introducing the New React DevTools"},"fields":{"slug":"/blog/2019/08/15/new-react-devtools.html"}}},{"node":{"frontmatter":{"title":"React v16.9.0 and the Roadmap Update"},"fields":{"slug":"/blog/2019/08/08/react-v16.9.0.html"}}},{"node":{"frontmatter":{"title":"Is React Translated Yet? ¡Sí! Sim! はい！"},"fields":{"slug":"/blog/2019/02/23/is-react-translated-yet.html"}}},{"node":{"frontmatter":{"title":"React v16.8: The One With Hooks"},"fields":{"slug":"/blog/2019/02/06/react-v16.8.0.html"}}},{"node":{"frontmatter":{"title":"React v16.7: No, This Is Not the One With Hooks"},"fields":{"slug":"/blog/2018/12/19/react-v-16-7.html"}}}]}},"pageContext":{"slug":"/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html"}},"staticQueryHashes":[]}