Performance Improvement Methods for React Web Applications

Rad obrađuje temu poboljšanja izvođenja React aplikacija. React je JavaScript biblioteka koja služi za izgradnju korisničkih sučelja. React aplikacije sačinjene su od zasebnih komponenti - JavaScript klasa i funkcija, a s obzirom na to mogu se podijeliti na klasne i funkcijske komponente. Komponente se kroz svoj životni ciklus u aplikaciji mogu više puta ažurirati, njihovi parametri stanja i svojstava se mijenjaju, a prilikom svake od tih promjena dolazi do novog iscrtavanja komponente. U tom području može doći do usporenog izvođenja pojedinih komponenti te samim time cjelokupne aplikacije. Navedene vrste komponenti razlikuju se u načinu korištenja i ažuriranja parametara stanja, načinu upravljanja životnim ciklusom te u samoj sintaksi. Upravljanje životnim ciklusom komponente i ažuriranje parametara stanja komponente ključno je za postizanje visoke razine efikasnosti izvođenja komponente. Tomu se može pristupiti korištenjem metoda životnog ciklusa shouldComponentUpdate() i componentDidUpdate() kada su u pitanju klasne komponente, te korištenjem React hook funkcija kada su u pitanju funkcijske kako bi se izbjegla nepotrebna iscrtavanja komponenti. Iscrtavanja se mogu izbjeći i primjenom React.PureComponent funkcija kod klasnih komponenti te React.memo() funkcija višeg reda kod funkcijskih. Ostale metode koje se mogu primijeniti za postizanje boljeg izvođenja komponenti su primjena uvjetne logike i smanjivanje ukupnog broja pozivanja funkcija koje mogu dovesti do iscrtavanja komponente. Kako bi se uopće moglo pristupiti upravljanju životnim ciklusom komponenti nužno je primjenjivati principe ne-mutiranja podataka. Izvođenje pojedinih komponenti kao i cjelokupne aplikacije može se ispitati alatima React DevTools i Google Lighthouse