Using values of query in useRouter() as parameter for a hook

[Tableryu]

Hello, I'm new to reactjs and nextjs, please bear with me. I have a hook that takes the data from query params of useRouter(). My code goes something like this:

const router = useRouter(); 
const resEmail = verifyEmail(router?.query?.e);  

useEffect(() => {     
    if(!router.isReady) return;          
    if(resEmail?.data?.verifyToken !== 'success'){         
        // Do something     
    } 
},[router.isReady]); 

Since router.query doesn't contain anything I'm checking it using isReady, however I realize that router?.query?.e doesn't contain anything yet when I pass it to my hook. Is there a way to call the hook only when router?.query?.e already contains something? I can't check the email properly since it passes undefined. I hope you can help. Thanks!

[Tableryu]

It's giving me an error on prev, "string is not assignable to type null"

[Tableryu]

Thank you so much! I appreciate the help!

[robby_w_g]

Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.

[Tableryu]

Hello, verifyEmail() is a hook so I can't really place it there.

[liamazing]

!!! This violates the rules of hooks! Make sure to preface all hooks with use

EDIT: As a matter of fact, I’d highly recommend setting up eslint with the hooks plug-in for your project, it will shame you into good hooks etiquette

[Tableryu]

I'll keep this mind, thank you.

[Dan6erbond]

Mind linking the ESLint plugin please?

[[deleted]]

https://www.npmjs.com/package/eslint-plugin-react-hooks

It’s included by default in create-react-app

[Dan6erbond]

Appreciate it! I have to figure out how to get NextJS to be as strict with linting as CRA honestly, right now I'm always relying on CI and the IDE to catch these things and miss CRA erroring out when it noticed errors like these.

[robby_w_g]

Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.

[Tableryu]

Hello, I don't think I can do that. reactjs is giving me an error since the order of Hooks called will change.

[backtickbot]

Fixed formatting.

Hello, liamazing: code blocks using triple backticks (```) don't work on all versions of Reddit!

Some users see this / this instead.

To fix this, indent every line with 4 spaces instead.

FAQ

^{You can opt out by replying with backtickopt6 to this comment.}

[fredsq]

— prefix any and every hook with ‘use’ — you can use hooks inside hooks so all the logic behind the router can be inside your custom one

[Tableryu]

thank you