Issue 1:
Do you want to request a feature or report a bug?

Feature / use case

What is the current behavior?

It seems currently there is no way to get the order of children from the children themselves with context.

What is the expected behavior?

I've run into this now in three use cases when building a style system: Breadcrumbs, Segmented views, and Text rhythm/spacing.

Example 1, breadcrumbs. You want to show an arrow on all but the last breadcrumb, but they may be deeply nested:

let BreadcrumbOrder = createContext({ index: -1, total: -1 })

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

let MyView = () => {
return (
<BreadcrumbProvider>
<Button />
<Button />
<div><Button /></div>
</BreadcrumbProvider>
)
}

Where MyView should provide the ordering so that the sub-views can access total and index and properly style.

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.

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?

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.

Issue 2:
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).

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.

<Root>
<ComponentA/>
<CmsBlock id="staticMarkupId"/>
<ComponentB/>
</Root>

To prevent the HTML to be exposed twice, I will provide the information only on the server side.

The HTML can be quite big, and I don't want to have them on the client site again.

Right now, I don't see a way to tell react, to prevent calling the render method on a component again.

What I did, is this ugly workaround (react complains about a checksum mismatch though):

/**
* @flow
*/

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

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

type State = {
markup:Object
}

export default class CmsBlock extends Component<void, Props, State> {

props:Props;

state:State;

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

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

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

render():Element {
const { className, id } = this.props;
return (
<div data-cms-id={id} className={className} dangerouslySetInnerHTML={this.state.markup}/>
);
}
}

I used React 15.1.0.