reason-react

ReasonReact

Come join us in Discord!

npm install --save reason-react

Usage

See https://github.com/reasonml-community/reason-react-example

Documentation

See https://reasonml.github.io/reason-react/

Contribute

git clone https://github.com/reasonml/reason-react.git
cd reason-react
npm install
npm start

Then add some files somewhere (don't forget to change bsconfig.json, if needed).

See the README inside src for more info!

Changelog

0.2.4

Major update, but again with no breaking changes, and again with a convenience migration script! =)

The big change in this release is the deprecation of statefulComponent and statefulComponentWithRetainedProps. statelessComponent stays the same.

Prerequisites

Please first read the blog post.

After reading this migration guide, use the migration script (or not) like so: node node_modules/reason-react/migrate/from02xTo024.js myReasonFile.re.

Migrate From StatefulComponent to ReducerComponent

There's no more need for ReasonReact.statefulComponent. Every state change is now controlled through a dedicated, centralized, react-fiber-ready, component-local mechanism called "reducer" (aka, the hype word for "state machine").

Reason-react-example is updated too. Go check the examples afterward!

In short:

• Replace all ReasonReact.statefulComponent with ReasonReact.reducerComponent.
• Replace e.g. self.update handleClick (where handleClick is fun self => ReasonReact.Update {...self.state, foo: bar}) with self.reduce (fun _ => Click). Click is just a variant constructor you've defined. Let's call it "action".
• Add a reducer function to the body of your ...component spread:

reducer: fun action state =>
  switch action {
  | Click => ReasonReact.Update {...state, foo: bar}
  }

We've also exposed new ReasonReact.SideEffects (aka ReasonReact.NoUpdate, with side-effect) and ReasonReact.UpdateWithSideEffects (ReasonReact.Update + side-effect).

The relevant section on actions, reducers and the new update additions are in the main docs.

If everything goes alright, we will be deprecating statefulComponent in the future

InstanceVars/React Ref Usage Changed

Before, we used to recommend using ReasonReact.SilentUpdate to deal with ReactJS' instance variables pattern (e.g. attaching properties onto the component class itself, like timer IDs, subscriptions, refs, etc.). Now we've moved to using a Reason ref cell (not the React ref, the mutative Reason ref). See the updated instance variables section.

The new recommendation also solves a corner-case bug with assigning more than one refs in the render.

LifeCycle: Future didMount and willReceiveProps Signature Change

The future ReactJS Fiber in ReasonReact won't work well with lifecycle events that return the new state, aka:

• didMount's ReasonReact.Update {...state, foo: bar}
• willReceiveProps state.

Please return ReasonReact.NoUpdate for the former (can't do much for the latter, willReceiveProps, for now. Keep it as it is). If you really need to trigger a state change, before the return, use a self.reduce (fun () => Bar) (), aka immediately apply a reduce.

We will make all lifecycles return unit in the future; it'll be an easy codemod to change ReasonReact.NoUpdate to nothing.

Miscellaneous Changes

• Add defaultChecked, loop and others to DOM attribute (#29, #37, #44, #50).
• Fix cloneElement binding (#49).
• Fix stateless components's willReceiveProps's return value. It's now unit again.
• Fix wrong version of retainedProps in willReceiveProps.
• Remove the dependency on create-react-class. Now we're back to being dependency-free!
• Bump react/react-dom to 16.
• React/react-dom are now dependencies, rather than peerDependencies. This follows the Reason/BS idiom of making the bound library an implementation detail. NPM/Yarn will still dedupe multiple versions of react/react-dom correctly; no worries about that.

Enjoy!