DEV Community

loading...
Cover image for How to use loop in React.js?

For Loop in React How to use loop in React.js?

duomly profile image Duomly Originally published at blog.duomly.com ・2 min read

This article was originally published at https://www.blog.duomly.com/6-most-popular-front-end-interview-questions-and-answers-for-beginners-part-2/#how-to-use-loop-in-react-js


Like the if/else statements, when we would like to do loops in the JavaScript or TypeScript logic, we do not need to bother about any special rules.

It’s just a JS loop, as always, and we can use all types of loops (of course, not all of them are good for all cases, but it’s possible).

Anyway, we have a special reason why we should focus on the iteration methods when we develop apps for React.js.

We use iteration methods to render elements. For example, we can use iteration to render the whole list of products from the product array.

To do that, we can use few methods, one of the most popular is the map method, but we will cover the map in the separate section, and now we should focus on the other methods like loops or forEach method.

It is very popular to use loops like for-loop (in most cases the fastest one), for-in, or for-of to iterate through elements.

That method is useful when we use separate functions to render part of components, and it’s the best method for performance.

The second method that I’ve included in the example is the method with array.forEach().

This method, compared to the for-loops and map method, is the slowest one and doesn’t return the values like a map, so you need to have a special case to use it.

Let’s take a look at the code example with two for-loop and forEach methods:

// First one with For of loop
function renderComponent() {
  const products = ['orange', 'apple', 'watermelon'];

  const list = []

  for (const [i, product] of products.entries()) {
    list.push(<li>{product}</li>)
  }

  return (
    <div>
      {list}
    </div>
  )
}

function Parent(props) {
  return renderProducts();
}

// Second with forEach method
function renderComponent() {
  const products = ['orange', 'apple', 'watermelon'];

  const list = []

  products.forEach((product) => {
    list.push(<li>{product}</li>)
  })

  return (
    <div>
      {list}
    </div>
  )
}

function Parent(props) {
  return renderProducts();
}
Enter fullscreen mode Exit fullscreen mode

Duomly - Programming Online Courses

Thank you for reading,
Radek from Duomly

Discussion

pic
Editor guide
Collapse
bendman profile image
Ben Duncan

Nice article! I see you mention map, but it's worth emphasizing that it is much more common to use map for this kind of thing as it doesn't require declaring your list early, mutating the list, or using side-effects.

Also, don't forget to pass the key prop!

function renderComponent() {
  const products = ['orange', 'apple', 'watermelon'];

  const list = products.map(product => <li key={product}>{product}</li>)

  return (
    <div>
      {list}
    </div>
  )
}
Enter fullscreen mode Exit fullscreen mode
Collapse
pengeszikra profile image
Peter Vivo

Maybe product is non unique, index still usefull

  const list = products.map((product, key) => <li key={key}>{product}</li>)

... but better if prodcut contains key and info

  // products = [ {info: 'red apple', key: 'RB67'}, {info: 'green pie', key: 'CB732'}];
  const list = products.map(({info, key}) => <li key={key}>{info}</li>)
Collapse
duomly profile image
Duomly Author

Hey Ben, yes, map is a good method to do that, and I've created separated episode about map, that you can watch tomorrow, here: youtube.com/watch?v=Fbc4BvYc4ec

In this one, I wanted to show other popular methods :)

Collapse
oathkeeper profile image
Divyesh Parmar

How about using a useMemo() to maintain that arrays reference and only call it when we want to change