Error when I declare a variable at the beginning of the class Component in React

Question

I want to know why I put _isMounted=false; at the beginning of myClass appears the following error: "SyntaxError: Unexpected token". I'm following the second answer in this thread: Can't perform a React state update on an unmounted component.

class myClass extends Component {
    _isMounted = false;

    constructor(props) {
        super(props);

        this.state = {
           test: ""
        };
    }
}

Thanks for your help.

This is my code, I was trying the code above to fix the following error " "Can't perform a React state update 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" from the code below:

import React, {Component} from 'react'

const months = ["January", "February", "March", "April", "May", "June", "July", "August"," September", "November", "December"]
const days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]
const usaTime = new Date().toLocaleString("en-US", {timeZone: "America/New_York"})
const d = new Date(usaTime)

export default class DateTime extends React.Component {
    constructor() {
        super()
        this.state = {
            day: d.getDay(),
            month: d.getMonth(),
            date: d.getDate(),
            year: d.getFullYear(),
            time: d.toLocaleTimeString()
        }
        this.countingSecond = this.countingSecond.bind(this)
    }

    countingSecond() {
        this.setState({
            day: d.getDay(),
            month: d.getMonth(),
            date: d.getDate(),
            year: d.getFullYear(),
            time: d.toLocaleTimeString()
        })
    }

    componentDidMount() {
        setInterval(this.countingSecond, 1000)
    }

    componentWillUnmount(){
        // setInterval(this.countingSecond, 1000)
    }

    render() {
        return(
            <div className="timeclock-main">
                <h5>{days[this.state.day] + ', ' + months[this.state.month] + ' ' + this.state.date + ', ' + this.state.year }</h5>
                <h3>{this.state.time}</h3>
            </div>
            )
    }

}

(React stuff aside--you rarely need something like this.) What Babel transformations are you using? — Dave Newton, Jan 09 '20 at 20:26

Piotr Żak · Accepted Answer · 2020-01-10T14:15:49.850

1

From React docs:

If you’re familiar with React class lifecycle methods, you can think of useEffect Hook as componentDidMount, componentDidUpdate, and componentWillUnmount combined.

Is unmounted is antipattern?

To check isMounted = true || false, you can use useRef:

const Test = () => {

const componentIsMounted = useRef(true)
useEffect(() => {
    return () => {
        componentIsMounted.current = false
    }
}, [])
    return (
            <div>
                    test
            </div>
    );
}
export default Test;

Solution You wan't to use is deprecated, but You still can use it like this:

componentDidMount() { 
  this._ismounted = true;
}

componentWillUnmount() {
   this._ismounted = false;
}

Edit - Your working component:

const DateTime = (props) =>{

const initialMonths = ["January", "February", "March", "April", "May", "June", "July", "August"," September", "November", "December"]
const initialDays = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]
const usaTime = new Date().toLocaleString("en-US", {timeZone: "America/New_York"})
const d = new Date(usaTime)

const[days, setDays] = useState(d.getDay())
const[months, setMonths] = useState(d.getMonth())
const[year, setYear] = useState(d.getFullYear())
const[date, setDate] = useState(d.getDate())
const [time, setTime] = useState()

    useEffect(() => { 
        setTime(d.toLocaleTimeString())
        const id = setInterval(() => { setTime(time+1) }, 1000); return () => clearInterval(id); }, [time]
    )
    return (<>
        <h5>{initialDays[days] + ', ' + initialMonths[months] + ' ' + date + ', ' + year }</h5>
        {time}
        </>);
}

export default DateTime;

edited Jan 10 '20 at 14:15

answered Jan 09 '20 at 14:18

Piotr Żak

2,046
5
18
30

How could be if I'm not using UseEffect Hook? – cabita Jan 09 '20 at 18:58
what do you want to achieve? – Piotr Żak Jan 09 '20 at 18:59
I have a component that shows the time. I have a function setInterval in componentDidMount and I need to fix the error: "Can't perform a React state update 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". I looked for fixes and I tried the second answer on this thread: Can't perform a React state update on an unmounted component. Do you understand? – cabita Jan 09 '20 at 20:11
I will understand better when I see the code and how it works - then I will be able to find a solution. – Piotr Żak Jan 09 '20 at 20:16
Did you try adding this._ismounted = true; in componentDidMount? – Piotr Żak Jan 09 '20 at 20:17
I put my code above. With this code appears: "Can't perform a React state update 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" and I was trying to fix it. – cabita Jan 09 '20 at 22:01
can i transform it into hooks? - tomorrow i'ill look – Piotr Żak Jan 09 '20 at 22:01
Yes. You can. Thanks for your help. – cabita Jan 09 '20 at 22:05
Ok, glad to help – Piotr Żak Jan 10 '20 at 16:45

Error when I declare a variable at the beginning of the class Component in React

1 Answers1