Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
PwC income tax calculation with memoization -- useMemo
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>
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment