React useEffect definition in class

Question

I am trying to set useEffect hook (for listening to route changes) in my class that is defined like -

export default class AppManger extends Component{
    //constructor
    //componentWillMount
    //reneder
    //...
}

The rest of my hooks are defined and working as expected but when I try to define useEffect-

useEffect(() => {
        const { pathname } = location;
        console.log('New path:', pathname);
    }, [location.pathname]);

I get - ./src/components/AppManger.js

  Line 30:  Parsing error: Unexpected token

  28 |         }
  29 |     }
> 30 |     useEffect(() => {
     |               ^
  31 |         const { pathname } = location;
  32 |         console.log('New path:', pathname);
  33 |     }, [location.pathname]);

Is it the right way to define arrow function in React component?

Thank you.

butt I use componentWillMount in my class component. I need to listen to route changes. — Itsik Mauyhas, May 20 '20 at 10:04
that isn't a hook, it's a class component lifecycle function — Will Jenkins, May 20 '20 at 10:04

score 0 · Answer 1 · answered May 20 '20 at 10:05

0

No, my friend, you can not use hooks inside class components, To use you have to convert class component to functional component. Like this :

import React from "react";

export default AppManger = () => {
    useEffect(() => {
        const { pathname } = location;
        console.log('New path:', pathname);
    }, [location.pathname]);
}

answered May 20 '20 at 10:05

JIGNESH PATEL

367
4
17

I am looking for a way to listen to route change without changing my component. – Itsik Mauyhas May 20 '20 at 10:13
Okay, Would you please check this solution : https://stackoverflow.com/questions/45373742/detect-route-change-with-react-router – JIGNESH PATEL May 20 '20 at 15:26

score 0 · Answer 2 · answered May 20 '20 at 10:07

0

useEffect and all other hooks can be used only in functional components. In your class component you should use lifecycle methods. Here is more info: 1) https://reactjs.org/docs/state-and-lifecycle.html - lifecycle methods 2) https://reactjs.org/docs/hooks-intro.html - hooks

answered May 20 '20 at 10:07

aconite.io

112
8

And which lifecycle method will notify when route changes? – Itsik Mauyhas May 20 '20 at 10:13
sounds like you might need to ask a new question – Will Jenkins May 20 '20 at 13:05

React useEffect definition in class

2 Answers2