<p dir="auto">Component declaration should contain a whitelist of properties, e.g. it could require that you list the property name under <code class="notranslate">propTypes</code> even if it is assigned <code class="notranslate">null</code> (that could mean "any type", a broader version of <code class="notranslate">React.PropTypes.node</code>).</p>
<p dir="auto">If a property that is not defined in <code class="notranslate">propTypes</code> is passed to a component declaration an error must be raised.</p>
<p dir="auto">This would provide several benefits:</p>
<ul dir="auto">
<li>Would help to catch TYPOs</li>
<li>Would promote type declaration</li>
<li>Would prevent orphan properties</li>
</ul>
<h2 dir="auto">Catching Typos</h2>
<p dir="auto">Suppose a component that generates a different type of input depending on a <code class="notranslate">type</code> value. This component has a default <code class="notranslate">type</code> value "text".</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="var Input = React.createClass({
    getDefaultProps: function () {
        return {
            type: 'text'
        }
    },
    render: function () {
        // Different logic defending on the type name.
        // this.props.type === 'text'

        return &lt;div /&gt;;
    }
});"><pre class="notranslate"><span class="pl-k">var</span> <span class="pl-v">Input</span> <span class="pl-c1">=</span> <span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-en">createClass</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
    <span class="pl-en">getDefaultProps</span>: <span class="pl-k">function</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-k">return</span> <span class="pl-kos">{</span>
            <span class="pl-c1">type</span>: <span class="pl-s">'text'</span>
        <span class="pl-kos">}</span>
    <span class="pl-kos">}</span><span class="pl-kos">,</span>
    <span class="pl-en">render</span>: <span class="pl-k">function</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-c">// Different logic defending on the type name.</span>
        <span class="pl-c">// this.props.type === 'text'</span>

        <span class="pl-k">return</span> <span class="pl-c1">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">If <code class="notranslate">Input</code> instance declaration is defined with a typo in the <code class="notranslate">type</code> property, it would not be an obvious error.</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;Input tupe='password' /&gt;"><pre class="notranslate"><span class="pl-c1">&lt;</span><span class="pl-ent">Input</span> <span class="pl-c1">tupe</span><span class="pl-c1">=</span><span class="pl-s">'password'</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span></pre></div>
<p dir="auto">Raising an error "Unknown property 'tupe'." would help to catch the error.</p>
<h2 dir="auto">Promoting Type Declaration</h2>
<p dir="auto">If property names are required to be listed under <code class="notranslate">propTypes</code>, it requires little extra effort to define their types.</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="var Input = React.createClass({
    propTypes: {
        type: React.PropTypes.string,
        // type: null
    },
    render: function () {
        return &lt;div /&gt;;
    }
});"><pre class="notranslate"><span class="pl-k">var</span> <span class="pl-v">Input</span> <span class="pl-c1">=</span> <span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-en">createClass</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
    <span class="pl-c1">propTypes</span>: <span class="pl-kos">{</span>
        <span class="pl-c1">type</span>: <span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-c1">PropTypes</span><span class="pl-kos">.</span><span class="pl-c1">string</span><span class="pl-kos">,</span>
        <span class="pl-c">// type: null</span>
    <span class="pl-kos">}</span><span class="pl-kos">,</span>
    <span class="pl-en">render</span>: <span class="pl-k">function</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-k">return</span> <span class="pl-c1">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">Furthermore, we are used to think about <em>code-length</em> in terms of the lines of code. The fact that type declaration at the moment adds extra lines might be discouraging some developers from doing it. This thought is only to boost the importance of the earlier argument.</p>
<h2 dir="auto">Preventing Orphan Properties</h2>
<p dir="auto">This is especially relevant when using spread operator inheritance.</p>
<p dir="auto">Suppose an instance of a simple (<code class="notranslate">Input</code>) component is declared using a spread operator.</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;Input {...generalFormProps} name='foo' /&gt;"><pre class="notranslate"><span class="pl-c1">&lt;</span><span class="pl-ent">Input</span> <span class="pl-kos">{</span>...<span class="pl-s1">generalFormProps</span><span class="pl-kos">}</span> <span class="pl-c1">name</span><span class="pl-c1">=</span><span class="pl-s">'foo'</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span></pre></div>
<p dir="auto">, where <code class="notranslate">generalFormProps</code> is an object containing many properties of which just some apply to <code class="notranslate">Input</code> component. In this scenario, each <code class="notranslate">Input</code> instance would have a copy of those property values (dead weight).</p>
<p dir="auto">It would be great if in debug mode react would warn you when you pass in a property on props which is not specified in the propTypes object for that component. i.e. a way to enforce that props should ONLY have the props specified in propTypes and no others.</p>
<p dir="auto">This would prevent use of undocumented properties and also allow better code maintenance as unused props would be more easily removed.</p>