re-use.js

const monthsToRenderTempalte = [
  {
    key: 'month-slot-1',
    state: {},
  },
  {
    key: 'month-slot-2',
    state: {},
  },
  {
    key: 'month-slot-3',
    state: {},
  },
  {
    key: 'month-slot-4',
    state: {},
  },
  {
    key: 'month-slot-5',
    state: {},
  }
];

// would come externally from fetch
const monthsState = [
  {foo: "bar jan"},
  {foo: "bar feb"},
  {foo: "bar mar"},
  {foo: "bar apr"},
  {foo: "bar jun"},
  {foo: "bar jul"},
  {foo: "bar aug"},
  {foo: "bar sep"},
];

...

moveFoward() {
  const { monthsToRender: previousMonths } = this.state;
  const monthToRecycle = previousMonths[0];
  const nextMonth = magicallyFigureOutNextMontAsIcannotBeBotheredWritingEverything();
  const monthsToRender = [...previousMonths.slice(1,5), {key: monthToRecycle.key, state: nextMonth}]
}

render() {
  const { monthsToRender } = this.state;
  return (
    <>
      <button onClick={this.moveFoward()}>Next</button>
      <ul class="months-container">
        {monthsToRender.map(month => (
          <li key={month.key}>
            {month.state.foo}
          </li>
        ));}
      </ul>
    </>
  );
}

basically what your doing is cycling through a set of keys that you continuously render via a map, when you move an item foward, the item that gets pushed all the way off screen is removed and you re-use the key so that react can use dom calls to move the element rather than destroy and re-create