Update components to use useMemo

[Edward-Upton]

When we fetch data, for example, an array of elements, we often ensure that we were successful in the query. What this means is that when rendering we need to continuously check if the data exists, e.g:

{ elementsData?.getElements && {...}}

Instead, we can utilise useMemo to create a variable (e.g. elements) that is empty if a list or null otherwise which simplifies the rendering. We have already added this in some components and it seems to work well.