Skip to content

Commit 97f720d

Browse files
docs(website): improve explanation of lists and optimization
1 parent 1649a6a commit 97f720d

File tree

1 file changed

+4
-4
lines changed

1 file changed

+4
-4
lines changed

packages/overmind-website/guides/beginner/03_connectingcomponents.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -24,22 +24,22 @@ When we just access en array in a component it will rerender if the array itself
2424
h(Example, { name: "guide/connectingcomponents/array_1" })
2525
```
2626

27-
But what happens if we iterate the array and access a property on the item?
27+
But what happens if we iterate the array and access a property on each item?
2828

2929
```marksy
3030
h(Example, { name: "guide/connectingcomponents/array_2" })
3131
```
3232

33-
Now Overmind also sees that this component is interested in the id and title of every item. Meaning that if any id or title changes this component would render again. This is typically not what you want. That is why it is a good idea to pass this item to a child component.
33+
Now Overmind also sees that this component is interested in the id and title of every item. Meaning that if any id or title changes this component would render again. This is perfectly okay for the most part, but if each child renders a complex UI in itself it is a good idea to separate it into its own component. That means each item from the array will be passed to a component as a prop.
3434

3535
```marksy
3636
h(Example, { name: "guide/connectingcomponents/array_3" })
3737
```
3838

39-
In this situation the **List** component will only render when there is a change to the actual list. While each individual **Item** component will render when its respective title changes.
39+
The benefit now is that the **List** component will only render when there is a change to the actual list. While each individual **Item** component will render when its respective title changes.
4040

4141
```marksy
42-
h(Notice, {}, "Take notice that our **Item** component still has to connect to Overmind, even though we did not explicitly access the application. That is because Overmind needs to connect to the component to track how it accesses application state."
42+
h(Notice, {}, "Take notice that our **Item** component still has to connect to Overmind, even though we did not explicitly access any state or actions. That is because Overmind needs to connect to the component to track how it accesses state passed as props as well."
4343
)
4444
```
4545

0 commit comments

Comments
 (0)