Pure, stateless, type-checked React components with Immutable.js and Flow

example.js

/* @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 !Immutable.is(this.props.data, props.data)
    },
    render() {
      return render((this.props.data : 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"} />

good stuff.

How would you pass callbacks?

Ah yeah callbacks scratches head

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

Is this in Typescript?

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

Thanks for this example!

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