Código de ejemplo

import mqtt from 'mqtt';

//Despues de obtener credenciales MQTT
if (response.ok) {
  setMqttCreds(data);
  showToast('Credenciales MQTT recibidas. Conectando...', 'success');
	connectToBroker(data);
	setView('user_mode');
}

const connectToBroker = (creds) => {
  setConnectStatus('Connecting');
  addLog('Conectando a ${creds.host}...');

  const options = {
    clientId: creds.clientId,
    username: creds.username,
    password: creds.password,
    clean: true,
    reconnectPeriod: 2000,
    connectTimeout: 10000,
  };
  
  const mqttClient = mqtt.connect(creds.host, options);

  mqttClient.on('connect', () => {
    setConnectStatus('Connected');
    addLog('¡Conexión Exitosa!', 'success');
    mqttClient.subscribe('#');
  });
  
  mqttClient.('error', (err) => {
    setConnectStatus('Error');
		addLog('Error de conexión: $(err.message)', 'error'),
  });
  
  mqttClient.on('message', (topic, message) => {
    addLog('RECIBIDO [${topic}]: ${message.toString()}');
  });
  
  setClient(mqttClient);
};

const sendUserPayload = (payLoad, kind, amountOverride) => {
  const topic = '/ecr-req/${formData.appId}/${mqttCreds.clientId}';
  client.publish(topic, payload);
  addLog('ENVIADO a ${topic}: ${payload}', 'success');
};

//Cleanup al cerrar/desmontar
useEffect(() => {
  return () => {
    if (client) {
      client.end();
    }
  };
}, [client]);