Avoid unnecessarily recreating functions on renders when creating prop values

[gsproston-scottlogic]

Feature Request

Description

There are a few instances in the code where functions are being created before being passed as props to child components. The issue here is that these functions are created on each render, creating a very small performance hit.

Additional context

The main offender here is when a component has an asynchronous method, but its child component takes a synchronous one. Here, the async method is wrapped in a sync method before it is passed as a prop. e.g.

sendChatMessage={() => void sendChatMessage()}

Either:

• Pass async methods down to the child components, and having the child component call void methodName(). - GO FOR THIS ONE
• Wrap the async method in a closure.
• Create a synchronous method in the parent component and use useCallback.

Acceptance criteria

Refactor ticket, so just regression here.

[chriswilty]

This needs more precise info - we need to identify which components need changes, before accepting this one as Ready.