Реагировать на useEffect, как повторно отображать каждый раз, когда значение обновляется

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