Shallow compare schema and uischema props

Use shallow compare to determine schema and uischema prop changes improving performance in almost all cases. The 'areEqual' check is used to determine whether the previous set of props is equal to the next set of props. Up until now lodash's deep equal was used for the schema and uischema props. This would only be beneficial if we changed the actual schema objects without changing their content and the comparison would take less time than a rerender. In practice we almost never change the schema and uischema objects and when we do we usually also change their content. A deep equal is therefore unnecessary and additionally harms performance for large objects.

Author: sdirix

packages/react/src/JsonFormsContext.tsx

@@ -359,12 +359,14 @@ const withContextToEnumProps =
 type JsonFormsPropTypes = ControlProps | CombinatorProps | LayoutProps | CellProps | ArrayLayoutProps | StatePropsOfControlWithDetail | OwnPropsOfRenderer;
 
 export const areEqual = (prevProps: JsonFormsPropTypes, nextProps: JsonFormsPropTypes) => {
- const prev = omit(prevProps, ['handleChange', 'renderers', 'cells', 'uischemas']);
- const next = omit(nextProps, ['handleChange', 'renderers', 'cells', 'uischemas']);
+ const prev = omit(prevProps, ['schema', 'uischema', 'handleChange', 'renderers', 'cells', 'uischemas']);
+ const next = omit(nextProps, ['schema', 'uischema', 'handleChange', 'renderers', 'cells', 'uischemas']);
  return isEqual(prev, next)
  && get(prevProps, 'renderers.length') === get(nextProps, 'renderers.length')
  && get(prevProps, 'cells.length') === get(nextProps, 'cells.length')
- && get(prevProps, 'uischemas.length') === get(nextProps, 'uischemas.length');
+ && get(prevProps, 'uischemas.length') === get(nextProps, 'uischemas.length')
+ && get(prevProps, 'schema') === get(nextProps, 'schema')
+ && get(prevProps, 'uischema') === get(nextProps, 'uischema');
 };
 
 // top level HOCs --