diff --git a/app/containers/message/Blocks.ts b/app/containers/message/Blocks.ts index b9e6223b3..38f118b04 100644 --- a/app/containers/message/Blocks.ts +++ b/app/containers/message/Blocks.ts @@ -1,14 +1,13 @@ -import React, { useRef } from 'react'; +import React from 'react'; import { messageBlockWithContext } from '../UIKit/MessageBlock'; import { IMessageBlocks } from './interfaces'; -const Blocks = React.memo(({ blocks, id: mid, rid, blockAction }: IMessageBlocks) => { - if (blocks && blocks.length > 0) { - const appId = blocks[0]?.appId || ''; - // eslint-disable-next-line react-hooks/rules-of-hooks - const comp = useRef( - React.createElement( +const Blocks = React.memo( + ({ blocks, id: mid, rid, blockAction }: IMessageBlocks) => { + if (blocks && blocks.length > 0) { + const appId = blocks[0]?.appId || ''; + return React.createElement( messageBlockWithContext({ action: async ({ actionId, value, blockId }: { actionId: string; value: string; blockId: string }) => { if (blockAction) { @@ -26,12 +25,21 @@ const Blocks = React.memo(({ blocks, id: mid, rid, blockAction }: IMessageBlocks rid }), { blocks } - ) - ); - return comp.current; + ); + } + return null; + }, + (prevProps, nextProps) => { + if ( + ('type' in prevProps.blocks[0] && prevProps.blocks[0].type === 'video_conf') || + ('type' in nextProps.blocks[0] && nextProps.blocks[0].type === 'video_conf') + ) { + // Avoid multiple request on the VideoConferenceBlock + return true; + } + return false; } - return null; -}); +); Blocks.displayName = 'MessageBlocks';