Skip to content

fix: reduce unnecessary re-renders of custom Composer and Send components #2683

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
Copilot wants to merge 2 commits into from
Closed

fix: reduce unnecessary re-renders of custom Composer and Send components #2683

Copilot wants to merge 2 commits into from
+55 −15

Conversation

Copy link
Contributor

Copilot AI commented Nov 27, 2025 •
edited
Loading

Custom renderComposer re-renders on every state change in v3.2.2, whereas v2.6.5 only re-rendered when relevant props changed. Root cause: InputToolbar used entire props object as useMemo dependency, defeating memoization since props is a new reference each render.

Changes

InputToolbar.tsx

  • Extract specific dependencies for composerFragment useMemo: [renderComposer, composerHeight, text, textInputProps]
  • Extract specific dependencies for sendFragment useMemo: [renderSend, text, label, ...]
  • Add explicit Composer/Send props to InputToolbarProps interface

GiftedChat/index.tsx

  • Memoize textInputProps object passed to InputToolbar

Before/After

// Before: re-renders on ANY prop change
const composerFragment = useMemo(() => {
  // ...
}, [renderComposer, props])  // ❌ props is new object every render

// After: re-renders only when composer-related props change
const composerFragment = useMemo(() => {
  // ...
}, [renderComposer, composerHeight, text, textInputProps])  // ✅

Fixes #2682

Original prompt

This section details on the original issue you should resolve

<issue_title>Custom Composer Rerending</issue_title>
<issue_description>Hi @kesha-antonov, first off awesome work on the new version! I appreciate all the hard work you've been doing recently to upgrade Gifted Chat!

After seeing all the improvements you've been making, I'm trying to upgrade from 2.6.5 to 3.2.2 and things are looking pretty good so far in my migration. I haven't made it all the way through, but one thing has jumped out to me so far. I'm noticing my custom composer rendering a lot in the latest version compared to 2.6.5. Any insight on this? The problem happens on ios and android, but for this demonstration I'm only providing iOS. See the videos below.

2.6.5

2.6.5.mov

3.2.2

3.2.2.mov

Code Snippet

renderComposer={(props: SendProps<IMessage>) => (
  <ChatComposer
    onSend={props.onSend}
    props={props}
  />
)}
import { ReactElement, useState } from "react";
import { Composer, ComposerProps, IMessage } from "react-native-gifted-chat";
import { TextInput, useTheme } from "react-native-paper";

export default function ChatComposer({
  conversation,
  onSend,
  props,
}: {
  conversation: Conversation | undefined;
  onSend:
    | ((
        messages: Partial<IMessage> | Partial<IMessage>[],
        shouldResetInputToolbar: boolean,
      ) => void)
    | undefined;
  props: ComposerProps;
}): ReactElement<typeof Composer> {
  const theme = useTheme();

  const [message, setMessage] = useState("");

  const handleOnPress = () => {
    if (onSend) {
      onSend({ text: message }, true);
      setMessage("");
    }
  };

  return (
    <TextInput
      {...props}
      autoFocus
      label="Message"
      maxLength={1000}
      mode="flat"
      multiline
      numberOfLines={3}
      onChangeText={(text) => {
        setMessage(text);
      }}
      placeholder=""
      right={
        <TextInput.Icon
          color={theme.colors.primary}
          disabled={message.trim().length === 0}
          icon="send"
          onPress={handleOnPress}
          testID="sendMessageButton"
        />
      }
      testID="messagesComposerInput"
      value={message}
    />
  );
}
```</issue_description>

## Comments on the Issue (you are @copilot in this section)

<comments>
<comment_new><author>@kesha-antonov</author><body>
Hi

Did you try to comment/uncomment some props to find what's causing the issue?

On video it looks like text input loses focus and receives it</body></comment_new>
</comments>

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

@kesha-antonov
fix: reduce unnecessary re-renders of custom Composer and Send compon…
3ca0b6a 
…ents

- Extract specific dependencies for composerFragment and sendFragment useMemo hooks in InputToolbar instead of using entire props object
- Add explicit Composer and Send props to InputToolbarProps interface
- Memoize textInputProps in GiftedChat to prevent unnecessary re-renders
- Fixes issue #2682 where custom renderComposer was re-rendering on every state change

Co-authored-by: kesha-antonov <[email protected]>
Copilot AI changed the title [WIP] Fix custom composer rerendering issue in version upgrade fix: reduce unnecessary re-renders of custom Composer and Send components Nov 27, 2025
Copilot AI requested a review from kesha-antonov November 27, 2025 05:36
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@kesha-antonov kesha-antonov Awaiting requested review from kesha-antonov

Assignees

@kesha-antonov kesha-antonov

Copilot code review Copilot

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

(3.2.2) Custom Composer Rerending

2 participants

@kesha-antonov