How To Write Better Functional Components in React

5 simple tips for readability and optimization

Picture by Arnold Francisca on Unsplash.

Those of us who have worked with functional components in React know that the introduction of Hooks has made our lives a lot easier. However, functional components have their own set of complexities and gotchas. As a result, it can sometimes be difficult to write readable and optimized functional components. Today, we will look at five simple tips to help us do just that.

1. Memoize Complex Data

Let’s take a look at the following React component called SortedListView:

This component takes an array of items, sorts them according to the comparison function provided, and displays them. However, this sorting operation could take a large amount of time if the number of items is large or the comparison function is complicated. This could end up becoming a bottleneck because the component will re-sort the items on each re-render even if the items array or the comparisonFunc does not change, but some other prop or the state changes.

This is just an example use case. Sorting large, complicated data in the frontend should be a rare occurrence. But, we can make this more CPU-efficient by memoizing the sorting operation and re-sorting only when the items array changes.

Update:
Memoizing can also help prevent unnecessary re-renders when objects generated in a parent component have to be passed to a child component (More on this in #2). However, for components under our own control, we can always prevent unnecessary re-renders. We can do this by avoiding passing key value objects to the dependency array of useEffect and other similar hooks and instead passing primitive values.

To see a benchmark of the actual performance gains and performance trade-offs of useMemo, please take a look at the following link.