Tengo dos componentes a los cuales les mando datos por medio del useEffect, pero cuando uno de ellos cambia, me recarga todos los componentes y quiero evitar eso.
¿Cómo puedo hacerlo? La parte que más me interesa es que no me recargue el mapa, debido a que es otro componente.
Anexo código
import React, { useState, useEffect } from "react";
import Card from "react-bootstrap/Card";
import GoogleMapReact from "google-map-react";
import "./agency-detail-group.scss";
function AgencyDetailGroup(props) {
const [agency, setAgency] = useState(props.agency);
const defaultZoom = 12;
useEffect(() => {
setAgency(props.agency);
}, [props]);
const MapComp = (props) => {
if (!props.location) {
return null;
}
return (
<Card className="google-card">
<GoogleMapReact
bootstrapURLKeys={{
key: "AIzaSyDpiR1qDLtWRG3NVz3jmzl4tAHmCImQx7c",
}}
defaultCenter={props.location}
defaultZoom={defaultZoom}
/>
</Card>
);
};
return (
<div className="address-info-container">
<Card className="address-card">
<div className="address-card-title underlined">{agency.name}</div>
<div>{agency.address}</div>
<div className="address-card-title">Horario de atención</div>
<div>{agency.business_hours}</div>
<div className="address-card-title">Teléfono</div>
<div>{agency.phone}</div>
</Card>
<MapComp location={agency.location} />
</div>
);
}
export default AgencyDetailGroup;