CODEWITHSUNDEEP
javascriptreactjsfirebasefirebase-realtime-databaserxjs
DjBillje Official
DjBillje Official

Reputation: 386

React useEffect, how to re render everytime value is updated

I am making like system for my app, and the like system works but the problem is everytime i need to refresh the page to see the updated information..

function Like(props){
    var uID = props.uID //sets userId
    var title = props.name //sets tractk title
    let userName = props.userName //sets userName
    let likeCheck; //only true or false
    const [like, setLike] = useState()

        useEffect(()=>{
            //goes to firebase and check if the value is true or undefined
            firebase.database().ref("users/"+uID+"/public/"+"songs/"+title+"/widgetInfo/likes/"+userName).on("child_added", (snapshot)=>{
            likeCheck = snapshot.val().liked//stores the value in it
            setLike(likeCheck)//sets the value in it
        })
        }, [])


    function sendLike (){
        //if like is true then it removes the child
        if (like){
            firebase.database().ref("users/"+uID+"/public/"+"songs/"+title+"/widgetInfo/likes/"+userName).remove();
        }
        //if like is undefined, then it adds the child with true value
        else{
            firebase.database().ref("users/"+uID+"/public/"+"songs/"+title+"/widgetInfo/likes/"+userName).push().set({
                "userName": userName,
                "liked": true
            })
        }
    }
    return(
        <div class = "like">
            //if like is true then, it shows liked, if false then it shows unliked
            <i class="material-icons" onClick = {sendLike} >{like ? <span>favorite</span> : <span>favorite_border</span> }</i>
        </div>
    )
}
export default Like
If i press like, it shows liked, but when i press unlike, i need to refresh to see the updated result, do i need to put something on dependency array of useEffect?

Upvotes: 0

Views: 760

Answers (2)

Mark Colby
Mark Colby

Reputation: 191

As pilchard said in his comments, you need to use your setLike() hook to change the like state in your sendLike() function.

Your component will re-render any time the state updates. Currently with your onClick, you are updating the database, but not updating the component state. By updating the component state with your setLike hook you will cause a re-render.

Your useEffect() is fine as is. It will update the state on initial render (initial render only) based on the database state.

Upvotes: 1

Nemanja Lazarevic
Nemanja Lazarevic

Reputation: 1047

You never change the actual value of the like in the local state of your component. Try it like this:

function sendLike (){
    //if like is true then it removes the child
    if (like){
        setLike(false)
firebase.database().ref("users/"+uID+"/public/"+"songs/"+title+"/widgetInfo/likes/"+userName).remove();
    }
    //if like is undefined, then it adds the child with true value
    else{
        setLike(true)
firebase.database().ref("users/"+uID+"/public/"+"songs/"+title+"/widgetInfo/likes/"+userName).push().set({
            "userName": userName,
            "liked": true
        })
    }
}

Upvotes: 2

Related Questions