SC

first-iteration.ts

import React, { useState, useEffect } from "react";

type MousePositionType = {
  x: number;
  y: number;
};

type WindowSizeType = {
  height: number;
  width: number;
};

// this could be moved to its own file
const mathLib = () => {
  const distanceCalculator = (point1: any, point2: any): number =>
    Math.sqrt(
      Math.pow(point1.x - point2.x, 2) + Math.pow(point1.y - point2.y, 2)
    );

  return { distanceCalculator };
};

function App() {
  const [position, setPosition] = useState<MousePositionType>({ x: 0, y: 0 });

  // the first size is not being set until the size of the window changes (very unlikely to happen)
  const [windowSize, setWindowSize] = useState<WindowSizeType>({
    height: 0,
    width: 0,
  });

  let [distance, setDistance] = useState(0);

  // this function is being called every time the app is rendered
  const { distanceCalculator } = mathLib();

  const handleMouseMove = (e: { clientX: number; clientY: number }) =>
    setPosition({ x: e.clientX, y: e.clientY });

  const handleResize = () =>
    setWindowSize({ height: window.innerHeight, width: window.innerWidth });
  
  // everything is being called/calculated every time any of the state change
  // the event listeners are not being removed
  useEffect(() => {
    setDistance(
      distanceCalculator(position, {
        x: windowSize.width / 2,
        y: windowSize.height / 2,
      })
    );

    window.addEventListener("mousemove", handleMouseMove);
    window.addEventListener("resize", handleResize);
  }, [position, windowSize.width, windowSize.height]);

  return (
    <>
      <div>
        Mouse Position: {position.x}:{position.y}
      </div>
      <div>
        Window Size: {windowSize.width}:{windowSize.height}
      </div>
      <div>
        Distance to center: {distance.toFixed(2)}
      </div>
    </>
  );
}

export default App;

second-iteration.ts

import React, { useState, useEffect } from "react";

type MousePositionType = {
  x: number;
  y: number;
};

type WindowSizeType = {
  height: number;
  width: number;
};

// import { distanceCalculator } from...
const distanceCalculator = (point1: any, point2: any): number =>
  Math.sqrt(
    Math.pow(point1.x - point2.x, 2) + Math.pow(point1.y - point2.y, 2)
  );

function App() {
  const [position, setPosition] = useState<MousePositionType>({ x: 0, y: 0 });

  // we set the default window size
  const [windowSize, setWindowSize] = useState<WindowSizeType>({
    height: window.innerHeight,
    width: window.innerWidth,
  });

  let [distance, setDistance] = useState(0);

  const handleMouseMove = (e: { clientX: number; clientY: number }) =>
    setPosition({ x: e.clientX, y: e.clientY });

  const handleResize = () =>
    setWindowSize({ height: window.innerHeight, width: window.innerWidth });

  // we bind the events and unbind them when component is unmount
  useEffect(() => {
    window.addEventListener("mousemove", handleMouseMove);
    window.addEventListener("resize", handleResize);

    return () => {
      window.removeEventListener("mousemove", handleMouseMove);
      window.removeEventListener("resize", handleResize);
    }
  }, []);

  // we calculate distance when any of the state elements change
  useEffect(() => {
    setDistance(
      distanceCalculator(position, {
        x: windowSize.width / 2,
        y: windowSize.height / 2,
      })
    );
  }, [position, windowSize.width, windowSize.height]);

  return (
    <>
      <div>
        Mouse Position: {position.x}:{position.y}
      </div>
      <div>
        Window Size: {windowSize.width}:{windowSize.height}
      </div>
      <div>
        Distance to center: {distance.toFixed(2)}
      </div>
    </>
  );
}

export default App;

third-iteration.ts

import React, { useState, useEffect } from "react";

type MousePositionType = {
  x: number;
  y: number;
};

type WindowSizeType = {
  height: number;
  width: number;
};

// import { distanceCalculator } from...
const distanceCalculator = (point1: any, point2: any): number =>
  Math.sqrt(
    Math.pow(point1.x - point2.x, 2) + Math.pow(point1.y - point2.y, 2)
  );

// we better separate concerns, so not the whole component is being rendered
// every time something changes
// plus, yes, concerns/duties/deeds are separated
function Distance({ position, windowSize }: { position: MousePositionType, windowSize: WindowSizeType }) {
  const distance = distanceCalculator(position, {
    x: windowSize.width / 2,
    y: windowSize.height / 2,
  });

  return (
    <>
      Distance to center: {distance.toFixed(2)}
    </>
  );
}

// now the App component does not re-render when the distance is calculated
// just its child Distance component
function App() {
  const [position, setPosition] = useState<MousePositionType>({ x: 0, y: 0 });

  // we set the default window size
  const [windowSize, setWindowSize] = useState<WindowSizeType>({
    height: window.innerHeight,
    width: window.innerWidth,
  });

  const handleMouseMove = (e: { clientX: number; clientY: number }) =>
    setPosition({ x: e.clientX, y: e.clientY });

  const handleResize = () =>
    setWindowSize({ height: window.innerHeight, width: window.innerWidth });

  // we bind the events and unbind them when component is unmount
  useEffect(() => {
    window.addEventListener("mousemove", handleMouseMove);
    window.addEventListener("resize", handleResize);

    return () => {
      window.removeEventListener("mousemove", handleMouseMove);
      window.removeEventListener("resize", handleResize);
    }
  }, []);

  return (
    <>
      <div>
        Mouse Position: {position.x}:{position.y}
      </div>
      <div>
        Window Size: {windowSize.width}:{windowSize.height}
      </div>
      <div>
        <Distance
          position={position}
          windowSize={windowSize}
        />
      </div>
    </>
  );
}

export default App;