title: Conditional unique rendering
body: <p>I have an array with objects sorted with a date entry and a component to list in what approximated time it was listed.</p>
  <pre><code>const TimeHeader = ({date}) =&gt; {
      const calculateDays = (date) =&gt; {
          let timeDiff = new Date().getTime() - new Date(date).getTime();
          let days = Math.ceil(timeDiff / (1000 * 3600 * 24));
          return days;
      }
      
      let daysGone = calculateDays(date);
      let color = &quot;green&quot;;
      let text = &quot;Less than 1 Week&quot;;
      if (daysGone &gt; 7 &amp;&amp; daysGone &lt;= 30){
          color = &quot;blue&quot;;
          text = &quot;Less than 1 Month&quot;;
      } else if (daysGone &gt; 30 &amp;&amp; daysGone &lt;= 90){
          color = &quot;yellow&quot;;
          text = &quot;Less than 3 Months&quot;;
      } else if (daysGone &gt; 90){
          color = &quot;red&quot;;
          text = &quot;More than 3 Months&quot;;
      }
  
      return (
          &lt;div style={{backgroundColor: color}}&gt;{text}&lt;/div&gt;
      )
  }
  </code></pre>
  <p>How would I call upon this component to be rendered only once for each instance? (Once for Less than 1 week, once for less than one month etc)</p>
  <p>Right now I am just calling it before each item listing but of course it leads a lot of repetition.</p>
  <pre><code>            {list.map(item =&gt; {
                  return (
                      &lt;div key={item.id}&gt;
                          &lt;TimeHeader date={item.date} /&gt;
                          &lt;ItemDisplay item={item} /&gt;
                       &lt;/div&gt;
                  )
              })}
  </code></pre>
  <p>One solution would be to split the array to different categories beforehand, but I'm wondering if there is a nice solution that doesn't require splitting the array.</p>