TypingIndicatorBubble : Violating React rule of hooks

Sendbird Chat UIKit React
1

[Problem/Question]
Exception is shown in devtools, but it points at a real underlying issue:

Warning: Internal React error: Expected static flag was missing. Please notify the React team. Error Component Stack
    at TypingIndicatorBubble (TypingIndicatorBubble.js:52:31)
    at TypingIndicatorBubbleWrapper (MessageList.js:297:18)
    at div (<anonymous>)

[SDK Version]

"@sendbird/uikit-react": "^3.15.7",

[Reproduction Steps]
With a chat window that makes the typing indictaor to show up.
Problem is returning a value (null) before using react hook, which is a violation of “rule of hooks”:

    var typingMembers = props.typingMembers, handleScroll = props.handleScroll;
    if (typingMembers.length === 0)
        return null;
    useLayoutEffect(function () {
        ...
    }, []);

Do not call Hooks after a conditional return statement.

2

Hi @Guy_Guy

Welcome to the Sendbird Community!

I reported this issue to our engineering team so that they can review it.
Once I receive feedback from them, I’ll keep you posted.

3

@Guy_Guy

The fix will be included in the upcoming regular release in the middle of next week.

1 Like