Skip to content

Gifted Chat vs why-did-you-render

Which should you use? A side-by-side look at what each one does, who it suits, what it costs, how hard it is to set up, and where each falls short.

Gifted Chat

Open source · MIT

A ready-made chat screen component for React Native apps, with messages, replies, and reactions.

why-did-you-render

Open source · MIT

A development-only tool that logs React re-renders that may be avoidable, so you can find slow spots.

The short answer

Choose Gifted Chat if you need…

  • Developers building a chat or messaging screen in a React Native app
  • Teams using Expo who want a drop-in chat interface
  • Projects that need swipe-to-reply, quick replies, or emoji reactions
  • Developers who want to override chat components with their own implementations

Choose why-did-you-render if you need…

  • React developers investigating slow screens with many memoized or pure components
  • Teams debugging why a large memo component keeps re-rendering after a prop like an inline style object changes
  • Developers who want to track custom hooks such as useSelector from React Redux
  • React Native developers using Metro or Expo with a Babel setup

Side-by-side

Gifted Chatwhy-did-you-render
TypeLibraryLibrary
PriceFree and open sourceFree and open source
LicenceMITMIT
GitHub stars14.4k12.5k
Setup difficultyIntermediateIntermediate
How you get itInstall with a package managerInstall with a package manager
Main languageTypeScriptJavaScript
Last code update18 days ago7 months ago

What each one is

Gifted Chat

React Native Gifted Chat is a TypeScript component library that gives app developers a complete chat screen: message list, input box, avatars, timestamps, and similar chat features. Developers drop it into an iOS, Android, or web app instead of building chat UI from scratch. The README says it is now in maintenance mode, and active development has moved to a maintained fork.

why-did-you-render

Why Did You Render is a library that hooks into React and prints notices when a component re-renders even though its props or state did not meaningfully change. It is aimed at developers hunting for performance problems in React and React Native apps. The README says it should only be used in development, since it noticeably slows React down.

Best for

Gifted Chat

  • Developers building a chat or messaging screen in a React Native app
  • Teams using Expo who want a drop-in chat interface
  • Projects that need swipe-to-reply, quick replies, or emoji reactions
  • Developers who want to override chat components with their own implementations

why-did-you-render

  • React developers investigating slow screens with many memoized or pure components
  • Teams debugging why a large memo component keeps re-rendering after a prop like an inline style object changes
  • Developers who want to track custom hooks such as useSelector from React Redux
  • React Native developers using Metro or Expo with a Babel setup

Strengths

Gifted Chat

  • Large feature set listed in the README, including reactions, read ticks, typing indicator, and link parsing
  • Ships with TypeScript definitions and works with Expo and react-native-web
  • Permissive MIT license and a large, active user base by star count

why-did-you-render

  • Targets a specific problem: showing when a re-render may be avoidable, with reasons
  • Works with React Native as well as React web apps, according to the README
  • Simple opt-in: enable tracking for all pure components or mark individual components

Not ideal for

Gifted Chat

  • Teams starting a new project, since the README encourages using the maintained fork instead (@kesha-antonov/react-native-chat)
  • People who need a finished chat app without writing any code, since this is a component for developers
  • Projects that cannot install the extra required packages such as reanimated and gesture-handler

why-did-you-render

  • Production builds, because the README warns it significantly slows React and monkey patches it, which can cause unexpected behavior
  • Projects using React Compiler, which the README says was not tested with the library and is believed to be incompatible
  • Projects on React 18 or older without using the matching older version branch (v8 for React 18, v7 for React 16/17)
  • Users who want Mobx support, which the README says is currently not supported

Trade-offs

Gifted Chat

  • The README says the package is in maintenance mode and is not receiving new features
  • Requires several companion libraries and a Babel plugin setup for react-native-reanimated
  • Setup requires knowledge of React Native and navigation header offsets

why-did-you-render

  • Only tested with React 19 in the current version; older React versions need older releases
  • Must be kept out of production builds and monkey patches React, so setup needs care
  • The README notes that not every re-render is a problem, and chasing them can add complexity without benefit

Getting started

Gifted Chat

Expo projects

npx expo install react-native-gifted-chat react-native-reanimated react-native-gesture-handler react-native-safe-area-context react-native-keyboard-controller

Bare React Native with yarn

yarn add react-native-gifted-chat react-native-reanimated react-native-gesture-handler react-native-safe-area-context react-native-keyboard-controller
Step-by-step guide: how to use Gifted Chat

why-did-you-render

Install as a dev dependency with npm

npm install @welldone-software/why-did-you-render --save-dev

Install as a dev dependency with yarn

yarn add @welldone-software/why-did-you-render -D
Step-by-step guide: how to use why-did-you-render

Frequently asked questions

What is the difference between Gifted Chat and why-did-you-render?

Gifted Chat: A ready-made chat screen component for React Native apps, with messages, replies, and reactions. why-did-you-render: A development-only tool that logs React re-renders that may be avoidable, so you can find slow spots. Gifted Chat suits developers building a chat or messaging screen in a react native app, while why-did-you-render suits react developers investigating slow screens with many memoized or pure components.

Are Gifted Chat and why-did-you-render free?

Gifted Chat: Free and open source. why-did-you-render: Free and open source.

Is Gifted Chat or why-did-you-render more popular?

Gifted Chat has more GitHub stars (14.4k) than why-did-you-render (12.5k). Popularity isn't the same as fit — check which one matches your use case above.

What are other alternatives to Gifted Chat and why-did-you-render?

Other options people compare them with include React Scan, TanStack Query, react-virtualized, Million.js, Inferno.

Keep comparing

Built from our catalogue entries for both products: open-source details come from each project's README (AI-assisted, refreshed weekly) and GitHub data; AI-tool details are editorial. Spotted something wrong? Let us know from either product's page.