Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Pure, stateless, type-checked React components with Immutable.js and Flow
/* @flow */
var React = require("react")
var Immutable = require("immutable")
// In order to use any type as props, including Immutable objects, we
// wrap our prop type as the sole "data" key passed as props.
type Component<P> = ReactClass<{},{ data: P },{}>
type Element = ReactElement<any, any, any>
// Our componenets are truly a function of props, and immutability is
// assumed. This discipline is a feature, not a bug.
function component<P>(render: (props: P) => Element): Component<P> {
return (React.createClass({
shouldComponentUpdate(props) {
return !,
render() {
return render(( : any))
}) : any)
// Defining components couldn't be simpler.
var Example: Component<string> = component((foo) => {
return <span>{foo}</span>
// In order to use JSX, we need to pass our props as `data`, but flow
// will still type check this for us.
var foo = <Example data={"bar"} />
Copy link

nmn commented Apr 19, 2015

good stuff.

Copy link

kolman commented Apr 21, 2015

How would you pass callbacks?

Copy link

railsnerd commented Apr 22, 2015

Ah yeah callbacks scratches head

Copy link

samwgoldman commented Apr 22, 2015

@kolman @railsnerd I don't understand the question. You just pass the callback as props. Flow can type functions, too.

Copy link

kahwee commented Apr 25, 2015

Is this in Typescript?

How did your props in React become Immutable objects? Is this an automatic thing?

Thanks for this example!

Copy link

rclai commented Feb 4, 2016

@kahwee you have to pass them as Immutable objects already.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment