7 Managing performance with useMemo

React is great at making it easy to display data in efficient, appealing, and responsive ways. But simply throwing raw data onto the screen is rare. Whether our apps are statistical, financial, scientific, entertaining, or whimsical, we almost always manipulate our data before bringing it to the surface.

Sometimes that manipulation can be complicated or time-consuming. If the time and resources spent are necessary to bring the data to life, the outcome may make up for the cost. But if the user experience is degraded by our computations, we need to consider ways of streamlining our code. Maybe a quest for more-efficient algorithms will pay dividends, or maybe our algorithms are already efficient and there is no way to make them faster. Either way, we shouldn’t perform the computations at all if we know their output will be unchanged. In such a case, React provides the useMemo hook to help us avoid unnecessary and wasteful work.

7.1 Breaking the cook’s heart by calling, “O, shortcake!”

7.1.1 Generating anagrams with an expensive algorithm

7.1.2 Avoiding redundant function calls

7.2 Memoizing expensive function calls with useMemo

7.3 Organizing the components on the Bookings page

7.3.1 Managing the selected bookable with useState

7.3.2 Managing the selected week and booking with useReducer and useState

7.4 Efficiently building the bookings grid with useMemo

7.4.1 Generating a grid of sessions and dates

7.4.2 Generating a lookup for bookings

7.4.3 Providing a getBookings data-loading function

7.4.4 Creating the BookingsGrid component and calling useMemo

7.4.5 Coping with racing responses when fetching data in useEffect

Summary