I have a map function which loops a large array (hundreds of products) and displays a list of products. I would like to display an additional element after the 2nd product. I have added a condition which checks for index where index == 1 and displays the elements. But I am assuming that it would affect time complexity and performance. This is within a react component. The function looks similar to this.

{products.map((product, index) => (
    <>
        <Product
            product={product}
        />
        {index == 1 && <div>Test</div>}
    </>
))}

Please let me know if this would affect the performance. Thanks in advance.

CodePudding user response：

That does not impact the time complexity at all - you're looping through the array of length n once per item, so it's a linear time complexity O(n). I'm fairly certain it wouldn't impact performance, && short-circuits so it would only be running index == 1 for the rest of the indices. A potentially more performant way to do it would be to handle the first two items outside of the loop, then slice(2) to get the rest of the array and just run map on that without the if statement.

But in short, that if statement will not noticeably affect performance, and the time complexity is only really affected by how much you're looping through the array (in this case, you're only looping through each element once so it's O(n)).