CODEWITHSUNDEEP
reactjsreact-hooks
alramdein
alramdein

Reputation: 901

useState() setter in React Hooks doesn't work

I have a custom hook called useAddFriend, here is the code:

import { useCallback, useState } from 'react'
import { Users }from '../data/userDummy'

const useAddFriend = () => {
    const [roomId, setRoomId] = useState("default")

    const findUser = useCallback((username) => {
        for(let user of Users) {
            if(username === user.username) {
                setRoomId("newRoomId")
            }
        }
    }, [])

    return { roomId, findUser }
}

export default useAddFriend;

The problem is, setRoomId never update the roomId. I'm already make sure that it satisfied theif condition above. But it always return default.

Here is how I use the hook on the React component:

const AddFriend = () => {
    const [username, setUsername] = React.useState('')
    const { roomId, findUser } = useAddFriend()
    const history = useHistory()

    const handleInputChange = (event) => {
        setUsername(event.target.value)
    }
    
    const handleAddFriend = () => {
        findUser(username)
        setUsername("")
        history.push(`/${roomId}`)
    }

    ...
}

Upvotes: 1

Views: 1410

Answers (2)

Jake Lam
Jake Lam

Reputation: 3452

I think the reason is in here:

const handleInputChange = (event) => {
    setUsername(event.target.value)
}

const handleAddFriend = () => {
    findUser(username)
    setUsername("")
    history.push(`/${roomId}`) // <= This line may execute before the roomId is fully set
}

To make sure you get the correct roomId after the hook executed, It is recommended to use together with a useEffect

const handleAddFriend = () => {
    findUser(username)
    setUsername("")
}

useEffect(()=> { if(roomId!=='default') history.push(`/${roomId}`) }, [roomId]);

Upvotes: 2

Max
Max

Reputation: 799

You need to remove useCallback or pass an argument you wanna update in square brackets

const findUser = useCallback((username) => {
    for(let user of Users) {
        if(username === user.username) {
            setRoomId("newRoomId")
        }
    }
}, [roomId])

Upvotes: 0

Related Questions