Así que este es un componente que tengo en React JS

 const EnterSetData = ({ user_card_set }) => { const [cardlist, setCardlist] = useState({ data: [] }); let setlist= useGetSetDB(); //Save and reset form const sendSets = () => { const dupes = findDuplicates(setlist, cardlist); if (dupes.length > 0) { saveSets(setlist) setCardlist({ data: [] }); } else { handleDupes(dupes); } }; useEffect(() => { setCardlist(card_set); }, [card_set]); return ( <> {cardlist.data.map((card, key) => ( <a> .......</a>))} <button type="button" onClick={sendSets} > Save Cards </button> </div>

El problema principal es que mientras se guardan los datos, hay un error importante. useGetSetDB() se usa para obtener la lista de conjuntos completa de una API. Después de guardar, uso setCardlist para actualizar el estado del componente. Es aquí donde noto que la setlist no cambia. Las nuevas entradas no están allí y esto hace que findDuplicates falle. Mi base de datos busca duplicados y, por lo tanto, console.logs mostrará que las inserciones fallaron. ¿Cómo obligo a useGetSetDB a actualizar en cada cambio de estado? Esto es useGetSetDB

 const useGetSetDB = () => { const[state,setState] = useState([]); const fetchData = async () => { const data = await fetch("/sets"); const res = await data.json(); return res; }; useEffect(()=>{ fetchData().then(response => {setState(response)}) },[]) return state } export default useGetSetDB;