Optimizing React Performance with Memoization and Hooks

Abstract

This thesis aims to demonstrate how memoization techniques can improve the performance of the "Posts Search App", an application designed for searching, adding, and displaying posts. It also explores the potential for applying similar optimization methods to other projects. The goal is to demonstrate these optimizations in the application and support their use, particularly in projects with large-scale applications or components that significantly impact application speed.

To address performance challenges, this thesis utilizes the "memo" function alongside the "useMemo" and "useCallback" hooks. Developed using JavaScript and React.js, styled with Tailwind CSS, and data generated using the Faker API. This application serves as a dedicated testing ground for memoization techniques. Various scenarios are introduced to explore the effectiveness of memoization in managing component rendering and state updates, followed by resolution strategies for any resulting issues.

Also, this thesis provides practical insights into memoization implementation and effectiveness in web development projects. It offers thorough guidelines and recommendations for optimizing performance that could be applied in large-scale applications based on both practical findings and theoretical insights.

In conclusion, the "Posts Search App" application demonstrates significant performance enhancements through memoization. The testing performed using the Profiler tool, which is part of the React Development Tools browser extension, clearly illustrates the substantial improvement in render efficiency before and after implementing memoization, highlighting the effectiveness of memoization in reducing wasted renders and offering insights into optimization for larger projects.