New & Upcoming React State-less Components

I’m really looking forward to these after my recent stint with functional programming and the Elm language (React, Redux, and Angular 2 are inspired from this).

These will be very useful for simple components! I can imagine that most all of the components in my app could use this and a ‘controller-view’ that handles state would use regular React classes (I rarely use lifecycle methods outside of flux).


```javascript // A simple component, that isn't stateful, can be provided as a single // function that accepts props. This provides React with a hint that this // component can be collapsed and that its state doesn't need to be preserved. // It also encourages micro-componentization instead of custom helper functions // outside the system. export function Button(props) { return (
Fancy button
); }

// When named exports are used, it may be valid to have multiple components
// in the same file. Destructuring can be used to provide convenience aliasing
// and defaults to props.
export function Checkbox({ checked = true, width }) {
return (


Fancy checkbox
<input type=“checkbox” checked={checked} style={{ width }} />

);
}

More info:    
  https://github.com/reactjs/react-future/blob/master/01%20-%20Core/03%20-%20Stateless%20Functions.js
3 Likes