React version 18 makes problem, how to resolve that?

I'm using a cleanup function in the useEffect hook. I realised that when I use the react version 17, it works as I expected, but with the version 18 is something wrong.

The important part is below in the useEffect hook. You can see, when the component unmounts, the the isCan and isCancelled is set to true (i just tried to solve the problem with both, useRef and useState, therefore is the isCan ). So after the addDocument is invoked, the dispatch function should be called, because the if statement is true (!isCancelled), but instead is false, and the dispatch function is never called. Even if the component isn't unmount, the cleanup function is somehow called, and the isCancelled is always true. This happens when I use the react version 18. When I change the render method in the index.js file, then the code works as it should.

Here what I have to change in index.js:

import React from 'react';
// import ReactDOM from 'react-dom/client';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

// const root = ReactDOM.createRoot(document.getElementById('root'));
// root.render(
//   <React.StrictMode>
//     <App />
//   </React.StrictMode>
// );

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);


import { useReducer, useState, useEffect, useRef } from 'react';
import { collection, doc, setDoc, serverTimestamp, addDoc, getDocs, deleteDoc } from 'firebase/firestore';
import { db } 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: null, error: null };
    case 'ADDED_DOCUMENT':
      return { isPending: false, document: action.payload, success: true, error: null };
    case 'ERROR':
      return { isPending: false, document: null, success: false, error: action.payload };
    default:
      return state;
  }
};

export const useFirestore = (collec) => {
  const [response, dispatch] = useReducer(firestoreReducer, initialState);
  const isCancelled = useRef(false);
  const [isCan, setIsCan] = useState(false);

  //collection ref

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

    try {
      const addedDocument = await addDoc(collection(db, collec), { ...addedDoc, createdAt: serverTimestamp() });
      if (!isCancelled.current) {
        console.log(isCancelled.current);
        console.log('useState:', isCan);
        dispatch({ type: 'ADDED_DOCUMENT', payload: addedDocument });
      }
    } catch (error) {
      if (!isCancelled.current) {
        console.log(error.message);
        dispatch({ type: 'ERROR', paylaod: error.message });
      }
    }
  };

  //delete a document
  const deleteDocument = async (id) => {
    await deleteDoc(doc(db, collec, id));
  };

  useEffect(() => {
    return () => {
      isCancelled.current = true;
      setIsCan(true);
    };
  }, []);

  return { addDocument, deleteDocument, response };
};
How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum