createTweet creating duplicate tweets



I’m attempting to write a React component to display a pair of featured tweets on our website. The code I have so far is below.

I’m running into a very strange bug. When I pass in two distinct tweet IDs, the component renders two copies of the second tweet.

class FeaturedTweets extends React.Component {
  render() {
    return (
        <div className="tweet-1" ref={c => this.tweet_1_ref = c} />
        <div className="tweet-2" ref={c => this.tweet_2_ref = c} />

  componentDidMount() {
    const { featured_tweet_1, featured_tweet_2 } = this.props;

    twttr.ready(() => {
      const opts = {
        conversation: 'none',
        cards: 'hidden',

      if (featured_tweet_1) {
        twttr.widgets.createTweet(featured_tweet_1, this.tweet_1_ref, opts);

      if (featured_tweet_2) {
        twttr.widgets.createTweet(featured_tweet_2, this.tweet_2_ref, opts);
  • I have confirmed (via dev tool debugging) that featured_tweet_1 and featured_tweet_2 differ, and that the two refs are pointing to the correct DOM nodes.
  • The problem appears in both Chrome and Firefox
  • If I omit either tweet ID that div stays empty and the other populates correctly.
  • If I reverse the order of the if statements it renders two duplicates of tweet #1 instead of tweet #2
  • If I wrap one in a setTimeout call and set the timeout to more than ~200ms it suddenly starts working as expected, but for obvious reasons I’d prefer not to use this hack in production.

The structure of the application requires the tweets to be inserted at runtime into an existing page, so moving to server-side rendering isn’t feasable.

Is there a way to work around this issue?

EDIT: Created a jsfiddle demonstrating the issue.


Thanks for the report, I’m able to reproduce the issue and will look into getting a fix out ASAP. I’ll follow up once a fix has been deployed.


This should be fixed as of yesterday.


This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.