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.