map function in reactjs looping twice

Question

I am using two functional components named Bord and Square where the Bord component have a multidimensional array called boxes which have two value's on the first level, which means the length of the box is 2 with index 0 and 1,

    [
            [
                [1,2,3,4],
                [5,6,7,8]
            ],
            [
                [9,10,11,12],
                [13,14,15,16]
            ]
    ] 

I am looping through the boxes array and passing the child array in Square component and before that, I am logging the array with its index number I have shared the code as well as the screenshot of the console in the browser you can see that the log has been entered twice in the console I would like to understand that how it can be possible?

Bord.js

import React,{useState,useEffect} from 'react';
import  Square from "./Square";

function Bord(){
var [boxes,setBox]=useState(
    [
        [
            [1,2,3,4],
            [5,6,7,8]
        ],
        [
            [9,10,11,12],
            [13,14,15,16]
        ]
    ]
);

useEffect(()=>{
    console.log("length of the box",boxes.length);
},[boxes]);
    return(
        <div>
            {
            boxes.map((subArray,index)=>{
                    console.log(subArray,index);
                    return <Square key={index} values={subArray} />;
            })
            }      
        </div>
    );
}

export default Bord;

Square.js

import React from 'react';


function Square(props) {

    return (
        <div style={{ marginLeft: "50%" }}>
            <table>
                <tbody>
                    <tr>
                        {props.values.map((val, index) => { return <td key={index}>{val}</td> })}
                    </tr>
                </tbody>

            </table>
        </div>
    );
}

export default Square;

Answer 1

is due to the useEffect() Hook, it renders every time the state changes, I would not worry about it logging twice the state wont be affected.

You could have other logic inside the useEffect hook to terminate if a condition is truthy but it will still be triggered is the state changes.

Answer 2

this is happens due to the nature of the useEffect hook it's designed to be called each time the component re rendered /updated

Answer 3

this is most probably because of StrictMode , try removing <React.StrictMode> from index.js, but it's often helpful during development

Answer 4

You can easily fix this problem by using a useState([])

something like this :

const [stories,setStories] =useState([])