Conditionally call useState hook in react-CodePudding

My question is really simple. I want to call the useState hook conditionally. I know this is not allowed in react, and that is why I'm here.

My use case is: I have an array of "comments". For each comment, I want to allow it to be liked based on whether the user is logged in or not. For this, I am using a hasLiked state. Now the problem is that if the user is not logged in, then this state is redundant and I don't want it.

Here is the code to make it clearer:

export default function Comment() {
    const isLoggedIn = someAuthAPI();
    const [hasLiked, setHasLiked] = useState(false) // this is the line that I want to call conditionally
    // ...
    return <div>...</div>
}

I want to do this:

export default function Comment() {
    const isLoggedIn = someAuthAPI();
    if (isLoggedIn){
        const [hasLiked, setHasLiked] = useState(false) // this is obviously not allowed and will throw an error
    }
    // ...
    return <div>...</div>
}

I searched for a solution but could not find anything useful. Most answers are either outdated or suggest using a third party library.

To reiterate, I just want to know if there is a way to make a state conditionally defined. I know I can do

const [hasLiked, setHasLiked] = useState(isLoggedIn ? false : null) // or undefined

but that is not I want here. I want to prevent the hook call altogether. This is because the example that I have taken here may not use much memory, but what I am using it for is quite memory demanding.

CodePudding user response：

You cannot make hooks optional, but you can make components optional. In this case you can create two different versions of the component, one with state and the other one without:

if (isLoggedIn) {
  return <CommentWithLikes />
}

return <CommentWithoutLikes />

CodePudding user response：

I would suggest, set hasLiked to initially null, then on useEffect() set hasLiked to true or false.

You can render only if hasLiked !== null

export default function Comment() {
    const [hasLiked, setHasLiked] = useState(null)
    
    useEffect(() => {
       someAuthAPI().then(isLoggedIn => setHasLiked(isLoggedIn))
    })

    return hasLiked === null ? null : <div>...</div>

bwt, if you pass isLoggedIn as parameter for Comment component, you can make useState conditional. But if the value comes from some API, you can't make it conditional.