Why i got this error?
Error: Invalid hook call. Hooks can only be called inside of the body
of a function component.
Here’s my code in useSession.js:
import { useSelector } from 'react-redux';
export const useSession = () => {
const session = useSelector(state => state.session)
return session
}
And code in Auth.js
import { useSession } from './useSession';
export const getServerSideProps = options => gssp => {
const { signedIn, redirectTo } = options;
return async ctx => {
const session = useSession();
if (signedIn && !session) {
return {
redirect: {
destination: redirectTo || '/login',
permanent: false,
}
}
}
const result = await gssp(ctx);
return {
...result,
props: {
...result.props,
session,
},
}
}
};
>Solution :
You are breaking the rules of hooks. Namely Don’t call Hooks from regular JavaScript functions. You can only use a hook from synchronous render of a react functional component. But here you are calling a hook from a plain javascript function that could be executed at any time.
To fix this you’ll have to move the hook to the root level of your component.
For example:
function MyComp() {
const session = useSelector(state => state.session)
return <></>
}
If you want to encapsulate that logic into something reusable, you can make a custom hook.
export const useSession = () => { // note the name starts with `use`.
const session = useSelector(state => state.session)
return session
}
Which then must obey the rules of hooks itself:
function MyComp() {
const session = useSession()
return <></>
}