Firebase updating Documents delayed by one onClick event

Question

Using react.js & firebase

The code below represents a simple button which increases/decreases +1/-1 whenever its clicked. It also updates one of the documents on the backend (using firebase). Everything seems to work fine on the surface but not on firebase. When you click on the button, it'll show +1 on the UI and console.log but not on firebase. In other words when plusCount state is at 0, it shows +1 on firebase and when plusCount state is at +1, it shows 0 on firebase. How can I fix this to make sure it shows the same number on the frontend and the backend? I also added the useFirestore hook component below, there may be a mistake that I'm unaware of in there somewhere.

Thank you for any help.

Button component:

import React, { useState } from 'react';
import { useFirestore } from "../../hooks/useFirestore"

export default function Testing({ doc }) {
    const { updateDocument } = useFirestore('projects')
    const [plusActive, setPlusActive] = useState(false)
    const [plusCount, setPlusCount] = useState(0)

    function p() {
        setPlusActive(prevState => !prevState);
        plusActive ? setPlusCount(plusCount - 1) : setPlusCount(plusCount + 1)
    }

    const handlePlus = (e) => {
        e.preventDefault();
        p();
        updateDocument(doc.id, {
            votes: plusCount
        })
    }
    console.log(plusCount)

    return (
        <div>
            <button onClick={handlePlus}>like | {plusCount}</button>
        </div>
    )
} 

useFirestore hook component:

import { projectFirestore, timestamp } from "../firebase/config"

let initialState = {
  document: null,
  isPending: false,
  error: null,
  success: null,
}

const firestoreReducer = (state, action) => {
  switch (action.type) {
    case 'IS_PENDING':
      return { isPending: true, document: null, success: false, error: null }
    case 'ADDED_DOCUMENT':
      return { isPending: false, document: action.payload, success: true, error: null }
    case 'DELETED_DOCUMENT':
      return { isPending: false, document: null, success: true, error: null }
    case 'ERROR':
      return { isPending: false, document: null, success: false, error: action.payload }
    case "UPDATED_DOCUMENT":
      return { isPending: false, document: action.payload, success: true, error: null }
    default:
      return state
  }
}

export const useFirestore = (collection) => {
  const [response, dispatch] = useReducer(firestoreReducer, initialState)
  const [isCancelled, setIsCancelled] = useState(false)

  // collection ref
  const ref = projectFirestore.collection(collection)

  // only dispatch if not cancelled
  const dispatchIfNotCancelled = (action) => {
    if (!isCancelled) {
      dispatch(action)
    }
  }

  // add a document
  const addDocument = async (doc) => {
    dispatch({ type: 'IS_PENDING' })

    try {
      const createdAt = timestamp.fromDate(new Date())
      const addedDocument = await ref.add({ ...doc, createdAt })
      dispatchIfNotCancelled({ type: 'ADDED_DOCUMENT', payload: addedDocument })
    }
    catch (err) {
      dispatchIfNotCancelled({ type: 'ERROR', payload: err.message })
    }
  }

  // delete a document
  const deleteDocument = async (id) => {
    dispatch({ type: 'IS_PENDING' })

    try {
      await ref.doc(id).delete()
      dispatchIfNotCancelled({ type: 'DELETED_DOCUMENT' })
    }
    catch (err) {
      dispatchIfNotCancelled({ type: 'ERROR', payload: 'could not delete' })
    }
  }

  // update a document
  const updateDocument = async (id, updates) => {
    dispatch({ type: "IS_PENDING" })

    try {
      const updatedDocument = await ref.doc(id).update(updates)
      dispatchIfNotCancelled({ type: "UPDATED_DOCUMENT", payload: updatedDocument })
      return updatedDocument
    }
    catch (error) {
      dispatchIfNotCancelled({ type: "ERROR", payload: error })
      return null
    }
  }

  useEffect(() => {
    return () => setIsCancelled(true)
  }, [])

  return { addDocument, deleteDocument, updateDocument, response }

}```

Answer 1

For your use-case, you should useEffect() to listen the changes for plusCount. See code below:

  useEffect(() => {
    updateDocument('test', {
      votes: plusCount
    })
  }, [plusCount]);

  const handlePlus = (e) => {
      e.preventDefault();
      setPlusActive(prevState => !prevState);
      plusActive ? setPlusCount(plusCount - 1) : setPlusCount(plusCount + 1)
  }

Everytime you click the button it will listen to the changes of plusCount which then the updateDocument will also be triggered together with the updated state. See below screenshot for the result:

As you can see, the frontend and backend is now aligned.

You can find more information by checking out this documentation.