Obtengo de una API que devuelve datos en forma de matriz. Digamos que tengo una matriz de 5 objetos en esta matriz que son exactamente iguales. Quiero evitar duplicados verificando si existe un duplicado antes de agregarlo a mi estado de restaurants . A continuación se muestran fragmentos de mi código:

 const [restaurants, setRestaurants] = useState([])

 const checkForDuplicateBusiness = (businessArray)=>{ businessArray.forEach(singleBusiness=>{ if(!restaurants.some(restaurant=> restaurant.id === singleBusiness.id)){ setRestaurants(restaurants=>[...restaurants, singleBusiness]) console.log(restaurants) //returns [] } }) }

El problema es que cuando reviso con esta línea if(!restaurants.some(restaurant=> restaurant.id === singleBusiness.id)) el estado de los restaurants siempre está vacío. Entiendo que setState es asíncrono, por lo que el estado no se actualiza cuando lo reviso para la próxima iteración en el bucle forEach. No estoy seguro de qué hacer.

Cuando consuelo registro los restaurantes a través de useEffect como:

 useEffect(()=>{ console.log(restaurants) },[restaurants])

mostrará 5 objetos idénticos.

 [ 0: {id: 'sDlYSTdgZCx0-3cRetKn8A'} 1: {id: 'sDlYSTdgZCx0-3cRetKn8A'} 2: {id: 'sDlYSTdgZCx0-3cRetKn8A'} 3: {id: 'sDlYSTdgZCx0-3cRetKn8A'} 4: {id: 'sDlYSTdgZCx0-3cRetKn8A'} ]

Estoy confundido con este comportamiento porque si tengo exactamente 5 copias del objeto, eso significa que mi setRestaurants(restaurants=>[...restaurants, singleBusiness]) funcionaba correctamente indicativo del operador de propagación . pero mi verificación si la declaración no lo es?

La otra solución en la que he pensado es almacenar mis datos obtenidos en una matriz temporal y realizar la lógica "prevenir duplicados" allí, y luego configurarla en mis restaurants. Pero no estoy seguro de si este es el método más eficiente. ¿Hay una mejor manera o la forma de "Reaccionar" para esto?

Cualquier sugerencia es apreciada. ¡Gracias!