We Keep Coding

react native call function from props constructor event listener

I have some event listeners on my props
constructor(props) {
super(props);
Tts.addEventListener("tts-start", event =>
console.log("started"),
this.setState({ ttsStatus: "started" })
//how to call stopTTS
); ...}
so if I have a function outside the constructor
stopTTS() {
console.log("cali");
}
how to call a function when the eventListener gets triggered? cheers

First: If you can, use hooks instead.
A functional component that can do what you want could be:
import React, { useEffect, useState } from 'react'
const Component = () => {
const [ttsStatus, setTtsStatus] = useState('')
const stopTTS = () => {
console.log("cali");
}
// This useEffect will work as a componentDidMount
useEffect(() => {
Tts.addEventListener("tts-start", event => {
console.log("started"),
setTtsStatus("started")
stopTTS() // You can call stopTTS here
})
}, [])
return null
}
export default Component
Try to avoid creating classes, the React Hooks were a new addition in React 16.8. They let you use state and other React features without writing a class, so you can have the power of a class in a cleaner function. You can know more about it in https://reactjs.org/docs/hooks-overview.html

As i mentioned in the comment, you can call the class methods inside constructor like below snippet.
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
}
window.addEventListener('click', (e) => {
if (this.state.count > 4) {
this.alertCount();
}
});
}
alertCount = () => {
alert('count has become 5')
this.setState({
count: 0
})
}
clickHandler = () => {
this.setState({
count: this.state.count + 1
})
}
render() {
return (
<div >
<div>
The count is now {this.state.count}
</div>
<button onClick = {
this.clickHandler
} id = "btn" > Click Me < /button>
</div >
);
}
}
ReactDOM.render( < App / > , document.getElementById('root'))
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Why React doesn't render my result after setState?

Having the below jsx code:
import React, { Component } from 'react';
import RemoteAssets from '../modules/RemoteAssets';
class RemoteOptions extends Component {
constructor(props) {
super(props);
this.state = {
RemoteOptions: []
}
}
componentDidMount() {
const { api, locale } = this.props;
RemoteAssets.loadRemoteOptions({ api, locale }).then((RemoteOptions) => {
console.log( 'RemoteOptions', RemoteOptions);
this.setState((state, props) => ({
RemoteOptions
}), () => {
this.render()
});
})
}
render() {
return (
<div className="row">
<div className="col-4">
<label >Opt: </label>
</div>
<div className=" col-8">
{JSON.stringify(this.state.RemoteOptions)}
</div>
</div>
);
}
}
export default RemoteOptions;
This is what happens to me:
componentDidMount logs correctly the payload expected.
console.log( 'RemoteOptions', RemoteOptions);
So I believe that It will also set State as expected:
this.setState((state, props) => ({
RemoteOptions
}), () => {
this.render()
});
I also added above a this.render() stmt to be sure the component will be re-rendered after updating the state.
But :
{JSON.stringify(this.state.RemoteOptions)}
Will always return "[]" as the init state before componentDidMount happens and update the state.
How should I arrange this component to have my render update the with the payòoad loaded async?

Name conflict
Your state name and class name are in conflict.
class RemoteOptions extends Component { // class name
constructor(props) {
super(props);
this.state = {
RemoteOptions: [] // state name
}
}
...
Call your state something different.

Why not simply using setState the way documentation suggests?
this.setState({ RemoteOptions });
Render method will be automatically called right after the state is set.

I implemented the skeleton of the problem, and everything works as expected.
const loadRemoteOptions = () => new Promise(resolve => {
setTimeout(() => resolve('myRemoteOptions'), 1000)
})
class App extends React.Component {
state = {
remoteOptions: null
}
componentDidMount(){
loadRemoteOptions().then(remoteOptions => this.setState({ remoteOptions }))
}
render(){
return this.state.remoteOptions || 'Loading...';
}
}
ReactDOM.render(<App />, document.getElementById('root'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

setTimeout not fully cancelled before component unmounts

Warning: Can't call setState (or forceUpdate) on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
Why am I still getting an error about setting state in an unmounted component? In the error trace it points to the setTimeout in foo(). I clear my async timer and also add a check before I perform my api call - I don't see where this warning is coming from.
componentDidMount() {
this.setState({alive: true});
this.foo();
}
componentWillUnmount() {
this.setState({alive: false, timer: 0});
}
foo() {
if (!this.state.alive) return;
fetch('/api/etc/', {method: 'GET', headers: {'Cache-Control': 'no-cache'}})
.then(res => res.json())
.then(json => {
if (!json.length) return;
this.setState((prevState) => ({
timer: setTimeout(this.foo.bind(this), 500)
});
});
}

* Updated Answer & also Function Component version with React Hooks *
As Evan Trimboli pointed out in the comment below, there is no need to store the timeout ID in the state as it doesn't impact rendering.
So store the timeout ID in the class instance and use it to clear timeout in componentWillUnmount.
Run the code below to see it in action
Class Component version (prior to, not including v16.8.0)
class TodoApp extends React.Component {
timeout = 0;
hello = () => console.log("hello world!")
componentDidMount() {
this.timeout = setTimeout(this.hello, 500);
}
componentWillUnmount() {
clearTimeout(this.timeout);
}
render() {
return (
<div>demo</div>
)
}
}
ReactDOM.render(<TodoApp />, document.querySelector("#app"))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>
Function Component version with a Hook (possible since v16.8.0)
React.useEffect let's you put a setup & teardown logic in a same block.
const TodoApp = () => {
const hello = () => console.log("hello world!")
React.useEffect(() => {
const timeout = setTimeout(hello, 500);
return () => clearTimeout(timeout);
});
return (
<div>demo</div>
)
}
ReactDOM.render(<TodoApp />, document.querySelector("#app"))
<script src="https://unpkg.com/react#16.8.4/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom#16.8.4/umd/react-dom.production.min.js"></script>
<div id="app"></div>
Old Answer (using State to store timeout ID).
Store the timeout ID in the state, and use that to clear out the timeout in componentWillUnmount.
class TodoApp extends React.Component {
constructor(props) {
super(props)
this.state = {
timeout: null
}
this.hello = this.hello.bind(this);
}
hello() { console.log("hello world!"); }
componentDidMount() {
const timeout = setTimeout(this.hello, 500);
this.setState({timeout});
}
componentWillUnmount() {
clearTimeout(this.state.timeout);
}
render() {
return (
<div>demo</div>
)
}
}
ReactDOM.render(<TodoApp />, document.querySelector("#app"))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

Calling setState on an unmounted component

In a lot of my components I need to do something like this:
handleSubmit() {
this.setState({loading: true})
someAsyncFunc()
.then(() => {
return this.props.onSuccess()
})
.finally(() => this.setState({loading: false}))
}
The onSuccess function
may or may not be a promise (if it is, loading should stay true until it is resolved)
may or may not unmount the component (it may close the modal this component is in or even navigate to different page)
If the function unmounts the component, this.setState({loading: false}) obviously triggers a warning Can't call setState (or forceUpdate) on an unmounted component.
My 2 questions:
Is there a simple way to avoid the issue ? I don't want to set some _isMounted variable in componentDidMount and componentWillUnmount and then check it when needed in most of my components, plus I may forget to do it next time writing something like this ...
Is it really a problem ? I know that, according to the warning, it indicates a memory leak in my application, but it is not a memory leak in this case, is it ? Maybe ignoring the warning would be ok ...
EDIT: The second question is a little bit more important for me than the first. If this really is a problem and I just can't call setState on unmounted component, I'd probably find some workaround myself. But I am curious if I can't just ignore it.
Live example of the problem:
const someAsyncFunc = () => new Promise(resolve => {
setTimeout(() => {
console.log("someAsyncFunc resolving");
resolve("done");
}, 2000);
});
class Example extends React.Component {
constructor(...args) {
super(...args);
this.state = {loading: false};
}
componentDidMount() {
setTimeout(() => this.handleSubmit(), 100);
}
handleSubmit() {
this.setState({loading: true})
someAsyncFunc()
/*
.then(() => {
return this.props.onSuccess()
})
*/
.finally(() => this.setState({loading: false}))
}
render() {
return <div>{String(this.state.loading)}</div>;
}
}
class Wrapper extends React.Component {
constructor(props, ...rest) {
super(props, ...rest);
this.state = {
children: props.children
};
}
componentDidMount() {
setTimeout(() => {
console.log("removing");
this.setState({children: []});
}, 1500)
}
render() {
return <div>{this.state.children}</div>;
}
}
ReactDOM.render(
<Wrapper>
<Example />
</Wrapper>,
document.getElementById("root")
);
.as-console-wrapper {
max-height: 100% !important;
}
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>

Unfortunately you have to keep track of "isMounted" yourself.
To simplify you control flow you could use async/await:
handleSubmit() {
this.setState({loading: true})
try {
await someAsyncFunction()
await this.props.onSuccess()
} finally {
if (this._isMounted) {
this.setState({loading: false})
}
}
}
This is actually mentioned in the react docs, which points to this solution: https://gist.github.com/bvaughn/982ab689a41097237f6e9860db7ca8d6
If your someAsyncFunction supports cancelation, you should do so in componentWillUnmount, as encouraged by this article. But then - of course - check the return value and eventually not call this.props.onSuccess.

class myClass extends Component {
_isMounted = false;
constructor(props) {
super(props);
this.state = {
data: [],
};
}
componentDidMount() {
this._isMounted = true;
this._getData();
}
componentWillUnmount() {
this._isMounted = false;
}
_getData() {
axios.get('example.com').then(data => {
if (this._isMounted) {
this.setState({ data })
}
});
}
render() {
...
}
}

You should be able to use this._isMounted to check if the component is actually mounted.
handleSubmit() {
this.setState({loading: true})
someAsyncFunc()
.then(() => {
return this.props.onSuccess()
})
.finally(() => {
if (this && this._isMounted) { // check if component is still mounted
this.setState({loading: false})
}
})
}
But be aware that this approach is considered to be an anitpattern. https://reactjs.org/blog/2015/12/16/ismounted-antipattern.html

What about
componentWillUnmount() {
// Assign this.setState to empty function to avoid console warning
// when this.setState is called on an unmounted component
this.setState = () => undefined;
}

React. getTime() function does not update the state

I' trying to update the state of the component Demoss by external function getTime(). I want to start update the time in the state time on the page load. And to make it real, I have invoke it in the componentDidMount. But for some reasons it does not happen.
import React from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import './index.css';
function getTime() {
let a = setInterval(() =>
{new Date()}, 1000
);
return a;
}
class Demoss extends React.Component {
constructor(props) {
super(props);
this.state = {
time: '',
timer: false
};
this.handleClick = this.handleClick.bind(this);
}
componentDidMount() {
this.setState({
time: getTime() // invoke setInterval state update, but it does not work
});
}
componentWillUnmount() {
clearInterval(getTime());
}
handleClick() {
this.setState(prevState => ({
timer: !prevState.timer
}));
if (this.state.timer === false) {
clearInterval(this.timerId);
} else if (this.state.timer === true) {
}
}
render() {
return (
<div>
<p>{this.state.time.toString()}</p>
<button onClick={this.handleClick}><Dimes timer={this.state.timer}/></button>
</div>
);
}
}
class Dimes extends React.Component {
render() {
if (this.props.timer === true) {
return (
<React.Fragment>
Start timer again!
</React.Fragment>
);
} else {
return (
<React.Fragment>
Start timer!
</React.Fragment>
);
}
}
}
ReactDOM.render(
<Demoss />,
document.getElementById('root'));

You have some errors in your code so i rewrote it.
import React from "react";
import ReactDOM from "react-dom";
import PropTypes from "prop-types";
class Demoss extends React.Component {
constructor(props) {
super(props);
this.state = {
start_time: new Date(),
now_time: new Date(),
timer: false
};
this.handleClick = this.handleClick.bind(this);
this.timer = this.timer.bind(this);
}
componentDidMount() {
setInterval(this.timer, 1000);
}
componentWillUnmount() {
// use intervalId from the state to clear the interval
clearInterval(this.state.intervalId);
}
handleClick() {
const state = this.state;
state.start_time = new Date();
state.now_time = new Date();
if(!this.state.timer)
state.timer = true;
this.setState(state);
}
timer() {
if(this.state.timer)
this.setState({ now_time : new Date()});
}
render() {
const getTimeDiff = (start_time, now_time) => {
return Math.round((now_time.getTime() - start_time.getTime()) / 1000);
};
return (
<div>
<p>{getTimeDiff(this.state.start_time, this.state.now_time)}</p>
<Dimes handleClick={this.handleClick} timer={this.state.timer} />
</div>
);
}
}
class Dimes extends React.Component {
render() {
const renderButtonText = timer => {
let text = "Start timer";
if (timer) text += " again!";
else text += "!";
return text;
};
return (
<button onClick={this.props.handleClick}>
{renderButtonText(this.props.timer)}
</button>
);
}
}
ReactDOM.render(<Demoss />, document.getElementById("root"));

by doing the following change it will update the time and re-render the component.
let timeTicker = (self)=> {self.setState({
time:new Date().toString()
});}
class Demoss extends React.Component {
componentDidMount(){
let timer=setInterval(()=>timeTicker(this),1000);
this.setState({timer:timer});
// keep the setInterval reference in state just so you can call clearInterval on this on `componentWillUnmount` hook
}
componentWillUnmount(){
clearInterval(this.state.timer);
}
}
new Date().toString() just to test I convert the date to string but you have to format it as a string before render I think.
I did omit handleClick func you can figure it out