Не уверен, используете ли вы какой-либо инструмент управления состоянием, такой как, например, redux, но это всего лишь вопрос вызова API периодически и обновления состояния оттуда. Я собираюсь использовать редукс в качестве примера, так как он довольно популярен
Возможно, вы захотите указать состояние со следующей информацией:
currentPosts: [] //array of posts that the user already sees
newPosts: [] // array of new posts user can't see until they hit "new posts" button
С помощью redux вы можете иметь функцию, которая вызывается каждые 5 или 10 секунд, которая проверяет API, чтобы показать, откуда вы получаете новые данные постов. Если есть новое сообщение, добавьте его в массив newPosts. Это обновит состояние, а если ваш компонент подключен к состоянию, он обновит реквизиты.
Используя эту логику, вы сможете определить, следует ли отображать кнопку «новые сообщения» с простым логическим значением. Если массив пуст, скройте его, если нет, покажите кнопку.
После нажатия кнопки вы можете обновить состояние, чтобы данные newPosts попадали в массив currentPosts, и эти элементы оттуда обрабатывались.
Надеюсь, это имеет смысл! Там может быть довольно много я скучаю, но это идея, как это могло бы работать. Позвольте мне знать, если у вас есть какие-либо вопросы