'Why console.log is showing six times here? First two times it comes with null value and other times with proper value

import useItems from '../../hooks/useItems';
import ShowItems from '../showItem/ShowItems';

const AllItems = () => {
    const [allItems] = useItems();
    console.log(allItems);
    
    return (
        <div className='lg:grid lg:grid-cols-3 lg:gap-4'>
            {
                allItems.map(item => <ShowItems key={item._id} item={item}></ShowItems>)
            }
        </div>
    );
};

export default AllItems;

Every time when I try to use a variable the react app repeats the value. First time it return a null value and then returns proper value.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source