Looping over a reactive array in NixixJS

Looping over elements in an array is a very useful technique for programmers to know.
It is essential when manipulating the DOM, as I mentioned in my last post, how all JavaScript developers should know how to manipulate the DOM.

Fortunately, JavaScript provides developers with many different ways of performing this operation seamlessly, but that is beyond the scope of this post.

In this post, I will explain how to loop over a reactive array(an array which it's elements change when state changes) in NixixJS using the built-in 'For' component.
Be sure to keep reading because you will learn something new by the end of this post.

✔️ First, create a component that returns some JSX to create the UI.

✔️ Next, create a reactive array(also known as a store) with the 'callStore' function exported by the 'nixix/primitives' module; The function returns a tuple which the first element is the argument passed to it and the second is the setter function for the store.

✔️ Third, import the For component from the 'nixix/hoc' module; You can use the component in your code as it is used in the example below.

The For component requires three props -

• The each prop: is the reactive array.
  Behind the scenes, the For component
  appends an effect which is called when
  the length of the reactive array changes.
  
  The effect does not replace old nodes
  
  with new ones when the array changes,
  rather it creates reusable DOM nodes
  and uses the DocumentFragment Web
  API to append new nodes to reduce the
  DOM reflow time.

• The children prop: is only one callback
  that returns the nodes to be shown when
  the reactive array is looped over.

• The fallback prop: is the node to be shown when the length of the array is 0. This prop is optional.

In the example below, when the nodes are first created, three divs will be shown in the DOM. The next time - when the button is clicked and the reactive arrays length changes is '2', the first two of the formerly created divs are still shown in the DOM, with their props updated, and then the third div will be cached(removed from the DOM and kept in memory) for later use without destroying it wasteful recreating and replacing existing DOM nodes.

This is just the tip of the iceberg of how the For component works, there is a plethora of exciting features to learn about. You can ask me about them in the comments below 😉.

Do like 👍 and follow 🏃 for more content.