One common use case is a component wanting to update itself on a time interval. It’s easy to use setInterval(), but it’s important to cancel your interval when you don’t need it anymore to save memory. React provides lifecycle methods that let you know when a component is about to be created or destroyed. Let’s create a simple mixin that uses these methods to provide an easy setInterval() function that will automatically get cleaned up when your component is destroyed.

var SetIntervalMixin = {
  componentWillMount: function() {
    this.intervals = [];
  },
  setInterval: function() {
    this.intervals.push(setInterval.apply(null, arguments));
  },
  componentWillUnmount: function() {
    this.intervals.forEach(clearInterval);
  }
};

var createReactClass = require('create-react-class');

var TickTock = createReactClass({
  mixins: [SetIntervalMixin], // Use the mixin
  getInitialState: function() {
    return {seconds: 0};
  },
  componentDidMount: function() {
    this.setInterval(this.tick, 1000); // Call a method on the mixin
  },
  tick: function() {
    this.setState({seconds: this.state.seconds + 1});
  },
  render: function() {
    return (
      <p>
        React has been running for {this.state.seconds} seconds.
      </p>
    );
  }
});

ReactDOM.render(
  <TickTock />,
  document.getElementById('example')
);

To use the mixin, just import that on its own. From the docs: https://facebook.github.io/react/docs/two-way-binding-helpers.html#reactlink-without-valuelink


import LinkedStateMixin from 'react-addons-linked-state-mixin'

You will need to use History module and then make use of listenBefore():


history.listenBefore(function (location) {
  if (input.value !== '') {
    return 'Are you sure you want to leave this page?'
  }
})

Recommend

React Without ES6 Autobinding

React Without ES6 Setting the Initial State

React Without ES6 Declaring Default Props

React Without ES6

React Babel, JSX, and Build Steps How can I write comments in JSX?

React Styling and CSS How do I add CSS classes to components?

React JSX In Depth Children in JSX Booleans, Null, and Undefined Are Ignored

React JSX In Depth Children in JSX Functions as Children

React JSX In Depth Children in JSX JavaScript Expressions as Children

React JSX In Depth Children in JSX JSX Children

React JSX In Depth Children in JSX String Literals

React JSX In Depth Props in JSX Spread Attributes

React JSX In Depth Props in JSX Props Default to “True”

React JSX In Depth Props in JSX String Literals

React JSX In Depth Props in JSX JavaScript Expressions as Props

JSX In Depth Specifying The React Element Type Choosing the Type at Runtime

JSX In Depth Specifying The React Element Type User-Defined Components Must Be Capitalized

JSX In Depth Specifying The React Element Type Using Dot Notation for JSX Type

JSX In Depth Specifying The React Element Type React Must Be in Scope

React JSX In Depth

React Reconciliation The Diffing Algorithm Keys

React Reconciliation The Diffing Algorithm Recursing On Children

React Reconciliation The Diffing Algorithm DOM Elements Of The Same Type

React Reconciliation The Diffing Algorithm Elements Of Different Types

React Legacy Context How To Use Context Updating Context

React Legacy Context How To Use Context Referencing Context in Function Components

React Legacy Context How To Use Context Parent-Child Coupling

React Legacy Context How To Use Context

React How to Contribute Development Workflow

React Event Pooling

React Static Type Checking TypeScript Type Definitions

React Static Type Checking TypeScript Running TypeScript

React Static Type Checking TypeScript Configuring the TypeScript Compiler

React Static Type Checking TypeScript Adding TypeScript to a Project

Static Type Checking TypeScript Using TypeScript with Create React App

React Static Type Checking Flow Adding Flow Type Annotations

React Static Type Checking Flow Running Flow

React Static Type Checking Flow Stripping Flow Syntax from the Compiled Code Babel

React Static Type Checking Flow Adding Flow to a Project

Web Components Using React in your Web Components

Web Components Using Web Components in React

React Context Caveats

React Context Examples Consuming Multiple Contexts

React Context Examples Updating Context from a Nested Component

React Context Examples Dynamic Context

React Context API Context.displayName

React Context API Context.Consumer

React Context API Class.contextType

React Context API Context.Provider

Context API React.createContext

React Context Before You Use Context

React Context When to Use Context

React JavaScript Environment Requirements

React Error Boundaries How About Event Handlers?

React Error Boundaries How About try/catch?

React Error Boundaries Introducing Error Boundaries