Avoid calling React hooks conditionally when using getServerSideProps in Next.js

Question

I am using getServerSideProps() to fetch data on the server side and then display it to the user:

export const getServerSideProps = async () => {
    // fetch some data...
    if (some_error_condition) {
        return { error: "Something happened" };
    }
    return { props: { num: 123 } };
};


export default function Component({ num, error }) {
    if (error) {
        return <>Error: {error}</>;
    }

    const [num, setNum] = useState(num); // <-- this hook is called conditionally

    return <>...</>;
}

In the React component, some hooks depend on the server-side data. Therefore, I need to display a fallback UI before calling those hooks with data which isn't there.

However, this results in this (comprehensible) error:

Error: React Hook "useState" is called conditionally.

How can I best avoid this in a Next.js / getServerSideProps() environment?

score 1 · Answer 1 · answered Mar 18 '23 at 14:59

You can create a new component and dynamic import it

const SuccessComponent = ({ num }) => {
    const [num, setNum] = useState(num);

    return <>...</>;
}


import dynamic from 'next/dynamic';
const SuccessComponent = dynamic(() => import('SuccessComponent'))
export default function Component({ num, error }) {
    if (error) {
        return <>Error: {error}</>;
    }

    return <SuccessComponent num={num}/>
}

Avoid calling React hooks conditionally when using getServerSideProps in Next.js

1 Answers1