<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong></p>
<p dir="auto">Feature / use case</p>
<p dir="auto"><strong>What is the current behavior?</strong></p>
<p dir="auto">It seems currently there is no way to get the order of children from the children themselves with context.</p>
<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">I've run into this now in three use cases when building a style system: Breadcrumbs, Segmented views, and Text rhythm/spacing.</p>
<p dir="auto">Example 1, breadcrumbs. You want to show an arrow on all but the last breadcrumb, but they may be deeply nested:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="let BreadcrumbOrder = createContext({ index: -1, total: -1 })

let Button = props =&gt; {
  let order = useContext(BreadcrumbOrder)
  return &lt;div style={{ borderRight: order.index &gt; total ? '1px solid red' : 'none' }} {...props} /&gt;
}

let MyView = () =&gt; {
  return (
    &lt;BreadcrumbProvider&gt;
      &lt;Button /&gt;
      &lt;Button /&gt;
      &lt;div&gt;&lt;Button /&gt;&lt;/div&gt;
    &lt;/BreadcrumbProvider&gt;
  )
}"><pre class="notranslate"><span class="pl-k">let</span> <span class="pl-smi">BreadcrumbOrder</span> <span class="pl-c1">=</span> <span class="pl-en">createContext</span><span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-c1">index</span>: <span class="pl-c1">-</span><span class="pl-c1">1</span><span class="pl-kos">,</span> <span class="pl-c1">total</span>: <span class="pl-c1">-</span><span class="pl-c1">1</span> <span class="pl-kos">}</span><span class="pl-kos">)</span>

<span class="pl-k">let</span> <span class="pl-smi">Button</span> <span class="pl-c1">=</span> <span class="pl-s1">props</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
  <span class="pl-k">let</span> <span class="pl-s1">order</span> <span class="pl-c1">=</span> <span class="pl-en">useContext</span><span class="pl-kos">(</span><span class="pl-smi">BreadcrumbOrder</span><span class="pl-kos">)</span>
  <span class="pl-k">return</span> <span class="pl-kos">&lt;</span><span class="pl-smi">div</span><span class="pl-kos"></span> <span class="pl-s1">style</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-kos">{</span> <span class="pl-c1">borderRight</span>: <span class="pl-s1">order</span><span class="pl-kos">.</span><span class="pl-c1">index</span> <span class="pl-c1">&gt;</span> <span class="pl-s1">total</span> ? <span class="pl-s">'1px solid red'</span> : <span class="pl-s">'none'</span> <span class="pl-kos">}</span><span class="pl-kos">}</span> <span class="pl-kos">{</span>...<span class="pl-s1">props</span><span class="pl-kos">}</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
<span class="pl-kos">}</span>

<span class="pl-k">let</span> <span class="pl-smi">MyView</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
  <span class="pl-k">return</span> <span class="pl-kos">(</span>
    <span class="pl-kos">&lt;</span><span class="pl-smi">BreadcrumbProvider</span><span class="pl-kos">&gt;</span>
      <span class="pl-kos">&lt;</span><span class="pl-smi">Button</span> <span class="pl-c1">/</span><span class="pl-kos">&gt;</span>
      <span class="pl-kos">&lt;</span><span class="pl-smi">Button</span> <span class="pl-c1">/</span><span class="pl-kos">&gt;</span>
      <span class="pl-kos">&lt;</span><span class="pl-smi">div</span><span class="pl-kos">&gt;</span><span class="pl-kos">&lt;</span><span class="pl-smi">Button</span><span class="pl-kos"></span> <span class="pl-pds"><span class="pl-c1">/</span>&gt;&lt;<span class="pl-c1">/</span>div</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-smi">BreadcrumbProvider</span><span class="pl-c1">&gt;</span>
  <span class="pl-kos">)</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">Where MyView should provide the ordering so that the sub-views can access <code class="notranslate">total</code> and <code class="notranslate">index</code> and properly style.</p>
<p dir="auto">The other use cases are basically identical, but for different patterns. One is for joining together buttons that are in a row in the interface (Segmented), and the other is for collapsing margins when you have text elements in a vertical column.</p>
<p dir="auto">Really this ticket encompasses more of a question or request for documentation clarity here. I'm not sure how it is not pre-concurrent, but I'm assuming mount-order will be non-deterministic if not now then shortly. Is there any reference to a pattern that works for this use case?</p>
<p dir="auto">Namely: how children can access their mount order / total children. I can do it now useReducer/context, but I've seen it mount in a weird order at least once and think it was due to a suspense type thing, and would be curious a better practice for this.</p>
<p dir="auto">Is it possible to have a "frozen" component, that is rendered only on server-side, without being processed on the client side? (without calling the render-cycle again).<br>
Let's say I have a CMS, that statically generates HTML on the server (a legacy system), but I want to use react to render the output inside my component structure.</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;Root&gt;
  &lt;ComponentA/&gt;
  &lt;CmsBlock id=&quot;staticMarkupId&quot;/&gt;
  &lt;ComponentB/&gt;
&lt;/Root&gt;"><pre class="notranslate"><span class="pl-c1">&lt;</span><span class="pl-ent">Root</span><span class="pl-c1">&gt;</span>
  <span class="pl-c1">&lt;</span><span class="pl-ent">ComponentA</span><span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
  <span class="pl-c1">&lt;</span><span class="pl-ent">CmsBlock</span> <span class="pl-c1">id</span><span class="pl-c1">=</span><span class="pl-s">"staticMarkupId"</span><span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
  <span class="pl-c1">&lt;</span><span class="pl-ent">ComponentB</span><span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Root</span><span class="pl-c1">&gt;</span></pre></div>
<p dir="auto">To prevent the HTML to be exposed twice, I will provide the information only on the server side.<br>
The HTML can be quite big, and I don't want to have them on the client site again.</p>
<p dir="auto">Right now, I don't see a way to tell react, to prevent calling the render method on a component again.<br>
What I did, is this ugly workaround (react complains about a checksum mismatch though):</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="/**
 * @flow
 */

import React, { Component, Element } from 'react';

type Props = {
  id:string,
  className?:string
}

type State = {
  markup:Object
}

export default class CmsBlock extends Component&lt;void, Props, State&gt; {

  props:Props;

  state:State;

  constructor(props:Props) {
    super(props);
    const { id } = props;
    const createMarkup = contentId =&gt; {
      return {
        __html: global.__CMS_CONTENT__ &amp;&amp; global.__CMS_CONTENT__[contentId] ? global.__CMS_CONTENT__[contentId] :
          !global.__CMS_CONTENT__ &amp;&amp; global.document ?
            // FIXME: WTF?
            global.document.querySelector(`[data-cms-id=&quot;${contentId}&quot;]`).innerHTML :
            `CMS Block ID &lt;strong&gt;${contentId}&lt;/strong&gt; does not exist.`
      };
    };

    this.state = {
      markup: createMarkup(id)
    };
  }

  shouldComponentUpdate() {
    // is not called on initial &quot;client-mounting&quot;
    return false;
  }

  render():Element {
    const { className, id } = this.props;
    return (
      &lt;div data-cms-id={id} className={className} dangerouslySetInnerHTML={this.state.markup}/&gt;
    );
  }
}
"><pre class="notranslate"><span class="pl-c">/**</span>
<span class="pl-c"> * <span class="pl-k">@flow</span></span>
<span class="pl-c"> */</span>

<span class="pl-k">import</span> <span class="pl-v">React</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-v">Component</span><span class="pl-kos">,</span> <span class="pl-v">Element</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'react'</span><span class="pl-kos">;</span>

<span class="pl-s1">type</span> <span class="pl-v">Props</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
  <span class="pl-c1">id</span>:<span class="pl-s1">string</span><span class="pl-kos">,</span>
  <span class="pl-c1">className</span>?:<span class="pl-s1">string</span>
<span class="pl-kos">}</span>

<span class="pl-s1">type</span> <span class="pl-v">State</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
  <span class="pl-c1">markup</span>:<span class="pl-v">Object</span>
<span class="pl-kos">}</span>

<span class="pl-s1">export</span> <span class="pl-k">default</span> <span class="pl-k">class</span> <span class="pl-v">CmsBlock</span> <span class="pl-k">extends</span> <span class="pl-v">Component</span><span class="pl-c1">&lt;</span><span class="pl-k">void</span><span class="pl-kos">,</span> <span class="pl-v">Props</span><span class="pl-kos">,</span> <span class="pl-v">State</span><span class="pl-c1">&gt;</span> <span class="pl-kos">{</span>

  <span class="pl-c1">props</span>:<span class="pl-v">Props</span><span class="pl-kos">;</span>

  state:<span class="pl-v">State</span><span class="pl-kos">;</span>

  <span class="pl-en">constructor</span><span class="pl-kos">(</span><span class="pl-s1">props</span>:<span class="pl-v">Props</span><span class="pl-kos">)</span><span class="pl-kos"></span> <span class="pl-kos">{</span>
    <span class="pl-smi">super</span><span class="pl-kos">(</span><span class="pl-s1">props</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-k">const</span> <span class="pl-kos">{</span> id <span class="pl-kos">}</span> <span class="pl-c1">=</span> <span class="pl-s1">props</span><span class="pl-kos">;</span>
    <span class="pl-k">const</span> <span class="pl-en">createMarkup</span> <span class="pl-c1">=</span> <span class="pl-s1">contentId</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
      <span class="pl-k">return</span> <span class="pl-kos">{</span>
        <span class="pl-c1">__html</span>: <span class="pl-s1">global</span><span class="pl-kos">.</span><span class="pl-c1">__CMS_CONTENT__</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-s1">global</span><span class="pl-kos">.</span><span class="pl-c1">__CMS_CONTENT__</span><span class="pl-kos">[</span><span class="pl-s1">contentId</span><span class="pl-kos">]</span> ? <span class="pl-s1">global</span><span class="pl-kos">.</span><span class="pl-c1">__CMS_CONTENT__</span><span class="pl-kos">[</span><span class="pl-s1">contentId</span><span class="pl-kos">]</span> :
          <span class="pl-c1">!</span><span class="pl-s1">global</span><span class="pl-kos">.</span><span class="pl-c1">__CMS_CONTENT__</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-s1">global</span><span class="pl-kos">.</span><span class="pl-c1">document</span> ?
            <span class="pl-c">// FIXME: WTF?</span>
            <span class="pl-s1">global</span><span class="pl-kos">.</span><span class="pl-c1">document</span><span class="pl-kos">.</span><span class="pl-en">querySelector</span><span class="pl-kos">(</span><span class="pl-s">`[data-cms-id="<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">contentId</span><span class="pl-kos">}</span></span>"]`</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-c1">innerHTML</span> :
            <span class="pl-s">`CMS Block ID &lt;strong&gt;<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">contentId</span><span class="pl-kos">}</span></span>&lt;/strong&gt; does not exist.`</span>
      <span class="pl-kos">}</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span><span class="pl-kos">;</span>

    <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">state</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
      <span class="pl-c1">markup</span>: <span class="pl-en">createMarkup</span><span class="pl-kos">(</span><span class="pl-s1">id</span><span class="pl-kos">)</span>
    <span class="pl-kos">}</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>

  <span class="pl-en">shouldComponentUpdate</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos"></span> <span class="pl-kos">{</span>
    <span class="pl-c">// is not called on initial "client-mounting"</span>
    <span class="pl-k">return</span> <span class="pl-c1">false</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>

  <span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-kos">)</span>:<span class="pl-v">Element</span> <span class="pl-kos">{</span>
    <span class="pl-k">const</span> <span class="pl-kos">{</span> className<span class="pl-kos">,</span> id <span class="pl-kos">}</span> <span class="pl-c1">=</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">props</span><span class="pl-kos">;</span>
    <span class="pl-k">return</span> <span class="pl-kos">(</span>
      <span class="pl-c1">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">data-cms-id</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">id</span><span class="pl-kos">}</span> <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">className</span><span class="pl-kos">}</span> <span class="pl-c1">dangerouslySetInnerHTML</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">state</span><span class="pl-kos">.</span><span class="pl-c1">markup</span><span class="pl-kos">}</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></pre></div>
<p dir="auto">I used React 15.1.0.</p>