Sentry Answers>React>

Encountered Two Children with the Same Key — React Fix

Encountered Two Children with the Same Key — React Fix

Evan Hicks

The Problem

When you are rendering React components in a map function inside the render function, you must provide a key prop to each component that is unique, otherwise React will put a warning in the console and may or may not correctly update your component when it rerenders. One of the most common mistakes is using an object as the key. An object will get stringifyed by React into [object Object] regardless of the specifics of the object you passed in. So two completely different objects will have the same key. If this happens you will see something like a warning like the following in the console:

Warning: Encountered two children with the same key, [object Object]. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

Click to Copy
render() { return ( <div> {this.state.users.map(user => ( <UserComponent user={user} key={user} /> ))} </div> ) }

Another common mistake is to use array indexes for the keys.

Click to Copy
render() { return ( <div> {this.state.users.map((user, idx) => ( <UserComponent user={user} key={idx} /> ))} </div> ) }

The Solution

A key prop should be unique, stable and reproducible.

Unique: The key for an element should be unique amongst its siblings. The key does not need to be globally unique. This is the problem with using the object for a key, since the string form of any object is always the same.

Stable: The key for a certain element should always be the same. This is why using the array indexes can cause errors. If user ABC is at index 0, and then gets moved to index 1, the component will not rerender because the keys are the same, even though the data connected to those keys has changed.

Reproducible: It should always be possible to get the same key for the object every time. Generally this means to not use random values for keys.

The best practice in situations like this is to use the unique ID backing your objects. In this example, the user’s ID that would have been stored in the database. However it’s possible to use other hashing functions to get similar results.

Click to Copy
render() { return ( <div> {this.state.users.map((user, idx) => ( <UserComponent user={user} key={user.id} /> ))} </div> ) }

Further Reading

If you’re looking to get a deeper understanding of how React application monitoring works, take a look at the following articles:

  • Sentry BlogGuide to Error & Exception Handling in React
  • Sentry BlogHow to identify fetch waterfalls in React
  • Syntax.fmReact Server Components
  • Sentry BlogSentry can’t fix React hydration errors, but it can really help you debug them
  • Syntax.fmWhy the jQuery Creator Uses React and Typescript
  • Syntax.fmListen to the Syntax Podcast
  • Sentry BlogReact Native Debugging and Error Tracking During App Development
  • Syntax.fmDiscussion on building native iOS and Android apps with React Native
  • SentryReact Error & Performance Monitoring
  • Sentry BlogFixing memoization-breaking re-renders in React
  • SentryReact Debug Hub
  • Syntax.fm logo
    Listen to the Syntax Podcast

    Tasty treats for web developers brought to you by Sentry. Get tips and tricks from Wes Bos and Scott Tolinski.

    SEE EPISODES

Considered “not bad” by 4 million developers and more than 100,000 organizations worldwide, Sentry provides code-level observability to many of the world’s best-known companies like Disney, Peloton, Cloudflare, Eventbrite, Slack, Supercell, and Rockstar Games. Each month we process billions of exceptions from the most popular products on the internet.

© 2024 • Sentry is a registered Trademark of Functional Software, Inc.