Hooks are awesome.

messages-aside.js

import React, { useMemo } from 'react'
import { usePromise } from 'react-hook-utils'

import useMessages from './use-messages'
import Loading fom './loading'
import Oops fom './oops'

const fetchMessages = async () => {
  return fetch('/api/messages')
}

const MessagesAside = () => {
  // bind to a global reducer for shared state
  const [messages, { set: setMessages }] = useMessages((state) => state.messages)

  // initiate remote fetch; pass to shared state
  const [, error, loading] = usePromise(
    useMemo(() => fetchMessages().then(setMessages), [])
  )

  if (error) return <Oops />
  else if (loading) return <Loading />
  else return (
    <ul>
    {messages.map((msg) => (
      <li key={message.id}>{message.text}</li>
    ))}
    </ul>
  )
}

export default MessagesAside

use-messages.js

import { globalReducer } from 'react-hook-utils'

export default globalReducer(
  { messages: [] },
  {
    set: (state, messages) => ({
      ...state,
      messages
    })
  }
)