Code duplication repeats substantially similar implementation logic across a system. It may speed delivery briefly, but repeated fixes make future maintenance difficult and tedious. section 5.3.2 section 8.8.1
Reduce duplication by:
- Extracting repeated methods into utility or helper classes, using IDE assistance when available. section 5.3.2
- Creating reusable components that accept either complete or filtered data. section 8.8.1
- Evaluating whether a component should receive data or fetch it, especially when redundant API calls are possible. section 8.8.1
ACH processing and exception views
While adding ACH file-header storage, duplicated database-access code prompted consideration of helper extraction. In the interface, a shared exceptions component replaced copied page and DataGrid logic, serving both complete and file-filtered exception lists. section 5.3.2 section 8.8.1
Listing 8.38 Stand-alone exception component
…
interface ExceptionsProps {
exceptions: AchExceptionsResponse[];
}
export default function Exceptions({exceptions}:
➥ Readonly<ExceptionsProps>) {
const [isOpen, setIsOpen] = useState(false);
const [unparsedRecord, setUnparsedRecord] = useState('');
const columns: GridColDef[] = [
…
<DataGrid columns={columns} rows={exceptions}/>
…
<AlertMessage open={isOpen} setOpen={setIsOpen}
➥ message={unparsedRecord} title="Unparsed Record" />
…
Shows a stand-alone exceptions component that receives exception data and renders a reusable DataGrid. section 8.8.1
