Thinking in Components. How I Think About Composing A Used... by Tom Buyse

Thinking in Components. How I think about composing a user… |... https://medium.com/better-programming/thinking-in-components...
You have 1 free member-only story left this month.

Sign up for Medium and get an extra one
Thinking in Components
How I think about composing a user interface
Tom Buyse Follow

Mar 4, 2020 · 5 min read
Photo by Green Chameleon on Unsplash.
Last week, I received a question about how I divide a page into
1 of 9 17.01.21, 19:50
components and organise the state that comes with them. I

decided it was time to detail my thought process when given
this task.
In this article, I will guide you through a real-world example and

how I would propose to organise the components that it will
consist of.
The Example
Let’s say I’m tasked with building an interface in which an
administrator can manage the users of an application. It should
be possible to view basic information, create a new user, and
edit or delete current ones. Above all, a search function must be
included to make finding users even easier.
All in all, this is a basic CRUD example that you could find in
most applications. In the image below, you can get an idea of
what this would look like:
2 of 9 17.01.21, 19:50
Sketching Out the Com

So the first thing I would
components this application could be composed of. Taking notes
jump-starts the thought
drastic changes early on
already, we might need t
avoided by first finishing the
The thought
example process.
application.
These are the main components I see:
User page
User list
User item
You might ask, “What about the search input, button, and
backlink?” These are equally important, but I consider these
reusable components. It’s important to scan a design for these
because we want to make them abstract enough so we could use
them in other places as well. We might want to start creating
these first before we can compose this page.
3 of 9 17.01.21, 19:50
Responsibilities
Example divided into main components.
Let’s start with our main ‘business’ components. I say ‘business’

because, in my opinion, these are most likely to only be used
within this page.
User page
This is the main container in which all our other components
will be nested. Its purpose is to create some structure by
containing the other components. It will also be responsible for
fetching the users. Since both the user page and the user list
need access to this data, it makes sense to keep it at the top
level.
User list
This component is responsible for displaying the list of users.
User item
This component displays the details of a user and handles the
edit and delete actions.
4 of 9 17.01.21, 19:50
Data Flow
Before we begin programming this user interface, let’s also first
think about the data flow in this page. Below is a visualisation of
how I would propose the data is going to flow through the
application:
The data flow in the example application.
As you might have noticed, the data flow is unidirectional in

both ways, which means the users are passed from the parent
component to the different child components. The other way
around, the input passes its value to the user page, which will
filter the users. This unidirectional flow has a few benefits:
It isn’t as error-prone.
It’s easier to debug. We can follow how the data goes
5 of 9 17.01.21, 19:50
through each component.
You might ask yourself why there isn’t a state management

framework included to manage the user data. In my opinion,
this example isn’t complex enough to include one. I think the
tipping point to opt for one is when more child components
require the user data. If this is the case, then we would need to
pass the user data a few more times down to the children. This is
also called prop drilling.
What about the user actions?

Now let’s think about the edit and delete actions that are located
in the user item. In this case, we have two options on where to
handle them:
Handle in the user item itself.
Pass a function from the user page that will be called.
My preference goes to handling the edit and delete in the user

item itself. Why? Otherwise, we would need to pass it two levels
down to the user item. This is quite error-prone (prop drilling).
We would have to name a property for this in the user list and
user item, but what about when we rename them? Well, there is
a possibility this could go wrong.
Another reason involves responsibility: Shouldn’t the user item

be responsible for handling an edit and delete of a user record?
If you’re worried about the danger of bloating the component
with business logic, this can be solved by moving the logic in a
hook or service layer.
6 of 9 17.01.21, 19:50
State Management
What if this page continues to grow and contains more child
components that also need to access user data? This is the
tipping point for adding a library to manage this state.
The data flow would probably look something like this:
Data flow with state management.
The reason why all components are connected with the state is
to reduce prop drilling (passing props multiple levels down).
Additionally, this is considered a best practice in most libraries
for performance reasons. Fewer components will need to re-
render when the data changes.
7 of 9 17.01.21, 19:50
Note: The example here is only for educational purposes. In

real-life scenarios, the component tree should be more complex
before a state management tool is inevitable.
Conclusion
Hopefully, this article has given you some insights on how I go
about determining the components and state within an
application.
If there is only one thing to take away from this article, it is to

always try to visualise and take notes before programming on
how the UI should be composed.
Resources
https://kentcdodds.com/blog/prop-drilling
https://redux.js.org/style-guide/style-guide/
Sign up for The Best of Better Programming

By Better Programming
A weekly newsletter sent every Friday with the best articles we

published that week. Code tutorials, advice, career opportunities, and
more! Take a look
8 of 9 17.01.21, 19:50
Your email Get

this
newsletter
By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy
for more information about our privacy practices.
Thanks to Zack Shapiro.
JavaScript React Vuejs Programming Front End Development
Learn more. Make Medium Share your

Medium is an open platform yours. thinking.
where 170 million readers Follow the writers, If you have a story to tell,
come to find insightful and publications, and topics that knowledge to share, or a
dynamic thinking. Here, matter to you, and you’ll see perspective to offer —
expert and undiscovered them on your homepage welcome home. It’s easy and
voices alike dive into the and in your inbox. Explore free to post your thinking on
heart of any topic and bring any topic. Write on Medium
new ideas to the surface.
Learn more
About Help Legal
9 of 9 17.01.21, 19:50

Thinking in Components. How I Think About Composing A Used... by Tom Buyse

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Thinking in Components. How I Think About Composing A Used... by Tom Buyse

Uploaded by

Copyright:

Available Formats

Thinking in Components. How I think about composing a user… |... https://medium.com/better-programming/thinking-in-components...

You have 1 free member-only story left this month.

Tom Buyse Follow

Photo by Green Chameleon on Unsplash.

Last week, I received a question about how I divide a page into

components and organise the state that comes with them. I

In this article, I will guide you through a real-world example and

Sketching Out the Com

These are the main components I see:

Let’s start with our main ‘business’ components. I say ‘business’

The data flow in the example application.

As you might have noticed, the data flow is unidirectional in

It’s easier to debug. We can follow how the data goes

through each component.

You might ask yourself why there isn’t a state management

What about the user actions?

Handle in the user item itself.

Pass a function from the user page that will be called.

My preference goes to handling the edit and delete in the user

Another reason involves responsibility: Shouldn’t the user item

The data flow would probably look something like this:

Data flow with state management.

Note: The example here is only for educational purposes. In

If there is only one thing to take away from this article, it is to

Sign up for The Best of Better Programming

A weekly newsletter sent every Friday with the best articles we

Your email Get

Thanks to Zack Shapiro.

JavaScript React Vuejs Programming Front End Development

Learn more. Make Medium Share your

About Help Legal

You might also like