component.js

// react hook (from the react-cabal-client)
function useMessage(messageLimit,) {

  const {cabalClient} = useContext(CabalProvider);

  const [messages, setMessages] = useState(cabalClient.getMessage(messageLimit));

  useEffect() {
    cabalClient.subscribe(updateMessages)

    return () => cabalClient.unSubscribe();
  , []}


  function updateMessage(message) {
    // if message is of a certain type update the messages type
    if(message.type === "some-message-type") {
      setMessages(messages)
    }
  }

  return {
    // we could have more here.
    messages,
    addMessage: cabalClient.addMessage
  }
}


// container component in UI
function MessageContainer() {

  const {
    messages,
    addMessage
  } = useMessage(100)

  return(
    <div>
      {messages.map(i => <Message message={message}/>)}
    </div>
  )
}

this is looking cool! i don't really know that much about hooks, but the sparseness of the code is attractive :~

some typos:

• should be cabalClient.unsubscribe() (small s, not S)
• instead of cabalClient.addMessage, do you mean cabal-details.publishMessage()?
• i don't really understand the lines:

  function updateMessage(message) {
    // if message is of a certain type update the messages type
    if(message.type === "some-message-type") {
      setMessages(messages)
    }
  }

Client emits different types of updates. So I thought maybe we will have to separate them into different hooks. Like Message hooks, user related hooks etc.