You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Why do we even have a guide to manage lists? Well, lists is a type of state that differs from other state. Both from the perspective of the state itself, but also transforming that state into UI.
3
+
Why do we even have a guide to managing lists? Well, lists are a type of state that differ from other types of state. Both from the perspective of the state itself, but also transforming that state into UI.
4
4
5
5
```marksy
6
6
h(Notice, null, "The discussion of lists is not specific to Overmind and there are no limitations on how you want to approach this. This guide is rather to help you think about how you structure entities (data with an id) to optimally access and render them.")
@@ -9,13 +9,13 @@ h(Notice, null, "The discussion of lists is not specific to Overmind and there a
9
9
## Defining the state
10
10
When we want to render a list of something we want an **array**. This is the data structure we instinctively go to as it basically is a list. But arrays are rarely the way you want to store the actual data of the list.
11
11
12
-
If your list consists of posts, these posts are most likely entities from the server which are unique, they have a unique id. A data structure the better manages uniqueness is an **object**.
12
+
If your list consists of posts, these posts are most likely entities from the server which are unique, and have a unique id. A data structure that better manages uniqueness is an **object**.
Another benefit from using an object is that you have a direct reference to the entity by using its id. No need to iterate an array to find what you are looking for. So this is a good rule of thumb. If the state you are defining has unique identifiers they should most likely be stored as an object, not an array.
18
+
Another benefit from using an object is that you have a direct reference to the entity by using its id. No need to iterate an array to find what you are looking for. So this is a good rule of thumb: if the state you are defining has unique identifiers they should most likely be stored as an object, not an array.
19
19
20
20
But we still want to use an array when we transform the state into a UI. Let us see what we can do about that.
21
21
@@ -26,44 +26,44 @@ In Overmind it is encouraged that you derive these dictionaries of entities to a
Now when we point to **state.postsList** we get an array of posts. What is important to remember here is that we do not create the list again whenever we point to this state value. It is only run again if there is a change to the depending posts state.
29
+
Now when we point to **state.postsList** we get an array of posts. What is important to remember here is that we do not create the list again whenever we point to this state value. It is only run again if there is a change to the referenced posts' state.
30
30
31
31
## Sorting
32
32
33
-
Now we have optimally stored our posts in a dictionary for easy access by id. We have also created a derived state which converts this dictionary to an array whenever the source dictionary changes. Though most likely you want to sort the list. Typically lists are sorted chronologically and our posts has a **datetime** field.
33
+
Now we have optimally stored our posts in a dictionary for easy access by id. We have also created a derived state which converts this dictionary to an array whenever the source dictionary changes. Though most likely you want to sort the list. Typically lists are sorted chronologically and our posts item has a **datetime** field.
34
34
35
35
```marksy
36
36
h(Example, { name: "guide/managinglists/sort" })
37
37
```
38
38
39
-
There we go, our posts are now shown chronologically. But maybe we we only want to show some of the posts that are available? Maybe the list should only contain the ten latest?
39
+
There we go, our posts are now shown chronologically. But maybe we only want to show some of the posts that are available? Maybe the list should only contain the ten latest entries?
40
40
41
41
## Filtering
42
42
43
-
To limit the number of posts shown we can create a new state and use it inside our derived to limit the number of results.
43
+
To limit the number of posts shown we can create a new state and use it inside our derived state to limit the number of results.
Now this approach will work perfectly fine. The component will render the list and update it whenever it needs to. The only drawback with this approach is that any change to individual posts will also cause the component to render, specifically the **title** of a post since that is the only thing we are looking at. This is because this one component is looking at all the posts. We can optimize this by rather passing each post down to a child component:
59
+
Now this approach will work perfectly fine. The component will render the list and update it whenever it needs to. The only drawback with this approach is that any change to individual posts will also cause the component to render, specifically the **title** of a post since that is the only thing we are looking at. This is because this one component is looking at all the posts. We can optimize this by passing each post down to a child component:
Now the **Posts** component only cares about changes to the list itself, while each **Post** component cares about its correspoding post title. That means if the title of a post updates only the component that actually cares about that post renders again. If the list itself changes only the **Posts** component will render.
65
+
Now the **Posts** component only cares about changes to the list itself, while each **Post** component cares about its corresponding post title. It means that if the title of a post updates, only the component that actually cares about that post renders again. If the list itself changes only the **Posts** component will render.
66
66
67
67
## Summary
68
68
69
-
Managing lists has two parts. Defining how to store the data of the list and how to actually render the list. It can be a good idea to store data entities with unique ids as a dictionary and rather use a **derived** state to produce the array itself. This gives you best of both worlds. Easy lookup using the id and a cached list that only updates when dependent state updates.
69
+
Managing lists has two considerations: defining how to store the data of the list, and how to actually render the list. It can be a good idea to store data entities with unique ids as a dictionary and rather use a **derived** state to produce the array itself. This gives you best of both worlds – easy lookup using the id, and a cached list that only updates when dependent state updates.
0 commit comments