Socket
Socket
Sign inDemoInstall

react-timeout

Package Overview
Dependencies
2
Maintainers
1
Versions
13
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-timeout

HOC for React and React Native providing versions of setTimeout etc. that cancels when unmounted.


Version published
Maintainers
1
Weekly downloads
12,223
increased by10.3%

Weekly downloads

Readme

Source

React Timeout

Greenkeeper badge travis build npm version

Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op.

Warning: Can only update a mounted or mounting component. This usually means you called setState, replaceState, or forceUpdate on an unmounted component. This is a no-op.

Seeing a lot of the above? If so this might be useful!

React Timeout is a higher order component for React and React Native providing the wrapped component with safe versions of

SetClear
setTimeoutclearTimeout
setIntervalclearInterval
setImmediateclearImmediate
requestAnimationFramecancelAnimationFrame

When the wrapped component is unmounted, any lingering timers will be canceled automatically.

Installation

npm install --save react-timeout

Version Compatibility

ReactReact Timeout
16.3+2+
<16.31.x

Usage

React / React Native

import ReactTimeout from 'react-timeout'

Examples

ES6 Classes - "The Light Switch"

The component simulates a light switch. It has a state on which is true or false. When the button is clicked it waits 5000ms before switching the on state.

import React from 'react'
import ReactTimeout from 'react-timeout'

class LightSwitchExample extends React.Component {
  state = {
    on: false
  }
  toggle = () => {
    this.setState({ on: !this.state.on })
  }
  handleClick = (e) => {
    this.props.setTimeout(this.toggle, 5000) // call the `toggle` function after 5000ms
  }
  render () {
    return (
      <div style={{ backgroundColor: (this.state.on ? 'yellow' : 'gray') }}>
        <button onClick={this.handleClick}>Click me!</button>
      </div>
    )
  }
}
export default ReactTimeout(LightSwitchExample)

If the component is unmounted before the 5000ms is up, the timeout is canceled by ReactTimeout.

Had we just called the regular old setTimeout, the callback toggle would still fire and try setting the state of an unmounted component.

Functional Stateless Components

const Example = (props) => {
  return (
    <button
      onClick={() => props.setTimeout(..)}>Click me!</button>
  )
}
export default ReactTimeout(Example)

With Annotations

@ReactTimeout
class Example extends React.Component {
  render () {
    return (
      <button
        onClick={() => this.props.setTimeout(..)}>Click me!</button>
    )
  }
}

Accessing the wrapped instance

You can access the wrapped instance using React.createRef from version 2+.

If you're using version 1.x you can access the wrapped instance with component.getWrappedInstance().

Something similar

react-timer-mixin

The timer mixin recommended by the react-native docs.

React Native 0.17 and below

Only supported by version 1.x.

If you're using a version of React Native that is 0.17 or below you have to import from the /native namespace.

import ReactTimeout from 'react-timeout/native' // only for react-native 0.17 or below

Keywords

FAQs

Last updated on 11 Jan 2021

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc