PwC income tax calculation with memoization -- useMemo

pwcincometax.js

import axios from "axios";
import { useEffect, useMemo, useState } from "react";

export default function App() {
  const [employee, setEmployee] = useState({});
  const [employees, setEmployees] = useState([]);
  const [num, setNum] = useState(1);

  const endPoint =
    "https://my-json-server.typicode.com/ifeanyidike/jsondata/employees";

  useEffect(() => {
    const getEmployee = async () => {
      const { data } = await axios.get(`${endPoint}/${num}`);
      setEmployee(data);
    };
    getEmployee();

    return () => {};
  }, [num]);

  useEffect(() => {
    axios.get(endPoint).then(({ data }) => setEmployees(data));
  }, [num]);

  const taxVariablesCompute = useMemo(() => {
    const { income, noOfChildren, noOfDependentRelatives } = employee;

    const reliefAllowance1 = 0.01 * income >= 200000 ? 0.01 * income : 200000;
    const reliefAllowance2 = 0.2 * income;

    const numChildren = +noOfChildren <= 4 ? +noOfChildren : 4;
    const numRelatives =
      +noOfDependentRelatives <= 2 ? +noOfDependentRelatives : 2;

    const childrenRelief = numChildren * 2500;
    const relativesRelief = numRelatives * 2000;
    const pensionRelief = 0.075 * income;

    const reliefs =
      reliefAllowance1 +
      reliefAllowance2 +
      childrenRelief +
      relativesRelief +
      pensionRelief;

    return reliefs;
  }, [employee]);

  const taxCalculation = useMemo(() => {
    const { income } = employee;
    let taxableIncome = income - taxVariablesCompute;
    let PAYE = 0;

    const taxEndPoints = [300000, 300000, 500000, 500000, 1600000, 3200000];

    for (let i = 0; i < taxEndPoints.length; i++) {
      if (i === 0) {
        if (taxableIncome >= 300000) {
          PAYE += 0.07 * taxEndPoints[i];
          taxableIncome -= taxEndPoints[i];
        } else {
          PAYE += 0.07 * taxableIncome;
          break;
        }
      } else if (i === 1) {
        if (taxableIncome >= 300000) {
          PAYE += 0.11 * taxEndPoints[i];
          taxableIncome -= taxEndPoints[i];
        } else {
          PAYE += 0.11 * taxableIncome;
          break;
        }
      } else if (i === 2 && taxableIncome >= 500000) {
        if (taxableIncome >= 500000) {
          PAYE += 0.15 * taxEndPoints[i];
          taxableIncome -= taxEndPoints[i];
        } else {
          PAYE += 0.15 * taxableIncome;
          break;
        }
      } else if (i === 3) {
        if (taxableIncome >= 500000) {
          PAYE += 0.19 * taxEndPoints[i];
          taxableIncome -= taxEndPoints[i];
        } else {
          PAYE += 0.19 * taxableIncome;
          break;
        }
      } else if (i === 4) {
        if (taxableIncome >= 1600000) {
          PAYE += 0.21 * taxEndPoints[i];
          taxableIncome -= taxEndPoints[i];
        } else {
          PAYE += 0.21 * taxableIncome;
          break;
        }
      } else if (i === 5) {
        if (taxableIncome >= 3200000) {
          PAYE += 0.24 * taxEndPoints[i];
          taxableIncome -= taxEndPoints[i];
        } else {
          PAYE += 0.24 * taxableIncome;
          break;
        }
      }
    }

    const netIncome = income - PAYE;
    return { PAYE, netIncome };
  }, [employee, taxVariablesCompute]);

  return (
    <div className="App">
      <div>
        <p></p>
        <p>Name: {`${employee.firstName} ${employee.lastName}`}</p>
        <p>Job: {employee.job}</p>
        <p>Sex: {employee.sex}</p>
        <p>Income: {employee.income}</p>
        <p>No. of children: {employee.noOfChildren}</p>
        <p>No. of dependents: {employee.noOfDependentRelatives}</p>
        <p>PAYE: ₦{taxCalculation.PAYE}</p>
        <p>Income after PAYE: ₦{taxCalculation.netIncome}</p>
      </div>
      <div>
        <button
          disabled={num === 1}
          onClick={() =>
            setNum((prevNum) => (prevNum >= 1 ? prevNum - 1 : prevNum))
          }
        >
          &laquo;
        </button>
        <button
          disabled={num === employees.length}
          onClick={() =>
            setNum((prevNum) =>
              prevNum < employees.length ? prevNum + 1 : prevNum
            )
          }
        >
          &raquo;
        </button>
      </div>
    </div>
  );
}