Adding a the "adopt" keyword to the JSX syntax

// I'm suggesting we add a new "adopt X from " syntax to the JSX language // it would de-sugar to render prop children, but look and read better than // what we currently have. For example:

// 1. // this sugar function MyComponent(props) { adopt foo from ; return

; }

// compiles to function MyComponent(props) { return {foo =>

} }

// 2. // with the new context API without sugar const ThemeContext = React.createContext('light');

class Title extends React.Component { render() { return ( <ThemeContext.Consumer> {theme => ( <h1 style={{color: theme === 'light' ? '#000' : '#fff'}}> {this.props.children} )} </ThemeContext.Consumer> ); } }

// with "adopt" sugar const ThemeContext = React.createContext('light');

class Title extends React.Component { render() { adopt theme from <ThemeContext.Consumer />; return ( <h1 style={{color: theme === 'light' ? '#000' : '#fff'}}> {this.props.children} ); } }

// 3. // how we might handle state without classes const State = React.createState({ title: "", });

class Title extends React.Component { render() { adopt { state } from <State initialState={() => ({ return { title: this.props.title || "Hello world" }; })} deriveStateFromProps={state => { // ... }} shouldUpdate={state => { // ... }} didMount={state => { // ... }} didUpdate={state => { // ... }} willUnmount={state => { // ... }} />; return

} }

// 4. // how we might handle state without classes and need refs const State = React.createState({ divRef: null, });

class Title extends React.Component { render() { adopt { state } from <State initialState={() => ({ divRef: React.createRef(), })} didMount={state => { state.divRef.value.focus(); }} />; return } }