Hooks predecesors

mixin.js

import React from "react";

var MyMixin = {
  componentDidUpdate() {
    this.componentMethod()
  },
  mixinMethod() {}
};

const MyComponent = React.createClass({
  // Implicitly implements componentDidUpdate and
  // requires this component to implement componentMethod
  mixins: [MyMixin],
  handleClick() {
    this.mixinMethod(); // Invoke mixin's method
  },
  componentMethod() {},
  render() {
    return (
      <button onClick={this.handleClick}>Do Something</button>
    );
  }
});

nestedRenderProps.js

import React from "react";
import {DataFetcher, Actions, Translations, Styles} from "xyz"

const myForm = () => (
  <DataFetcher>
    {(data) => (
      <Actions>
        {(actions) => (
          <Translations>
            {(translations) => (
              <Styles>
                {(styles) => (
                  <form styles={styles}>
                    <input value={data.value}/>
                    <button onClick={actions.submit}>
                      {translations.submitText}
                    </button>
                  </form>
                )}
              </Styles>
            )}
            </Translations>
        )}
        </Actions>
    )}
  </DataFetcher>
)