React: MountedComponent

This is a React helper to handle state safely.

Setting a state is an asynchronous operation in React. Frequently warnings are issued when React is rebuilding its DOM tree and custom components still update state. A component cannot update its state while being unmounted. MountedComponent collects state updates while being unmounted and sets them as soon as it is mounted.

MountedComponent does not have any special API and usually used as a base class for a React component.

Example:

import CustomEventHandler from '@researchnow/reno/dist/react/CustomEventHandler';
import MountedComponent from '@researchnow/reno/dist/react/MountedComponent';

class MyComponent extends MountedComponent {
  // ...

  render () {
    return (
      <CustomEventHandler
        className={this.props.hidden ? 'hidden' : ''}
        onRenoTableItemSelected={e => alert(e.detail.item.id)}
        onRenoTableDataUpdated={e => alert(e.detail.total)}
      >
        <reno-table
          ref={this.setupTable}
          url={config.nickelback.clientSearch}
          fields="name,location,-loc"
          limit="10"
          sort="name"
          filter={this.props.searchText}
        ></reno-table>
      </CustomEventHandler>
    );
  }
}