Refluent vs standard React comparison

refluent.jsx

import * as React from 'react';
import refluent, { branch } from 'refluent';

const Hover = refluent.do((_, push) => ({
  hoverProps: {
    onMouseMove: () => push({ isHovered: true }),
    onMouseLeave: () => push({ isHovered: false }),
  },
  isHovered: false,
}));

export default refluent
  .do('initial', (initial = '', push) => ({
    value: initial,
    onChange: value => push({ value }),
  }))
  .do((props$, _) => ({
    submit: () => {
      const { submit, value } = props$();
      if (value.length < 100) submit();
    },
  }))
  .yield(
    branch(
      ({ withButton }) => withButton,
      refluent
        .yield(Hover)
        .do('isHovered', isHovered => ({
          background: isHovered ? 'red' : 'orange',
        }))
        .yield(({ submit, hoverProps, background, next }) => (
          <div>
            {next()}
            <p onClick={submit} {...hoverProps} style={{ background }}>
              Submit
            </p>
          </div>
        )),
    ),
  )
  .do((props$, _) => ({
    onKeyDown: e => {
      const { submit } = props$();
      if (e.keyCode === 13) submit();
    },
  }))
  .yield(({ value, onChange, onKeyDown }) => (
    <input
      type="text"
      value={value}
      onChange={onChange}
      onKeyDown={onKeyDown}
    />
  ));

standard.jsx

import * as React from 'react';

class InputInner extends React.Component {
  onKeyDown = e => {
    if (e.keyCode === 13) this.props.submit();
  };
  render() {
    return (
      <input
        type="text"
        value={this.props.value}
        onChange={this.props.onChange}
        onKeyDown={this.onKeyDown}
      />
    );
  }
}

const withHover = Comp =>
  class WithHover extends React.Component {
    state = {
      isHovered: false,
    };
    onMouseMove = () => this.setState({ isHovered: true });
    onMouseLeave = () => this.setState({ isHovered: false });
    render() {
      return React.createElement(Comp, {
        hoverProps: {
          onMouseMove: this.onMouseMove,
          onMouseMove: this.onMouseLeave,
        },
        isHovered: this.state.isHovered,
      });
    }
  };

const Button = ({ value, onChange, submit, hoverProps, isHovered }) => (
  <div>
    <InputInner value={value} onChange={onChange} submit={submit} />
    <p
      onClick={submit}
      {...hoverProps}
      style={{ background: isHovered ? 'red' : 'orange' }}
    >
      Submit
    </p>
  </div>
);

const HoverButton = withHover(Button);

export default class ShortInput extends React.Component {
  state = {
    value: this.props.initial || '',
  };
  onChange = value => this.setState({ value });
  submit = () => {
    if (this.state.value.length < 100) this.props.submit();
  };
  render() {
    return this.props.withButton ? (
      <HoverButton
        value={this.props.value}
        onChange={this.props.onChange}
        submit={this.props.submit}
      />
    ) : (
      <InputInner
        value={this.props.value}
        onChange={this.props.onChange}
        submit={this.props.submit}
      />
    );
  }
}