Timers in React Native (this.setTimeout)

Question

I'm trying to set up a TimeOut function in my component. To my understanding, just using setTimeout as you would for the web isn't a proper answer. It would cause timing and leak memory issue.

I've read there is an existing Timers API in react-native.

However, it is not compliant with ES6, i quote :

Keep in mind that if you use ES6 classes for your React components there is no built-in API for mixins. To use TimerMixin with ES6 classes, we recommend react-mixin.

And on react-mixin, we find this message :

Note: mixins are basically dead. Only use this as a migration path for legacy code. Prefer High Order Components.

So my final question is : How do we properly use timers (setTimeOut), with react-native, in 2017 ?

Answer 1

For the sake of also adding what it would look like with functional component and hooks.

import React, { useEffect } from 'react'
import { Text } from 'react-native'

const Component = props => {

    useEffect(() => {
        let timer = setInterval(() => console.log('fire!'), 1000);

        return () => clearInterval(timer)
    }, [])

    return <Text>Example of using setInterval with hooks</Text>
}