DEV Community

Discussion on: What makes you think "Ok, that should be a component"?

Collapse
 
richytong profile image
Richard Tong

I like to split up my components 1:1 with UI elements. Then I'll split beyond that if styles get too big. I call it a more relaxed take on smart and dumb components.

Collapse
 
vtrpldn profile image
Vitor Paladini

That's interesting, can you share a code example?

Collapse
 
richytong profile image
Richard Tong

Sure thing. Here is a chat room

chat-room

This is the top level component

const ChatRoom = e(x => {
  useEffect(() => {
    pipe([
      APIClient.findRooms,
      fork([
        x.setRooms,
        pipe([
          get([0, 'id']),
          x.setCurrentRoom,
        ]),
      ]),
    ])()
  }, [])
  return Div({
    style: {
      display: 'grid',
      gridTemplateColumns: '20% auto',
      width: '100%',
    },
  }, [
    ChatRoomSideBar(x),
    Div({
      style: {
        display: 'flex',
        justifyContent: 'center',
      },
    }, [Div({
      style: {
        width: '100%',
      },
    }, [
      ChatRoomDetail(x),
      ChatRoomChat(x),
    ])]),
  ])
})
  • ChatRoomSideBar - sidebar on the left
  • ChatRoomDetail - the top right box with chat room name and users
  • ChatRoomChat - the bottom right chat list with input to send chat

I say it's a more relaxed version of smart and dumb components because ChatRoomChat is a smart component inside another smart component ChatRoom and manages its own high level state with useReducer. The way everything gets laid out ends up becoming somewhat arbitrary in terms of smart and dumb. The real goal is to bring effects and state to where they absolutely need to be. ChatRoomSideBar and ChatRoomDetail are dumb, they only hold elements and styles.

Thread Thread
 
vtrpldn profile image
Vitor Paladini

Very interesting, thanks for sharing!