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
– Dave Newton, Commented Jan 9, 2020 at 20:26

Piotr Żak · Accepted Answer · 2020-01-10 14:15:49Z

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, 2020 at 14:15

answered Jan 9, 2020 at 14:18

Piotr Żak

2,1426 gold badges21 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

cabita Over a year ago

How could be if I'm not using UseEffect Hook?

Piotr Żak Over a year ago

what do you want to achieve?

cabita Over a year ago

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?

Piotr Żak Over a year ago

I will understand better when I see the code and how it works - then I will be able to find a solution.

Piotr Żak Over a year ago

Did you try adding this._ismounted = true; in componentDidMount?

|

Collectives™ on Stack Overflow

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

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related