title: Multiple instances of the same React component type do not render correctly
body: <p>I'm a newbie React developer. I'm trying to make a component that takes a list of information (i.e. the InfoList.currentList in the code below.) and renders it as multiple  elements. To help my model code trigger re-render, the component in question registers a trigger function using useReducer(). Here's my minimized code (still producing the same issue.)</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function BannerStyleInfoView() {
    function reducer(state: {[index: number]: any}, action: any) {
      return InfoList.currentList()
    }
  
    const [currentList, dispatch] = useReducer(reducer, {})
    useEffect(function() {
      InfoList.forceRender = () =&gt; {dispatch(undefined)}
      return () =&gt; {InfoList.forceRender = undefined}
    }, [])
  
    const elements = Object.entries(currentList).map(function([index, entry]) {
      // @ts-ignore
      const {text} = entry
      console.debug("=== Added", index, text)
      return (
          &lt;BannerStyleInfoElement key={index} index={index} text={text} /&gt;
      )
    })
    console.log("=== elements:", elements)
  
    return (
      &lt;&gt;
        {elements}
      &lt;/&gt;
    )
  }</code></pre>
  </div>
  </div>
  </p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function BannerStyleInfoElement({index, text}: {index: string, text: string}) {
    console.debug("=== show:", index, text)
    return (
        &lt;div key={index}&gt; {text} &lt;/div&gt;
    )
  }</code></pre>
  </div>
  </div>
  </p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>class InfoList {
    public static initialize() {
      infoList = {}
    }
  
    public static append(text:string, duration: number = 2) {
      const entry = {
        duration,
        text,
        timestamp: Date.now()
      }
      let indexString
      indexString = nextIdentifier.toString()
      ++nextIdentifier
      infoList[indexString] = entry
  
      if (InfoList.forceRender) {
        InfoList.forceRender()
      }
  
      return indexString
    }
  
    public static clear(identifier: string) {
      console.assert(identifier in infoList)
      delete infoList[identifier]
    }
  
    public static currentList() {
      return infoList
    }
  
    public static forceRender: (() =&gt; void) | undefined
  }
  export {InfoList}
  
  
  let nextIdentifier = 0
  let infoList: {[index: string]: any} = {}</code></pre>
  </div>
  </div>
  </p>
  <p>In the code above, I invoked <code>InfoList.append()</code> twice. When it was first invoked, the code correctly emits one <code>&lt;div&gt;</code>. But the second call does not re-render. The log message is like below.</p>
  <pre><code>=== Added 0 entry0
  === elements: [{…}]
  === show: 0 entry0
  
  === Added 0 entry0
  === Added 1 entry1
  === elements: (2) [{…}, {…}]
  </code></pre>
  <p>My observation is there's no <code>=== show</code> log message by the second call, while the first call correctly emits the log message. I suspected it's related to handling multiple instances of the same component type, but I'm not sure. I added <code>key</code> property, but it's still not working. Any advice?</p>
  <p>Thanks,</p>
  <p>DK</p>