diff --git a/packages/main/src/components/FlexBox/index.tsx b/packages/main/src/components/FlexBox/index.tsx index 9efee4046e0..6c23316008a 100644 --- a/packages/main/src/components/FlexBox/index.tsx +++ b/packages/main/src/components/FlexBox/index.tsx @@ -1,12 +1,12 @@ import { StyleClassHelper } from '@ui5/webcomponents-react-base'; -import React, { CSSProperties, FC, forwardRef, ReactNode, ReactNodeArray, Ref } from 'react'; +import React, { CSSProperties, FC, forwardRef, ReactNode, ReactNodeArray, Ref, useMemo } from 'react'; import { createUseStyles } from 'react-jss'; import { CommonProps } from '../../interfaces/CommonProps'; -import { styles } from './Flexbox.jss'; -import { FlexBoxJustifyContent } from '../../lib/FlexBoxJustifyContent'; import { FlexBoxAlignItems } from '../../lib/FlexBoxAlignItems'; import { FlexBoxDirection } from '../../lib/FlexBoxDirection'; +import { FlexBoxJustifyContent } from '../../lib/FlexBoxJustifyContent'; import { FlexBoxWrap } from '../../lib/FlexBoxWrap'; +import { styles } from './Flexbox.jss'; const useStyles = createUseStyles(styles, { name: 'FlexBox' }); @@ -53,24 +53,26 @@ const FlexBox: FC = forwardRef((props: FlexBoxPropTypes, ref: flexBoxClasses.put(classes.flexBoxDisplayInline); } - const inlineStyle = {} as CSSProperties; - if (height) { - inlineStyle.height = height; - } - if (width) { - inlineStyle.width = width; - } - if (className) { flexBoxClasses.put(className); } - if (style) { - Object.assign(inlineStyle, style); - } + const memoizedStyles = useMemo(() => { + const innerStyles: CSSProperties = {}; + if (height) { + innerStyles.height = height; + } + if (width) { + innerStyles.width = width; + } + if (style) { + Object.assign(innerStyles, style); + } + return innerStyles; + }, [height, width, style]); return ( -
+
{children}
);