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.
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.
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.
That's interesting, can you share a code example?
Sure thing. Here is a chat room
This is the top level component
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.
Very interesting, thanks for sharing!