List RenderingEdit this page
List rendering allows you to generate multiple elements from a collection of data, such as an array or object, where each element corresponds to an item in the collection.
When dealing with dynamic data, Solid offers two ways to render lists: the
Both of these components help you loop over data collections to generate elements, however, they both cater to different scenarios.
<For> is a looping component that allows you to render elements based on the contents of an array or object.
This component is designed to be used with complex data structures, such as arrays of objects, where the order and length of the list may change frequently.
The sole property in
each , through which you can specify the data collection to loop over.
This property expects an array, however, it can also accept objects that have been converted to arrays using utilities such as
<For> tags, the component requires a callback function which will dictate how each item in the data collection should be rendered.
map method, providing a familiar pattern to follow.
The function receives two arguments:
item: represents the current item in the data collection that is being rendered over.
index: the current item's index within the collection.
You can access the current
index to dynamically set attributes or content of the JSX elements.
Index is a signal and must be called as a function to retrieve its value.
<Index>, similar to
<For>, is a looping component that allows you to render elements based on the contents of an array or object.
However, when the order and length of the list remain stable, but the content may change frequently,
<Index> is a better option because it results in fewer re-renders.
Similar to the
<Index> accepts a single property named
each, which is where you pass the structure you wish to loop over.
index is a signal with
<For>, it remains fixed with
This is because
<Index> is more concerned with the index of the elements in the array.
Because of this, the
item is a signal, allowing the content at each index to change without a re-render while the index remains fixed.
<For> is designed to be used when the order and length of the list may change frequently.
When the list value changes in
<For>, the entire list is re-rendered.
However, if the array undergoes a change, such as an element shifting position,
<For> will manage this by simply moving the corresponding DOM node and updating the index.
<Index>, however, is designed to be used when the order and length of the list remain stable, but the content may change frequently.
When the list value changes in
<Index>, only the content at the specified index is updated.
When to use
In cases where signals, nested loops, or dynamic lists are not required,
<For> is the best option.
For example, when creating a list of static elements, such as a list of links,
<For> is the best option to use.
This is because it will only modify the indexes of the elements in the list, rather than re-rendering the entire list.
<Index> is the better option to use.
If you were using
<For>, the entire list would be re-rendered when a value changes, even if the length of the list remains unchanged.
<Index>, instead, will update the content at the specified index, while the rest of the list remains unchanged.