Socket Emitting

useEmitter executes a Emitter when a emit() function returned from it gets triggered. It uses dependency tracking to limit re-rendering and improve performance. Under the hood, communication with the core systems is established by event emitters. Many "helper hooks" (such as onEvent, onError, onReconnecting, etc.) are returned; these will help handle the request flow and lifecycle. This approach avoids overloading the base hook with callback logic. It also helps improve code readability, decreases code complication, and promotes more organized code.

import { useEmitter } from "@hyper-fetch/react";
import { sendMessage } from "server";

const MessageComponent: React.FC = () => {
  const { emit, timestamp, connected, onEvent, onError, onReconnecting } = useEmitter(postLogin);

  onEvent((emitter) => {
    // Event before we send event message
    console.log(emitter); // Emitter instance
  });

  onError((error) => {
    console.log(error); // Error Event
  });

  onReconnecting((reconnectingAttempt) => {
    console.log(reconnectingAttempt); // 1
  });

  const onSubmit = (values: Values) => {
    // ResponseDataType is automatically inherited from Emitter class
    const acknowledge = (error: Error, data: ResponseDataType) => {
      if (error) {
        alert("No server response!");
      } else {
        alert("Message received on server.");
      }
    };

    emit({ data: values }, acknowledge);
  };

  return (
    <Formik onSubmit={onSubmit} validationSchema={validationSchema}>
      <Form>
        <FormInput name="message" label="Message" placeholder="Write message" />
        <Button type="submit" variant="contained" disabled={submitting} className={styles.submit}>
          Send
        </Button>
      </Form>
    </Formik>
  );
};