Update React examples to not recreate renderers on each render cycle

[sissbruecker]

As identified in #283, Vaadin React components currently treat renderers as components. As such, creating a renderer function on each render cycle is equivalent to creating a new type of component for each render. That in turn causes React to fully replace the DOM, which results in issues such as losing DOM state (focus, input text) as well as decreased performance.

Until #283 is fixed, we should update our component documentation to demonstrate how to use renderers to safely avoid these issues. That means that any renderer should either be:

• extracted from the main example component function into a separate component function
• or memoized in the main example component function using useMemo or useCallback

Example - Before:

<Grid items={items.value}>
  <GridColumn header="Employee">
    {({ item }) => <span class="foo">{item.fullName}</span>}
  </GridColumn>

  ...
</Grid>

Example - After:

const employeeRenderer = useCallback(
  ({ item }) => <span class="foo">{item.fullName}</span>,
  []
);
    
<Grid items={items.value}>
  <GridColumn header="Employee">
    {employeeRenderer}
  </GridColumn>

  ...
</Grid>

Note that the dependency array for useMemo / useCallback must be empty, otherwise the renderer would be recreated again when a dependency changes, leading back to the original issue. If the renderer depends on state of the outer component, then signals should be used to access that state from the renderer (should already be the case in our docs).