getDerivedStateFromProps

Сигнатура метода: static getDerivedStateFromProps(props, state) и документация, в которой описано, что данный метод нужен для очень редких случаев. Мы сами выдумали себе задачу и ограничения для решения, поэтому он нам пригодится.

Этот метод жизненного цикла в целом похож на CWRP, но есть отличия:

• так как метод static - нет доступа к this

• из метода должно возвращаться новое состояние или null, если "обновлений" не планируется.

• для первого рендера (initial render) - тоже вызывается

Один из лучших способов понять, что происходит - console.log

src/components/News.js

...
static getDerivedStateFromProps(props, state) {
  console.log(props)
  console.log(state)
  return {
    filteredNews: props.data,
  }
}

// удалите componentWillReceiveProps
...

Попробуйте добавить новость.

getDerivedStateFromProps

Восстановим код, который был в CWRP, но уже для getDerivedStateFromProps (gDSFR)

src/components/News.js

static getDerivedStateFromProps(props, state) {
  let nextFilteredNews = [...props.data] // было nextProps - переименовали

  nextFilteredNews.forEach((item, index) => {
    if (item.bigText.toLowerCase().indexOf('pubg') !== -1) {
      item.bigText = 'СПАМ'
    }
  })

  return { // возвращаем новое состояние
    filteredNews: nextFilteredNews,
  }
}

gdsfr-spam

Итого: научились использовать современный getDerivedStateFromProps

Исходный код