Revisé algunos de los hilos sobre esto e intenté solucionarlo, pero aún no tuve éxito.

Tengo un padre y un hijo componente. En el componente principal, declaro un estado y paso la función para actualizar este estado a mi componente secundario.

 function ProfileGallery() { const [selectedPet, setPet] = useState(null); const [filterText, setFilterText] = useState(''); const [pets, setPets] = useState([]); const [componentState, setState] = useState('test'); const updateState = (state) => { setState(...state); }; return ( <PetInformation selectedPet={selectedPet} componentState={componentState} triggerParentUpdate={updateState} /> ); }

En mi componente hijo, hago lo siguiente:

 function PetInformation({ componentState, triggerParentUpdate, ...props }) { const [status, setStatus] = useState('Delete succesful'); const { selectedPet } = { ...props } || {}; const updatedComponentState = 'newState'; useEffect(() => { if (status === 'Delete pending') { deletePet(selectedPet).then(() => setStatus('Delete succesful')); } }, [status]); const handleDelete = () => { setStatus('Delete pending'); }; return ( <button className="btn btn-primary pull-right" onClick={() => { handleDelete(); triggerParentUpdate(updatedComponentState); }} type="button" > Delete Pet </button>

Por supuesto, hay más código en el medio, pero esto muestra la esencia de lo que estoy tratando de lograr. Quiero eliminar un elemento que seleccioné en mi galería y que esa eliminación se refleje una vez que haga clic en el botón Eliminar -> mi ProfileGallery debe volver a procesarse. Estoy tratando de hacer esto pasando esa función para actualizar mi estado en el componente secundario. Sé que JS no considerará que el estado ha cambiado si la referencia sigue siendo la misma, por eso estoy pasando un nuevo estado de componente actualizado const, ya que debería tener una referencia diferente de mi estado de componente original.

Todo funciona, el elemento se elimina, pero todavía necesito actualizar manualmente mi aplicación antes de que se refleje en la lista de mi galería. ¿Por qué ReactJS no vuelve a renderizar mi componente ProfileGallery aquí? ¿No se está actualizando mi estado?