CODEWITHSUNDEEP
javascriptnode.jsreactjssetinterval
Alchemist
Alchemist

Reputation: 385

How can I clear Interval in React?

I am using setInterval on react redux. Below is my function.

FileAction.js

export const SetPath = ({ path, location }) => async (dispatch) => {
    try {
        let interval;
        if (pre_path === path) {
            interval = setInterval(() => {
                handler(path);
            }, 3000);
        } else {
            pre_path = path;
            clearInterval(interval);
        }

        const handler = async (pth) => {
            const mtime = await axios.post('/api/file', { data: pth });
            dispatch({
                type: GET_EVENT,
                payload: { time: mtime, position: location }
            });
        }
    } catch (err) {
        dispatch({
            type: GET_ERROR
        });
    }
};

What I would like to do is when I call SetPath function, it have to fetch data from api/file every 3 secs.

But now when I pass another path to SetPath function, it dulicate interval.

How can I implement this?

Upvotes: 1

Views: 186

Answers (1)

Zeno Dalla Valle
Zeno Dalla Valle

Reputation: 919

You are defining the interval variable inside setPath function, therefore the variable will be reinitialized everytime setPath is executed. Try defining it outside the function. You may need to use useRef in order to not lose the variable when a re-render occurs.

Upvotes: 2

Related Questions