<p dir="auto">After updating the version, I found that the previous <code class="notranslate">highlighting render</code> function had disappeared! Is there an alternative function? And how to use it！</p>
<p dir="auto">using react PropTypes is awesome, and can help catching errors at the early stage,<br>
but sometimes, when the application is pretty large, there is always a flow of data<br>
structures of a big size. Like in the web email client application, there can be a <code class="notranslate">Message</code><br>
type that is passed all over the place, and multiple components can accept it in props.</p>
<p dir="auto">so the solution to that is usually creating a type file. e.g.</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// types/message.js

import React from 'react';

export default React.PropTypes.shape({
    id: React.PropTypes.string.isRequired,
    subject: React.PropTypes.string
}).isRequired;
"><pre class="notranslate"><span class="pl-c">// types/message.js</span>

<span class="pl-k">import</span> <span class="pl-v">React</span> <span class="pl-k">from</span> <span class="pl-s">'react'</span><span class="pl-kos">;</span>

<span class="pl-k">export</span> <span class="pl-k">default</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-en">shape</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
    <span class="pl-c1">id</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-c1">isRequired</span><span class="pl-kos">,</span>
    <span class="pl-c1">subject</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-kos">)</span><span class="pl-kos">.</span><span class="pl-c1">isRequired</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">and then reusing this type in components that get messages in props</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="
import messageType from './types/message';

MessagePreview.PropTypes = {
  message: messageType
}"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-s1">messageType</span> <span class="pl-k">from</span> <span class="pl-s">'./types/message'</span><span class="pl-kos">;</span>

<span class="pl-v">MessagePreview</span><span class="pl-kos">.</span><span class="pl-c1">PropTypes</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
  <span class="pl-c1">message</span>: <span class="pl-s1">messageType</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">but sometimes this data flows in some other than components elements. for example flux stores, or action creators. And that usually requires duplication of types (using immutable.js records or similar)</p>
<p dir="auto">That would we really nice if we could use this type checks in other parts of the application.</p>
<p dir="auto">for example</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// stores/message.js

import messageType from './types/message';
import checkTypes from 'react/check-types';

/**
 * @param {Array&lt;Object&gt;} payload.messages the array of message objects received from the API
 */
onDataReceived = (payload) =&gt; {
  payload.messages.forEach((message) =&gt; {
    checkTypes(message, messageType);
    addToStore(message);
  });
}"><pre class="notranslate"><span class="pl-c">// stores/message.js</span>

<span class="pl-k">import</span> <span class="pl-s1">messageType</span> <span class="pl-k">from</span> <span class="pl-s">'./types/message'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-s1">checkTypes</span> <span class="pl-k">from</span> <span class="pl-s">'react/check-types'</span><span class="pl-kos">;</span>

<span class="pl-c">/**</span>
<span class="pl-c"> * <span class="pl-k">@param</span> {<span class="pl-smi">Array&lt;Object&gt;</span>} payload.messages the array of message objects received from the API</span>
<span class="pl-c"> */</span>
<span class="pl-en">onDataReceived</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-s1">payload</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
  <span class="pl-s1">payload</span><span class="pl-kos">.</span><span class="pl-c1">messages</span><span class="pl-kos">.</span><span class="pl-en">forEach</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-s1">message</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-en">checkTypes</span><span class="pl-kos">(</span><span class="pl-s1">message</span><span class="pl-kos">,</span> <span class="pl-s1">messageType</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-en">addToStore</span><span class="pl-kos">(</span><span class="pl-s1">message</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>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">will this be any good? I guess architectually it means making propTypes.js more independent, and creating an adapter for prop/context validating</p>